- progress
- loadstart
- loademetadata
- loadeddata
- canplaythrough
- progress
- play
David LaPalomento dmlap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var videoIds = [1, 2, 3, 4]; | |
| // get the first video | |
| player.catalog.getVideo(videoIds[0], function(error, video) { | |
| if (error) { | |
| return alert(error); | |
| } | |
| videoIds.shift(); | |
| // load it into the player so it's ready when the user hits "play" | |
| player.catalog.load(video); |
dmlap
/ custom-control.css
Created
October 27, 2014 17:31
Specifying button display ordering in the Brightcove player.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Specify where your custom control should show up relative to the other buttons. | |
| Buttons are displayed in ascending order, from left to right. The CSS spec only | |
| requires `order` today but you should include the other rules so that your button | |
| is placed correctly on older browsers. | |
| */ | |
| .video-js .vjs-custom-control { | |
| order: 5; /* after the progress bar but before the volume button */ | |
| -webkit-box-ordinal-group: 5; | |
| -moz-box-ordinal-group: 5; | |
| -webkit-order: 5; |
dmlap
/ dynamic-vc.html
Last active
August 29, 2015 14:07
Loading a Video Cloud video dynamically with an in-page embed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <video | |
| data-account="1234" | |
| data-player="abc-123" | |
| data-embed="default" | |
| class="video-js" controls></video> | |
| <script src="//players.brightcove.net/1234/abc-123_default/index.min.js"></script> | |
| <script> | |
| var player = videojs(document.querySelector('video')); | |
| player.bcCatalog.getVideo('17', function(error, video) { |
dmlap
/ bitrate-switch.html
Created
October 2, 2014 18:31
An example of manual bitrate selection with videojs-contrib-hls.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>video.js HLS Plugin Example</title> | |
| <link href="node_modules/video.js/dist/video-js/video-js.css" rel="stylesheet"> | |
| <!-- video.js --> | |
| <script src="node_modules/video.js/dist/video-js/video.js"></script> |
dmlap
/ videojs-swf-122-events.md
Last active
September 15, 2016 14:12
HTML5 versus Flash event comparision
dmlap
/ plugin-options.js
Created
September 25, 2014 13:58
A robust Brightcove player plugin will accept all of its necessary configuration as initialization options and fall back on data attributes for defaults.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| videojs.plugin('example', function(options) { | |
| var player = this, | |
| defaults, | |
| settings; | |
| // grab default configuration from data attributes | |
| // these will be set automatically by Video Cloud but can be provided by any other video | |
| // CMS as well | |
| defaults = { | |
| // player.options() is automatically populated with any data attributes declared on |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // change the video source URL | |
| player.src({ | |
| src: 'http://example.com/movie.mp4', | |
| type: 'video/mp4' | |
| }); | |
| // Safari requires you to call load after loading a new video source | |
| player.load(); |
dmlap
/ by-hand-init.html
Created
September 19, 2014 20:55
Initializing a plugin by hand. If some of the information required for a plugin's configuration isn't available until the player has loaded in a page, you can delay initializing it until you're ready.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <video | |
| data-account="1234" | |
| data-player="5678" | |
| data-embed="default" | |
| class="video-js" controls></video> | |
| <script src="//players.brightcove.net/1234/5678_default/index.min.js"></script> | |
| <script> | |
| var player = videojs(document.querySelector('video')); |
dmlap
/ accountIdGetter.js
Created
September 19, 2014 18:23
Accessing the account ID in a player plugin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| videojs('accountIdGetter', function() { | |
| var player = this; | |
| console.log('Account ID', player.el().getAttribute('data-account')); | |
| }); |