CloseButton
The CloseButton component is a button which fires a "close" event
4 | when it is activated.
DEFINED IN: close-button.js line number: 4
EXTENDS: button.js
Constructor
CloseButton()The CloseButton component is a button which fires a "close" event
4 | when it is activated.
DEFINED IN: close-button.js line number: 4
EXTENDS: button.js
CloseButton()Toggle fullscreen video
", 15 | "params": [ 16 | { 17 | "type": { 18 | "names": [ 19 | "Player", 20 | "Object" 21 | ] 22 | }, 23 | "name": "player" 24 | }, 25 | { 26 | "type": { 27 | "names": [ 28 | "Object" 29 | ] 30 | }, 31 | "optional": true, 32 | "name": "options" 33 | } 34 | ], 35 | "augments": [ 36 | "Button" 37 | ], 38 | "kind": "class", 39 | "name": "FullScreenToggle", 40 | "longname": "FullScreenToggle", 41 | "scope": "global" 42 | }, 43 | { 44 | "comment": "/**\n * Allows sub components to stack CSS class names\n * @return {String}\n * @method buildCSSClass\n */", 45 | "meta": { 46 | "range": [ 47 | 143, 48 | 249 49 | ], 50 | "filename": "fullscreen-toggle.js", 51 | "lineno": 9, 52 | "path": "/Users/mboles/git/BCL-LearningSamples/jsdoc-tests2", 53 | "code": {} 54 | }, 55 | "description": "Allows sub components to stack CSS class names
", 56 | "returns": [ 57 | { 58 | "type": { 59 | "names": [ 60 | "String" 61 | ] 62 | } 63 | } 64 | ], 65 | "kind": "function", 66 | "name": "buildCSSClass", 67 | "longname": "buildCSSClass", 68 | "scope": "global" 69 | }, 70 | { 71 | "comment": "/**\n * Handles the click\n * @method handleClick\n */", 72 | "meta": { 73 | "range": [ 74 | 251, 75 | 305 76 | ], 77 | "filename": "fullscreen-toggle.js", 78 | "lineno": 15, 79 | "path": "/Users/mboles/git/BCL-LearningSamples/jsdoc-tests2", 80 | "code": {} 81 | }, 82 | "description": "Handles the click
", 83 | "kind": "function", 84 | "name": "handleClick", 85 | "longname": "handleClick", 86 | "scope": "global" 87 | }, 88 | { 89 | "kind": "package", 90 | "longname": "package:undefined", 91 | "files": [ 92 | "/Users/mboles/git/BCL-LearningSamples/jsdoc-tests2/fullscreen-toggle.js" 93 | ] 94 | } 95 | ] 96 | -------------------------------------------------------------------------------- /docs/api/html-track-element.html: -------------------------------------------------------------------------------- 1 |https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement
4 |interface HTMLTrackElement : HTMLElement { 5 | attribute DOMString kind; 6 | attribute DOMString src; 7 | attribute DOMString srclang; 8 | attribute DOMString label; 9 | attribute boolean default;
10 |const unsigned short NONE = 0; 11 | const unsigned short LOADING = 1; 12 | const unsigned short LOADED = 2; 13 | const unsigned short ERROR = 3; 14 | readonly attribute unsigned short readyState;
15 |readonly attribute TextTrack track; 16 | };
DEFINED IN: html-track-element.js line number: 15
EXTENDS: button.js
HTMLTrackElement( options )| name | Type | Required | Description |
|---|---|---|---|
| options | Object | yes | TextTrack configuration |
The Media Loader is the component that decides which playback technology to load 4 | when the player is initialized.
DEFINED IN: loader.js line number: 9
EXTENDS: component.js
MediaLoader( player,[options],[ready] )| name | Type | Required | Description |
|---|---|---|---|
| player | Object | yes | Main Player |
| options | Object | no | Object of option names and values |
| ready | function | no | Ready callback function |
The base class for buttons that toggle specific text track types (e.g. subtitles)
DEFINED IN: text-track-button.js line number: 10
EXTENDS: menu-button.js
TextTrackButton( player,[options] )| name | Type | Required | Description |
|---|---|---|---|
| player | Player|Object | ||
| options | Object |
This page demonstrates a text descriptions track (intended primarily for blind and visually impaired consumers of visual media)
23 | 24 | 28 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/examples/shared/example-captions.vtt: -------------------------------------------------------------------------------- 1 | WEBVTT 2 | 3 | 00:00.700 --> 00:04.110 4 | Captions describe all relevant audio for the hearing impaired. 5 | [ Heroic music playing for a seagull ] 6 | 7 | 00:04.500 --> 00:05.000 8 | [ Splash!!! ] 9 | 10 | 00:05.100 --> 00:06.000 11 | [ Sploosh!!! ] 12 | 13 | 00:08.000 --> 00:09.225 14 | [ Splash...splash...splash splash splash ] 15 | 16 | 00:10.525 --> 00:11.255 17 | [ Splash, Sploosh again ] 18 | 19 | 00:13.500 --> 00:14.984 20 | Dolphin: eeeEEEEEeeee! 21 | 22 | 00:14.984 --> 00:16.984 23 | Dolphin: Squawk! eeeEEE? 24 | 25 | 00:25.000 --> 00:28.284 26 | [ A whole ton of splashes ] 27 | 28 | 00:29.500 --> 00:31.000 29 | Mine. Mine. Mine. 30 | 31 | 00:34.300 --> 00:36.000 32 | Shark: Chomp 33 | 34 | 00:36.800 --> 00:37.900 35 | Shark: CHOMP!!! 36 | 37 | 00:37.861 --> 00:41.193 38 | EEEEEEOOOOOOOOOOWHALENOISE 39 | 40 | 00:42.593 --> 00:45.611 41 | [ BIG SPLASH ] -------------------------------------------------------------------------------- /docs/examples/simple-embed/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |The Video.js API allows you to interact with the video through JavaScript, whether the browser is playing the video through HTML5 video, Flash, or any other supported playback technologies.
15 |To use the API functions, you need access to the player object. Luckily this is easy to get. You just need to make sure your video tag has an ID. The example embed code has an ID of "example_video_1". If you have multiple videos on one page, make sure every video tag has a unique ID.
17 |var myPlayer = videojs('example_video_1');
18 | (If the player hasn't been initialized yet via the data-setup attribute or another method, this will also initialize the player.)
20 |The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
22 |videojs("example_video_1").ready(function(){
23 | var myPlayer = this;
24 |
25 | // EXAMPLE: Start playing the video.
26 | myPlayer.play();
27 |
28 | });
29 | Now that you have access to a ready player, you can control the video, get values, or respond to video events. The Video.js API function names follow the HTML5 media API. The main difference is that getter/setter functions are used for video properties.
32 |
33 | // setting a property on a bare HTML5 video element
34 | myVideoElement.currentTime = "120";
35 |
36 | // setting a property on a Video.js player
37 | myPlayer.currentTime(120);
38 | The full list of player API methods and events can be found in the player API docs.
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/guides/audio-tracks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Audio Tracks are a function of HTML5 video for providing alternative audio track selections to the user, so that a track other than the main track can be played. Video.js makes audio tracks work across all browsers. There are currently five types of tracks:
15 |29 |31 |Right now adding audio tracks in the HTML is unsupported. Audio Tracks must be added programatically.
30 |
You must add audio tracks programatically for the time being.
32 |Audio Track propertites and settings
34 |One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
36 |The label for the track that will be show to the user, for example in a menu that list the different languages available for audio tracks.
38 |The two-letter code (valid BCP 47 language tag) for the language of the audio track, for example "en" for English. A list of language codes is available here.
40 |If this track should be playing or not. In video.js we only allow one track to be enabled at a time. so if you enable more than one the last one to be enabled will end up being the only one.
42 |When a new track is enabled (other than the main track) an event is fired on the AudioTrackList called change you can listen to that event and do something with it.
45 | Here's an example:
// get the current players AudioTrackList object
47 | let tracks = player.audioTracks();
48 |
49 | // listen to the change event
50 | tracks.addEventListener('change', function() {
51 |
52 | // print the currently enabled AudioTrack label
53 | for (let i = 0; i < tracks.length; i++) {
54 | let track = tracks[i];
55 |
56 | if (track.enabled) {
57 | console.log(track.label);
58 | return;
59 | }
60 | }
61 | });
62 | player.audioTracks() -> AudioTrackListThis is the main interface into the audio tracks of the player.
66 | It returns an AudioTrackList which is an array like object that contains all the AudioTrack on the player.
player.audioTracks().addTrack(AudioTrack)Add an existing AudioTrack to the players internal list of AudioTracks.
69 |player.audioTracks().removeTrack(AudioTrack)Remove a track from the AudioTrackList currently on the player. if no track exists this will do nothing.
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /docs/guides/components.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |The Video.js player is built on top of a simple, custom UI components architecture. The player class and all control classes inherit from the Component class, or a subclass of Component.
videojs.registerComponent('Control', videojs.extends(Component));
16 | videojs.registerComponent('Button', videojs.extends(videojs.getComponent('Control')));
17 | videojs.registerComponent('PlayToggle', videojs.extends(videojs.getComponent('Button')));
18 | The UI component architecture makes it easier to add child components to a parent component and build up an entire user interface, like the controls for the Video.js player.
20 |// Adding a new control to the player
21 | myPlayer.addChild('BigPlayButton');
22 | Every component has an associated DOM element, and when you add a child component, it inserts the element of that child into the element of the parent.
24 |myPlayer.addChild('BigPlayButton');
25 | Results in:
27 | <!-- Player Element -->
28 | <div class="video-js">
29 | <!-- BigPlayButton Element -->
30 | <div class="vjs-big-play-button"></div>
31 | </div>
32 | The actual default component structure of the Video.js player looks something like this:
34 |Player
35 | PosterImage
36 | TextTrackDisplay
37 | LoadingSpinner
38 | BigPlayButton
39 | ControlBar
40 | PlayToggle
41 | VolumeMenuButton
42 | CurrentTimeDisplay (Hidden by default)
43 | TimeDivider (Hidden by default)
44 | DurationDisplay (Hidden by default)
45 | ProgressControl
46 | SeekBar
47 | LoadProgressBar
48 | MouseTimeDisplay
49 | PlayProgressBar
50 | LiveDisplay (Hidden by default)
51 | RemainingTimeDisplay
52 | CustomControlsSpacer (No UI)
53 | ChaptersButton (Hidden by default)
54 | SubtitlesButton (Hidden by default)
55 | CaptionsButton (Hidden by default)
56 | FullscreenToggle
57 | ErrorDisplay
58 | TextTrackSettings
59 | The progress control is made up of the SeekBar. The seekbar contains the load progress bar 61 | and the play progress bar. In addition, it contains the Mouse Time Display which 62 | is used to display the time tooltip that follows the mouse cursor. 63 | The play progress bar also has a time tooltip that show the current time.
64 |By default, the progress control is sandwiched between the volume menu button and
65 | the remaining time display inside the control bar, but in some cases, a skin would
66 | want to move the progress control above the control bar and have it span the full
67 | width of the player, in those cases, it is less than ideal to have the tooltips
68 | get cut off or leave the bounds of the player. This can be prevented by setting the
69 | keepTooltipsInside option on the progress control. This also makes the tooltips use
70 | a real element instead of pseudo elements so targetting them with css will be different.
let player = videojs('myplayer', {
72 | controlBar: {
73 | progressControl: {
74 | keepTooltipsInside: true
75 | }
76 | }
77 | });
78 | Terms related to web video.
15 |The container of elements on the page that must be loaded before you can interact with the elements with through Javascript. 17 | http://en.wikipedia.org/wiki/Document_Object_Model
18 |The Flash video player (SWF) used to play a video when HTML5 isn't supported.
20 |HTML is the markup language that makes up every page on the web. The newest version, HTML5, includes specifications for a video tag, that is meant to allow website developers to add a video to a page the same way they would add an image. In order for this to work, web browser developers (Mozilla, Apple, Microsoft, Google, Opera, etc.) have to build the video playback functionality into their browsers. The W3C has created directions on how video should work in browsers, and it’s up to browser developers to follow those directions, so that video works the same across all browsers. This doesn’t always happen thanks to technology, legal, and financial choices made by browser developers, but so far no one’s varying too far from the specifications. However the specifications are still being changed and refined, so browsers developers have to keep up with that as well.
23 |Playing video in a web page may not seem so special since you can already view video on a web page through plugins like Flash Player, Quicktime, Silverlight, and RealPlayer, however this is a big step forward for standardizing video playback across web browsers and devices. The goal is that in the future, developers will only need to use one method for embedding a video, that’s based on open standards (not controlled by one company), and it will work everywhere.
24 |A prime example of this is the iPhone and iPad. Apple has decided not to support Flash on their mobile devices, but they do support HTML5 video. Since Flash is currently the most common way video is added to web pages, most web video (aside from YouTube who has a special relationship with Apple) can’t be viewed on the iPhone or iPad. These devices are very popular, so many web sites are switching to hybrid HTML5/Flash player setups (like VideoJS).
25 |There are a number of great resources that will give you an introduction to the video tag an how it is used including:
27 |An if you really want to dig in, you can read the (W3C Spec)[http://www.w3.org/TR/html5/video.html]. (Warning - not for the faint of heart)
32 |"Skin" refers to the design of the player's controls, also sometimes called the chrome. With VideoJS, new skins can be built simply by creating a new stylesheet.
34 |A network of servers around the world that host copies of a file. When your browser requests one of these files, the CDN automatically determines which server is closest to your location and delivers the file from there. This drastically increases delivery time, especially internationally.
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /docs/guides/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |The Video.js embed code is simply an HTML5 video tag, so for many of the options you can use the standard tag attributes to set the options.
16 |<video controls autoplay preload="auto" ...>
17 | Alternatively, you can use the data-setup attribute to provide options in the JSON format. This is also how you would set options that aren't standard to the video tag.
19 |<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
20 | Finally, if you're not using the data-setup attribute to trigger the player setup, you can pass in an object with the player options as the second argument in the javascript setup function.
22 |videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
23 | 26 |29 |Note on Video Tag Attributes
27 |With HTML5 video tag attributes that can only be true or false (boolean), you simply include the attribute (no equals sign) to turn it on, or exclude it to turn it off. For example, to turn controls on:
28 |
WRONG
30 |<video controls="true" ...>
31 | RIGHT
33 |<video controls ...>
34 | 36 |38 |The biggest issue people run into is trying to set these values to false using false as the value (e.g. controls="false") which actually does the opposite and sets the value to true because the attribute is still included. If you need the attribute to include an equals sign for XHTML validation, you can set the attribute's value to the same as its name (e.g. controls="controls").
37 |
The controls option sets whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the autoplay attribute or through the API.
40 |<video controls ...>
41 | or
42 | { "controls": true }
43 | If autoplay is true, the video will start playing as soon as page is loaded (without any interaction from the user). 46 | NOT SUPPORTED BY APPLE iOS DEVICES. Apple blocks the autoplay functionality in an effort to protect it's customers from unwillingly using a lot of their (often expensive) monthly data plans. A user touch/click is required to start the video in this case.
47 |<video autoplay ...>
48 | or
49 | { "autoplay": true }
50 | The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.
53 |'auto': Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users' bandwidth. This is why the value is called 'auto' and not something more final like 'true'.
54 |'metadata': Load only the meta data of the video, which includes information like the duration and dimensions of the video.
55 |'none': Don't preload any of the video data. This will wait until the user clicks play to begin downloading.
56 |<video preload ...>
57 | or
58 | { "preload": "auto" }
59 | The poster attribute sets the image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user clicks play the image will go away.
62 |<video poster="myPoster.jpg" ...>
63 | or
64 | { "poster": "myPoster.jpg" }
65 | The loop attribute causes the video to start over as soon as it ends. This could be used for a visual effect like clouds in the background.
68 |<video loop ...>
69 | or
70 | { "loop": true }
71 | The width attribute sets the display width of the video.
74 |<video width="640" ...>
75 | or
76 | { "width": 640 }
77 | The height attribute sets the display height of the video.
80 |<video height="480" ...>
81 | or
82 | { "height": 480 }
83 | You can set the options for any single player component. For instance, if you wanted to remove the muteToggle button, which
86 | is a child of controlBar, you can just set that component to false:
var player = videojs('video-id', {
88 | controlBar: {
89 | muteToggle: false
90 | }
91 | });
92 | This also works using the data-setup attribute on the video element, just remember the options need to use proper JSON
94 | notation.
<video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>
96 | The components guide has an excellent breakdown of the structure of a player, you
98 | just need to remember to nest child components in a children array for each level.
If you've built something cool with Video.js, you can easily share it with the rest of the world by creating a plugin. Although, you can roll your own, you can also use generator-videojs-plugin, a Yeoman generator that provides scaffolding for video.js plugins including:
15 | 20 |You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
22 | function examplePlugin(options) {
23 | this.on('play', function(e) {
24 | console.log('playback has started!');
25 | });
26 | };
27 | When it's activated, this will be the Video.js player your plugin is attached to. You can use anything you'd like in the Video.js API when you're writing a plugin: change the src, mess up the DOM, or listen for and emit your own events.
It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
31 | videojs.plugin('examplePlugin', examplePlugin);
32 | From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
34 |There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
36 | videojs('vidId', {
37 | plugins: {
38 | examplePlugin: {
39 | exampleOption: true
40 | }
41 | }
42 | });
43 | If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
45 | var video = videojs('cool-vid');
46 | video.examplePlugin({ exampleOption: true });
47 | That's it. Head on over to the Video.js wiki and add your plugin to the list so everyone else can check it out.
49 |If you'd like to use any of the icons available in the Video.js icon set, please target them via the CSS class names instead of codepoints. The codepoints may change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /docs/guides/removing-players.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Sometimes, you want to remove players after page load (in single page apps or modals, for instance). It's easy to manage, but there are some simple rules you need to follow.
15 |.dispose()To remove the html associated with your videojs player from the page always call the player's dispose() method:
var oldPlayer = document.getElementById('my-player');
18 | videojs(oldPlayer).dispose();
19 | This method will:
21 |For instance, if you have a modal that a player appears in, you should create the player when the modal pops up. When the modal hides, dispose the player. If you try to hide the Flash tech, things will go poorly. Even with other tech, calling dispose() on a player that's not needed will free up resources for the browser.
VideoJS internally tracks all players and their associated data by html id attribute. If you plan to create new players with the same id as previously created players, you'll need to call the player's dispose() method to clear VideoJS's internal state before creating the new player.
29 |TypeError: this.el_.vjs_getProperty is not a function
31 | "VIDEOJS:" "Video.js: buffered unavailable on Hls playback technology element." TypeError: this.el_.vjs_getProperty is not a function
32 | Stack trace:
33 | ...
34 | If you encounter a console error in the browser similar to the above, you've probably forgotten to dispose() a player before removing it from the dom. This would happen when using the contrib-hls plugin.
Video.js is pretty easy to set up. It can take a matter of seconds to get the player up and working on your web page.
15 |You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. As of Video.js 5.0, the source is transpiled from ES2015 (formerly known as ES6) to ES5, but IE8 only supports ES3. In order to continue to support IE8, we've bundled an ES5 shim and sham together and hosted it on the CDN.
17 |<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
18 | <link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
21 | <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
22 | Alternatively you can always go here to get the latest URL for videojs CDN.
24 |We include a stripped down Google Analytics pixel that tracks a random percentage (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global before including Video.js:
25 |window.HELP_IMPROVE_VIDEOJS = false;
26 | $ npm install --save video.js
30 | $ bower install --save video.js
32 | To entirely self-host, you'll need to pull in the font files and let Video.js know where the swf is located. If you simply copy the dist folder or zip file contents into your project everything
34 | should Just Work™, but the paths can easily be changed by editing the LESS file and re-building, or by modifying the generated CSS file. Additionally include the videojs-vtt.js source, which adds the WebVTT object to the global scope.
<link href="//example.com/path/to/video-js.min.css" rel="stylesheet">
36 | <script src="//example.com/path/to/videojs-vtt.js"></script>
37 | <script src="//example.com/path/to/video.min.js"></script>
38 | <script>
39 | videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"
40 | </script>
41 | With Video.js you just use an HTML5 video tag to embed a video. Video.js will then read the tag and make it work in all browsers, not just ones that support HTML5 video. Beyond the basic markup, Video.js needs a few extra pieces.
44 |45 |47 |Note: The
46 |data-setupattribute described here should not be used if you use the alternative setup described in the next section.
The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see options). There are other methods for initializing the player, but this is the easiest.
49 |The 'id' Attribute: Should be used and unique for every video on the same page.
51 |The 'class' attribute contains two classes:
53 |video-js applies styles that are required for Video.js functionality, like fullscreen and subtitles.vjs-default-skin applies the default skin to the HTML controls, and can be removed or overridden to create your own controls design.Otherwise include/exclude attributes, settings, sources, and tracks exactly as you would for HTML5 video.*
60 |<video id="example_video_1" class="video-js vjs-default-skin"
61 | controls preload="auto" width="640" height="264"
62 | poster="http://video-js.zencoder.com/oceans-clip.png"
63 | data-setup='{"example_option":true}'>
64 | <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
65 | <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
66 | <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
67 | <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
68 | </video>
69 | By default, the big play button is located in the upper left hand corner so it doesn't cover up the interesting parts of the poster. If you'd prefer to center the big play button, you can add an additional vjs-big-play-centered class to your video element. For example:
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
72 | controls preload="auto" width="640" height="264"
73 | poster="http://video-js.zencoder.com/oceans-clip.png"
74 | data-setup='{"example_option":true}'>
75 | ...
76 | </video>
77 | If your web page or application loads the video tag dynamically (ajax, appendChild, etc.), so that it may not exist when the page loads, you'll want to manually set up the player instead of relying on the data-setup attribute. To do this, first remove the data-setup attribute from the tag so there's no confusion around when the player is initialized. Next, run the following javascript some time after the Video.js javascript library has loaded, and after the video tag has been loaded into the DOM.
80 |videojs("example_video_1", {}, function(){
81 | // Player (this) is initialized and ready.
82 | });
83 | The first argument in the videojs function is the ID of your video tag. Replace it with your own.
The second argument is an options object. It allows you to set additional options like you can with the data-setup attribute.
86 |The third argument is a 'ready' callback. Once Video.js has initialized it will call this function.
87 |Instead of using an element ID, you can also pass a reference to the element itself.
88 |videojs(document.getElementById('example_video_1'), {}, function() {
89 | // This is functionally the same as the previous example.
90 | });
91 | videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
93 | // You can grab an element by class if you'd like, just make sure
94 | // if it's an array that you pick one (here we chose the first).
95 | });
96 | * If you have trouble playing back content you know is in the correct format, your HTTP server might not be delivering the content with the correct MIME type. Please double check your content's headers before opening an issue.
98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /docs/guides/skins.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |The base Video.js skin is made using HTML and CSS (although we use the Sass preprocessor), 16 | and by default these styles are added to the DOM for you! 17 | That means you can build a custom skin by simply taking advantage of the cascading aspect of CSS and overriding 18 | the styles you'd like to change.
19 |If you don't want Video.js to inject the base styles for you, you can disable it by setting window.VIDEOJS_NO_BASE_THEME = true before Video.js is loaded.
20 | Keep in mind that without these base styles enabled, you'll need to manually include them.
Video.js does not currently include the base skin automatically yet, so, this option isn't necessary.
22 |Video.js uses a couple of style elements dynamically, specifically, there's a default styles element as well as a player dimensions style element.
24 | They are used to provide extra default flexiblity with styling the player. However, in some cases, like if a user has the HEAD tag managed by React, users do not want this.
25 | When window.VIDEOJS_NO_DYNAMIC_STYLE is set to true, video.js will not include these element in the page.
26 | This means that default dimensions and configured player dimensions will not be applied.
27 | For example, the following player will end up having a width and height of 0 when initialized if window.VIDEOJS_NO_DYNAMIC_STYLE === true:
<video width="600" height="300"></video>
29 | Player#width and Player#heightWhen VIDEOJS_NO_DYNAMIC_STYLE is set, Player#width and Player#height will apply any width and height
32 | that is set directly to the video element (or whatever element the current tech uses).
You can view all of the icons available in the base theme by renaming and viewing
35 | icons.html.example in the sandbox directory.
When you create a new skin, the easiest way to get started is to simply override the base Video.js theme. 38 | You should include a new class matching the name of your theme, then just start overriding!
39 |.vjs-skin-hotdog-stand { color: #FF0000; }
40 | .vjs-skin-hotdog-stand .vjs-control-bar { background: #FFFF00; }
41 | .vjs-skin-hotdog-stand .vjs-play-progress { background: #FF0000; }
42 | This would take care of the major areas of the skin (play progress, the control bar background, and icon colors), 44 | but you can skin any other aspect. 45 | Our suggestion is to use a browser such as Firefox and Chrome, 46 | and use the developer tools to inspect the different elements and see what you'd like to change and what classes 47 | to target when you do so.
48 |More custom skins will be available for download soon. 49 | If you have one you like you can share it by forking this example on CodePen.io, 50 | and adding a link on the Skins wiki page.
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /docs/guides/tech.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Playback Technology refers to the specific browser or plugin technology used to play the video or audio. When using HTML5, the playback technology is the video or audio element. When using Flash, the playback technology is the specific Flash player used, e.g. Flowplayer, YouTube Player, video-js.swf, etc. (not just "Flash"). This could also include Silverlight, Quicktime, or any other plugin that will play back video in the browser, as long as there is an API wrapper written for it.
15 |Essentially we're using HTML5 and plugins only as video decoders, and using HTML and JavaScript to create a consistent API and skinning experience across all of them.
16 |We'll write a more complete guide on writing a wrapper soon, but for now the best resource is the Video.js source where you can see how both the HTML5 and video-js.swf API wrappers were created.
18 |canPlayType 20 | play 21 | pause 22 | currentTime 23 | volume 24 | duration 25 | buffered 26 | supportsFullScreen
27 |loadstart 29 | play 30 | pause 31 | playing 32 | ended 33 | volumechange 34 | durationchange 35 | error
36 |timeupdate 38 | progress 39 | enterFullScreen 40 | exitFullScreen
41 |When adding additional Tech to a video player, make sure to add the supported tech to the video object.
43 |<video data-setup='{"techOrder": ["html5", "flash", "other supported tech"]}'
45 | videojs("videoID", {
47 | techOrder: ["html5", "flash", "other supported tech"]
48 | });
49 | By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the techOrder option property before moving on to try the next playback technology.
Tech-first ordering can present a problem if you have a sourceHandler that supports both Html5 and Flash techs such as videojs-contrib-hls.
For example, given the following video element:
53 | 57 | 58 |There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case Html5, and select the first source that can play - in this case MP4.
In "Tech-first" mode, the tests run something like this: 60 | Can video.m3u8 play with Html5? No... 61 | Can video.mp4 play with Html5? Yes! Use the second source.
62 |Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in techOrder before moving onto the next source.
With a player setup as follows:
64 | 68 | 69 |The Flash-based HLS support will be tried before falling back to the MP4 source.
70 |In "Source-first" mode, the tests run something like this: 71 | Can video.m3u8 play with Html5? No... 72 | Can video.m3u8 play with Flash? Yes! Use the first source.
73 |The Flash playback tech is a part of the default techOrder. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.
In order to force the Flash tech to choose streaming playback, you need to provide a valid streaming source before other valid Flash video sources. This is necessary because of the source selection algorithm, where playback tech chooses the first possible source object with a valid type. Valid streaming type values include rtmp/mp4 and rtmp/flv. The streaming src value requires valid connection and stream strings, separated by an &. An example of supplying a streaming source through your HTML markup might look like:
<source src="rtmp://your.streaming.provider.net/cfx/st/&mp4:path/to/video.mp4" type="rtmp/mp4">
78 | <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
79 | <source src="http://your.static.provider.net/path/to/video.webm" type="video/webm">
80 | You may optionally use the last / as the separator between connection and stream strings, for example:
<source src="rtmp://your.streaming.provider.net/cfx/st/mp4:video.mp4" type="rtmp/mp4">
82 | All four RTMP protocols are valid in the src (RTMP, RTMPT, RTMPE, and RTMPS).
There are currently three types of tracks
15 |Video Tracks are a function of HTML5 video for providing a selection of alternative video tracks to the user, so that they can change type of video they want to watch. Video.js makes video tracks work across all browsers. There are currently six types of tracks:
15 |31 |33 |Right now adding video tracks in the HTML is unsupported. Video Tracks must be added programatically.
32 |
You must add video tracks programatically for the time being.
34 |Video Track propertites and settings
36 |One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
38 |The label for the track that will be show to the user, for example in a menu that list the different languages available for video tracks.
40 |The two-letter code (valid BCP 47 language tag) for the language of the video track, for example "en" for English. A list of language codes is available here.
42 |If this track should be playing or not. Trying to select more than one track will cause other tracks to be deselected.
44 |When a new track is enabled (other than the main track) an event is fired on the VideoTrackList called change you can listen to that event and do something with it.
47 | Here's an example:
// get the current players VideoTrackList object
49 | let tracks = player.videoTracks();
50 |
51 | // listen to the change event
52 | tracks.addEventListener('change', function() {
53 | // get the currently selected track
54 | let index = tracks.selectedIndex;
55 | let track = tracks[index];
56 |
57 | // print the currently selected track
58 | console.log(track.label);
59 | });
60 | player.videoTracks() -> VideoTrackListThis is the main interface into the video tracks of the player.
64 | It returns an VideoTrackList which is an array like object that contains all the VideoTrack on the player.
player.videoTracks().addTrack(VideoTrack)Add an existing VideoTrack to the players internal list of VideoTracks.
67 |player.videoTracks().removeTrack(VideoTrack)Remove a track from the VideoTrackList currently on the player. if no track exists this will do nothing.
69 |player.videoTracks().selectedIndexThe current index for the selected track
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /docs/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/videojs/docs/2aab67b2e50948c8e89513c68dd000d7b41dbc65/docs/images/logo.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |