</script><linkhref="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"rel="stylesheet"type="text/css"/><!-- there are many other style for highlighted code here: https://cdnjs.com/libraries/highlight.js --><linkrel="stylesheet"type="text/css"href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"/><linkrel="stylesheet"type="text/css"href="css/api-docs.css"/><linkrel="canonical"href="https://docs.videojs.com">
</head><body>
<pclass="legacydocsnote">This documentation is for an outdated version of Video.js. See <ahref="https://docs.videojs.com">documentation for the current release</a>.
<sectionid="index"class="side-nav"><h2class="sideNavHeader"><ahref="index.html">API Index</a></h2><divid="memberIndex"class="member-index"><h3>videojs Methods</h3><h4>Class Methods</h4><ulid="methodsList"><li><ahref="#MethodsaddClass">addClass</a></li><li><ahref="#MethodsaddLanguage">addLanguage</a></li><li><ahref="#MethodsappendContent">appendContent</a></li><li><ahref="#MethodscreateEl">createEl</a></li><li><ahref="#MethodscreateTimeRange">createTimeRange</a></li><li><ahref="#MethodsemptyEl">emptyEl</a></li><li><ahref="#Methodsextend">extend</a></li><li><ahref="#MethodsformatTime">formatTime</a></li><li><ahref="#MethodsgetAttributes">getAttributes</a></li><li><ahref="#MethodsgetComponent">getComponent</a></li><li><ahref="#MethodsgetPlayers">getPlayers</a></li><li><ahref="#MethodshasClass">hasClass</a></li><li><ahref="#MethodsinsertContent">insertContent</a></li><li><ahref="#MethodsisCrossOrigin">isCrossOrigin</a></li><li><ahref="#MethodsisEl">isEl</a></li><li><ahref="#MethodsisTextNode">isTextNode</a></li><li><ahref="#MethodsmergeOptions">mergeOptions</a></li><li><ahref="#Methodsoff">off</a></li><li><ahref="#Methodson">on</a></li><li><ahref="#Methodsone">one</a></li><li><ahref="#MethodsparseUrl">parseUrl</a></li><li><ahref="#Methodsplugin">plugin</a></li><li><ahref="#MethodsregisterComponent">registerComponent</a></li><li><ahref="#MethodsregisterTech">registerTech</a></li><li><ahref="#MethodsremoveClass">removeClass</a></li><li><ahref="#MethodssetAttributes">setAttributes</a></li><li><ahref="#MethodstoggleElClass">toggleElClass</a></li><li><ahref="#Methodstrigger">trigger</a></li><li><ahref="#Methodsvideojs">videojs</a></li></ul><h4>Inherited Methods from Component</h4><ul><li><ahref="#Methods$">$</a></li><li><ahref="#Methods$$">$$</a></li><li><ahref="#MethodsaddChild">addChild</a></li><li><ahref="#MethodsbuildCSSClass">buildCSSClass</a></li><li><ahref="#Methodschildren">children</a></li><li><ahref="#MethodsclearInterval">clearInterval</a></li><li><ahref="#MethodsclearTimeout">clearTimeout</a></li><li><ahref="#MethodscontentEl">contentEl</a></li><li><ahref="#Methodsdimensions">dimensions</a></li><li><ahref="#Methodsdispose">dispose</a></li><li><ahref="#Methodsel">el</a></li><li><ahref="#MethodsenableTouchActivity">enableTouchActivity</a></li><li><ahref="#MethodsgetChild">getChild</a></li><li><ahref="#MethodsgetChildById">getChildById</a></li><li><ahref="#Methodsheight">height</a></li><li><ahref="#Methodshide">hide</a></li><li><ahref="#Methodsid">id</a></li><li><ahref="#MethodsinitChildren">initChildren</a></li><li><ahref="#Methodsname">name</a></li><li><ahref="#Methodsoptions">options</a></li><li><ahref="#Methodsplayer">player</a></li><li><ahref="#Methodsready">ready</a></li><li><ahref="#MethodsremoveChild">removeChild</a></li><li><ahref="#MethodssetInterval">setInterval</a></li><li><ahref="#MethodssetTimeout">setTimeout</a></li><li><ahref="#Methodsshow">show</a></li><li><ahref="#MethodstoggleClass">toggleClass</a></li><li><ahref="#MethodstriggerReady">triggerReady</a></li><li><ahref="#Methodswidth">width</a></li></ul></div></section><divid="main"class="section"><sectionid="top"class="section"><h1>videojs</h1><divstyle="border:none"id="classDescription"class="description"><p>Doubles as the main function for users to create a player instance and also
The <code>videojs</code> function can be used to initialize or retrieve a player.</p>
<preclass="prettyprint source lang-js"><code> var myPlayer = videojs('my_video_id');</code></pre></div><p>DEFINED IN: <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L40">video.js line number: 40</a></p><p>EXTENDS: <ahref="component.html">component.js</a></p></section><sectionid="methods"class="section"><h2>Methods</h2><divid="MethodsaddClass"><h3id="addClassHeader">addClass( element, classToAdd )</h3><divid="addClassDescription"class="description"><p>Add a CSS class name to an element</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>element</td><td>Element</td><td>yes</td><td>Element to add class name to</td></tr><tr><td>classToAdd</td><td>String</td><td>yes</td><td>Classname to add</td></tr></tbody></table><pclass="vjs-only"><emid="addClassFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L586">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 586</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsaddLanguage"><h3id="addLanguageHeader">addLanguage( code, data )</h3><divid="addLanguageDescription"class="description"><p>Adding languages so that they're available to all players.</p>
<preclass="prettyprint source lang-js"><code> videojs.addLanguage('es', { 'Hello': 'Hola' });</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>code</td><td>String</td><td>yes</td><td>The language code or dictionary property</td></tr><tr><td>data</td><td>Object</td><td>yes</td><td>The data values to be translated</td></tr></tbody></table><pclass="vjs-only"><emid="addLanguageFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L403">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 403</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsappendContent"><h3id="appendContentHeader">appendContent( el, content )</h3><divid="appendContentDescription"class="description"><p>Normalizes and appends content to an element.</p>
<p>The content for an element can be passed in multiple types and
combinations, whose behavior is as follows:</p>
<ul>
<li><p>String
Normalized into a text node.</p>
</li>
<li><p>Element, TextNode
Passed through.</p>
</li>
<li><p>Array
A one-dimensional array of strings, elements, nodes, or functions (which
return single strings, elements, or nodes).</p>
</li>
<li><p>Function
If the sole argument, is expected to produce a string, element,
node, or array.</p>
</li>
</ul></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>el</td><td>Element</td></tr><tr><td>content</td><td>String|Element|TextNode|Array|function</td></tr></tbody></table><pclass="vjs-only"><emid="appendContentFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L648">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 648</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodscreateEl"><h3id="createElHeader">createEl( [tagName], [properties], [attributes] )</h3><divid="createElDescription"class="description"><p>Creates an element and applies properties.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>tagName</td><td>String</td><td>no</td><td>Name of tag to be created.</td></tr><tr><td>properties</td><td>Object</td><td>no</td><td>Element properties to be applied.</td></tr><tr><td>attributes</td><td>Object</td><td>no</td><td>Element attributes to be applied.</td></tr></tbody></table><pclass="vjs-only"><emid="createElFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L566">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 566</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodscreateTimeRange"><h3id="createTimeRangeHeader">createTimeRange( start, end )</h3><divid="createTimeRangeDescription"class="description"><p>Creates an emulated TimeRange object.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>start</td><td>Number|Array</td><td>yes</td><td>Start time in seconds or an array of ranges</td></tr><tr><td>end</td><td>Number</td><td>yes</td><td>End time in seconds</td></tr></tbody></table><pclass="vjs-only"><emid="createTimeRangeFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L427">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 427</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsemptyEl"><h3id="emptyElHeader">emptyEl( el )</h3><divid="emptyElDescription"class="description"><p>Empties the contents of an element.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>el</td><td>Element</td></tr></tbody></table><pclass="vjs-only"><emid="emptyElFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L639">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 639</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsextend"><h3id="extendHeader">extend( The, An )</h3><divid="extendDescription"class="description"><p>Subclass an existing class
Mimics ES6 subclassing with the <code>extend</code> keyword</p>
<preclass="prettyprint source lang-js"><code> // Create a basic javascript 'class'
function MyClass(name){
// Set a property at initialization
this.myName = name;
}
// Create an instance method
MyClass.prototype.sayMyName = function(){
alert(this.myName);
};
// Subclass the exisitng class and change the name
// when initializing
var MySubClass = videojs.extend(MyClass, {
constructor: function(name) {
// Call the super class constructor for the subclass
MyClass.call(this, name)
}
});
// Create an instance of the new sub class
var myInstance = new MySubClass('John');
myInstance.sayMyName(); // -> should alert "John"</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>The</td><td>function</td><td>yes</td><td>Class to subclass</td></tr><tr><td>An</td><td>Object</td><td>yes</td><td>object including instace methods for the new class
Optionally including a <code>constructor</code> function</td></tr></tbody></table><pclass="vjs-only"><emid="extendFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L269">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 269</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsformatTime"><h3id="formatTimeHeader">formatTime( seconds, guide )</h3><divid="formatTimeDescription"class="description"><p>Format seconds as a time string, H:MM:SS or M:SS
Supplying a guide (in seconds) will force a number of leading zeros
to cover the length of the guide</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>seconds</td><td>Number</td><td>yes</td><td>Number of seconds to be turned into a string</td></tr><tr><td>guide</td><td>Number</td><td>yes</td><td>Number (in seconds) to model the string after</td></tr></tbody></table><pclass="vjs-only"><emid="formatTimeFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L437">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 437</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsgetAttributes"><h3id="getAttributesHeader">getAttributes( tag )</h3><divid="getAttributesDescription"class="description"><p>Get an element's attribute values, as defined on the HTML tag
Attributes are not the same as properties. They're defined on the tag
or with setAttribute (which shouldn't be used with HTML)
This will return true or false for boolean attributes.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>tag</td><td>Element</td><td>yes</td><td>Element from which to get tag attributes</td></tr></tbody></table><pclass="vjs-only"><emid="getAttributesFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L627">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 627</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsgetComponent"><h3id="getComponentHeader">getComponent()</h3><divid="getComponentDescription"class="description"><p>Get a component class object by name</p>
<preclass="prettyprint source lang-js"><code> var VjsButton = videojs.getComponent('Button');
// Create a new instance of the component
var myButton = new VjsButton(myPlayer);</code></pre></div><pclass="vjs-only"><emid="getComponentFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L166">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 166</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsgetPlayers"><h3id="getPlayersHeader">getPlayers()</h3><divid="getPlayersDescription"class="description"><p>Get an object with the currently created players, keyed by player ID</p></div><pclass="vjs-only"><emid="getPlayersFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L143">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 143</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodshasClass"><h3id="hasClassHeader">hasClass( element, classToCheck )</h3><divid="hasClassDescription"class="description"><p>Check if an element has a CSS class</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>element</td><td>Element</td><td>yes</td><td>Element to check</td></tr><tr><td>classToCheck</td><td>String</td><td>yes</td><td>Classname to check</td></tr></tbody></table><pclass="vjs-only"><emid="hasClassFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L577">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 577</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsinsertContent"><h3id="insertContentHeader">insertContent( el, content )</h3><divid="insertContentDescription"class="description"><p>Normalizes and inserts content into an element; this is identical to
<code>appendContent()</code>, except it empties the element first.</p>
<p>The content for an element can be passed in multiple types and
combinations, whose behavior is as follows:</p>
<ul>
<li><p>String
Normalized into a text node.</p>
</li>
<li><p>Element, TextNode
Passed through.</p>
</li>
<li><p>Array
A one-dimensional array of strings, elements, nodes, or functions (which
return single strings, elements, or nodes).</p>
</li>
<li><p>Function
If the sole argument, is expected to produce a string, element,
node, or array.</p>
</li>
</ul></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>el</td><td>Element</td></tr><tr><td>content</td><td>String|Element|TextNode|Array|function</td></tr></tbody></table><pclass="vjs-only"><emid="insertContentFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L675">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 675</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsisCrossOrigin"><h3id="isCrossOriginHeader">isCrossOrigin( url )</h3><divid="isCrossOriginDescription"class="description"><p>Returns whether the url passed is a cross domain request or not.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>String</td><td>yes</td><td>The url to check</td></tr></tbody></table><pclass="vjs-only"><emid="isCrossOriginFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L458">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 458</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsisEl"><h3id="isElHeader">isEl( value )</h3><divid="isElDescription"class="description"><p>Determines, via duck typing, whether or not a value is a DOM element.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>Mixed</td></tr></tbody></table><pclass="vjs-only"><emid="isElFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L548">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 548</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsisTextNode"><h3id="isTextNodeHeader">isTextNode( value )</h3><divid="isTextNodeDescription"class="description"><p>Determines, via duck typing, whether or not a value is a text node.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>Mixed</td></tr></tbody></table><pclass="vjs-only"><emid="isTextNodeFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L557">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 557</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsmergeOptions"><h3id="mergeOptionsHeader">mergeOptions( defaults, overrides, etc )</h3><divid="mergeOptionsDescription"class="description"><p>Merge two options objects recursively
Performs a deep merge like lodash.merge but <strong>only merges plain objects</strong>
(not arrays, elements, anything else)
Other values will be copied directly from the second object.</p>
<preclass="prettyprint source lang-js"><code> var defaultOptions = {
foo: true,
bar: {
a: true,
b: [1,2,3]
}
};
var newOptions = {
foo: false,
bar: {
b: [4,5,6]
}
};
var result = videojs.mergeOptions(defaultOptions, newOptions);
// result.foo = false;
// result.bar.a = true;
// result.bar.b = [4,5,6];</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>defaults</td><td>Object</td><td>yes</td><td>The options object whose values will be overriden</td></tr><tr><td>overrides</td><td>Object</td><td>yes</td><td>The options object with values to override the first</td></tr><tr><td>etc</td><td>Object</td><td>yes</td><td>Any number of additional options objects</td></tr></tbody></table><pclass="vjs-only"><emid="mergeOptionsFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L304">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 304</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsoff"><h3id="offHeader">off( elem, type, fn )</h3><divid="offDescription"class="description"><p>Removes event listeners from an element</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>elem</td><td>Element|Object</td><td>yes</td><td>Object to remove listeners from</td></tr><tr><td>type</td><td>String|Array</td><td>yes</td><td>Type of listener to remove. Don't include to remove all events from element.</td></tr><tr><td>fn</td><td>function</td><td>yes</td><td>Specific listener to remove. Don't include to remove listeners for an event type.</td></tr></tbody></table><pclass="vjs-only"><emid="offFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L497">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 497</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodson"><h3id="onHeader">on( elem, type, fn )</h3><divid="onDescription"class="description"><p>Add an event listener to element
It stores the handler function in a separate cache object
and adds a generic handler to the element's event,
along with a unique id (guid) to the element.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>elem</td><td>Element|Object</td><td>yes</td><td>Element or object to bind listeners to</td></tr><tr><td>type</td><td>String|Array</td><td>yes</td><td>Type of event to bind to.</td></tr><tr><td>fn</td><td>function</td><td>yes</td><td>Event listener.</td></tr></tbody></table><pclass="vjs-only"><emid="onFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L474">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 474</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsone"><h3id="oneHeader">one( elem, type, fn )</h3><divid="oneDescription"class="description"><p>Trigger a listener only once for an event</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>elem</td><td>Element|Object</td><td>yes</td><td>Element or object to</td></tr><tr><td>type</td><td>String|Array</td><td>yes</td><td>Name/type of event</td></tr><tr><td>fn</td><td>function</td><td>yes</td><td>Event handler function</td></tr></tbody></table><pclass="vjs-only"><emid="oneFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L487">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 487</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsparseUrl"><h3id="parseUrlHeader">parseUrl( url )</h3><divid="parseUrlDescription"class="description"><p>Resolve and parse the elements of a URL</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>String</td><td>yes</td><td>The url to parse</td></tr></tbody></table><pclass="vjs-only"><emid="parseUrlFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L449">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 449</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsplugin"><h3id="pluginHeader">plugin( name, fn )</h3><divid="pluginDescription"class="description"><p>Create a Video.js player plugin
Plugins are only initialized when options for the plugin are included
in the player options, or the plugin function on the player instance is
called.
<strong>See the plugin guide in the docs for a more detailed example</strong></p>
<preclass="prettyprint source lang-js"><code> // Make a plugin that alerts when the player plays
var alertText = myPluginOptions.text || 'Player is playing!'
player.on('play', function(){
alert(alertText);
});
});
// USAGE EXAMPLES
// EXAMPLE 1: New player with plugin options, call plugin immediately
var player1 = videojs('idOne', {
myPlugin: {
text: 'Custom text!'
}
});
// Click play
// --> Should alert 'Custom text!'
// EXAMPLE 3: New player, initialize plugin later
var player3 = videojs('idThree');
// Click play
// --> NO ALERT
// Click pause
// Initialize plugin using the plugin function on the player instance
player3.myPlugin({
text: 'Plugin added later!'
});
// Click play
// --> Should alert 'Plugin added later!'</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td>String</td><td>yes</td><td>The plugin name</td></tr><tr><td>fn</td><td>function</td><td>yes</td><td>The plugin function that will be called with options</td></tr></tbody></table><pclass="vjs-only"><emid="pluginFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L356">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 356</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsregisterComponent"><h3id="registerComponentHeader">registerComponent( The, The )</h3><divid="registerComponentDescription"class="description"><p>Register a component so it can referred to by name
Used when adding to other
components, either through addChild
<code>component.addChild('myComponent')</code>
or through default children options
<code>{ children: ['myComponent'] }</code>.</p>
<preclass="prettyprint source lang-js"><code> // Get a component to subclass
var VjsButton = videojs.getComponent('Button');
// Subclass the component (see 'extend' doc for more info)
var MySpecialButton = videojs.extend(VjsButton, {});
// (optionally) add the new component as a default player child
myPlayer.addChild('MySepcialButton');</code></pre><p>NOTE: You could also just initialize the component before adding.
<code>component.addChild(new MyComponent());</code></p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>The</td><td>String</td><td>yes</td><td>class name of the component</td></tr><tr><td>The</td><td>Component</td><td>yes</td><td>component class</td></tr></tbody></table><pclass="vjs-only"><emid="registerComponentFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L180">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 180</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsregisterTech"><h3id="registerTechHeader">registerTech( The, The )</h3><divid="registerTechDescription"class="description"><p>Register a Tech so it can referred to by name.
This is used in the tech order for the player.</p>
<preclass="prettyprint source lang-js"><code> // get the Html5 Tech
var Html5 = videojs.getTech('Html5');
var MyTech = videojs.extend(Html5, {});
// Register the new Tech
VjsButton.registerTech('Tech', MyTech);
var player = videojs('myplayer', {
techOrder: ['myTech', 'html5']
});</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>The</td><td>String</td><td>yes</td><td>class name of the tech</td></tr><tr><td>The</td><td>Tech</td><td>yes</td><td>tech class</td></tr></tbody></table><pclass="vjs-only"><emid="registerTechFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L228">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 228</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsremoveClass"><h3id="removeClassHeader">removeClass( element, classToRemove )</h3><divid="removeClassDescription"class="description"><p>Remove a CSS class name from an element</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>element</td><td>Element</td><td>yes</td><td>Element to remove from class name</td></tr><tr><td>classToRemove</td><td>String</td><td>yes</td><td>Classname to remove</td></tr></tbody></table><pclass="vjs-only"><emid="removeClassFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L595">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 595</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodssetAttributes"><h3id="setAttributesHeader">setAttributes( el, [attributes] )</h3><divid="setAttributesDescription"class="description"><p>Apply attributes to an HTML element.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>el</td><td>Element</td><td>yes</td><td>Target element.</td></tr><tr><td>attributes</td><td>Object</td><td>no</td><td>Element attributes to be applied.</td></tr></tbody></table><pclass="vjs-only"><emid="setAttributesFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L618">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 618</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodstoggleElClass"><h3id="toggleElClassHeader">toggleElClass( element, classToToggle, [predicate] )</h3><divid="toggleElClassDescription"class="description"><p>Adds or removes a CSS class name on an element depending on an optional
condition or the presence/absence of the class name.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>element</td><td>Element</td></tr><tr><td>classToToggle</td><td>String</td></tr><tr><td>predicate</td><td>Boolean|function</td><td>no</td><td>Can be a function that returns a Boolean. If <code>true</code>, the class
will be added; if <code>false</code>, the class will be removed. If not
given, the class will be added if not present and vice versa.</td></tr></tbody></table><pclass="vjs-only"><emid="toggleElClassFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L604">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 604</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodstrigger"><h3id="triggerHeader">trigger( elem, event, [hash] )</h3><divid="triggerDescription"class="description"><p>Trigger an event for an element</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>elem</td><td>Element|Object</td><td>yes</td><td>Element to trigger an event on</td></tr><tr><td>event</td><td>Event|Object|String</td><td>yes</td><td>A string (the type) or an event object with a type attribute</td></tr><tr><td>hash</td><td>Object</td><td>no</td><td>data hash to pass along with the event</td></tr></tbody></table><pclass="vjs-only"><emid="triggerFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L507">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 507</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsvideojs"><h3id="videojsHeader">videojs( id, [options], [ready] )</h3><divid="videojsDescription"class="description"><p>Doubles as the main function for users to create a player instance and also
the main library object.
The <code>videojs</code> function can be used to initialize or retrieve a player.</p>
<preclass="prettyprint source lang-js"><code> var myPlayer = videojs('my_video_id');</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>id</td><td>String|Element</td><td>yes</td><td>Video element or video element ID</td></tr><tr><td>options</td><td>Object</td><td>no</td><td>Optional options object for config/settings</td></tr><tr><td>ready</td><td>function</td><td>no</td><td>Optional ready callback</td></tr></tbody></table><pclass="vjs-only"><emid="videojsFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/video.js#L40">https://github.com/videojs/video.js/blob/master/src/js/video.js line number: 40</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methods$"><h3id="$Header">$( selector, [context] )</h3><divid="$Description"class="description"><p>Finds a single DOM element matching <code>selector</code> within the component's
<code>contentEl</code> or another custom context.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>selector</td><td>String</td><td>yes</td><td>A valid CSS selector, which will be passed to <code>querySelector</code>.</td></tr><tr><td>context</td><td>Element|String</td><td>no</td><td>A DOM element within which to query. Can also be a selector
string in which case the first matching element will be used
as context. If missing (or no element matches selector), falls
back to <code>document</code>.</td></tr></tbody></table><pclass="vjs-only"><emid="$Footer">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L841">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methods$$"><h3id="$$Header">$$( selector, [context] )</h3><divid="$$Description"class="description"><p>Finds a all DOM elements matching <code>selector</code> within the component's
<code>contentEl</code> or another custom context.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>selector</td><td>String</td><td>yes</td><td>A valid CSS selector, which will be passed to <code>querySelectorAll</code>.</td></tr><tr><td>context</td><td>Element|String</td><td>no</td><td>A DOM element within which to query. Can also be a selector
string in which case the first matching element will be used
as context. If missing (or no element matches selector), falls
back to <code>document</code>.</td></tr></tbody></table><pclass="vjs-only"><emid="$$Footer">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L861">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsaddChild"><h3id="addChildHeader">addChild( child, [options] )</h3><divid="addChildDescription"class="description"><p>Adds a child component inside this component</p>
// -> myButton === myComponent.children()[0];</code></pre><p>Pass in options for child constructors and options for children of the child</p>
<preclass="prettyprint source lang-js"><code> var myButton = myComponent.addChild('MyButton', {
text: 'Press Me',
buttonChildExample: {
buttonChildOption: true
}
});</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>child</td><td>String|Component</td><td>yes</td><td>The class name or instance of a child to add</td></tr><tr><td>options</td><td>Object</td><td>no</td><td>Options, including options to be passed to children of the child.</td></tr></tbody></table><pclass="vjs-only"><emid="addChildFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L315">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 315</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsbuildCSSClass"><h3id="buildCSSClassHeader">buildCSSClass()</h3><divid="buildCSSClassDescription"class="description"><p>Allows sub components to stack CSS class names</p></div><pclass="vjs-only"><emid="buildCSSClassFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L593">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 593</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodschildren"><h3id="childrenHeader">children()</h3><divid="childrenDescription"class="description"><p>Get an array of all child components</p>
<preclass="prettyprint source lang-js"><code> var kids = myComponent.children();</code></pre></div><pclass="vjs-only"><emid="childrenFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L282">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 282</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsclearInterval"><h3id="clearIntervalHeader">clearInterval( intervalId )</h3><divid="clearIntervalDescription"class="description"><p>Clears an interval and removes the associated dispose listener</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>intervalId</td><td>Number</td><td>yes</td><td>The id of the interval to clear</td></tr></tbody></table><pclass="vjs-only"><emid="clearIntervalFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1295">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1295</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsclearTimeout"><h3id="clearTimeoutHeader">clearTimeout( timeoutId )</h3><divid="clearTimeoutDescription"class="description"><p>Clears a timeout and removes the associated dispose listener</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>timeoutId</td><td>Number</td><td>yes</td><td>The id of the timeout to clear</td></tr></tbody></table><pclass="vjs-only"><emid="clearTimeoutFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1252">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1252</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodscontentEl"><h3id="contentElHeader">contentEl()</h3><divid="contentElDescription"class="description"><p>Return the component's DOM element where children are inserted.
Will either be the same as el() or a new element defined in createEl().</p></div><pclass="vjs-only"><emid="contentElFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L245">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 245</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsdimensions"><h3id="dimensionsHeader">dimensions( width, height )</h3><divid="dimensionsDescription"class="description"><p>Set both width and height at the same time</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>width</td><td>Number|String</td><td>yes</td><td>Width of player</td></tr><tr><td>height</td><td>Number|String</td><td>yes</td><td>Height of player</td></tr></tbody></table><pclass="vjs-only"><emid="dimensionsFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1015">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1015</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsdispose"><h3id="disposeHeader">dispose()</h3><divid="disposeDescription"class="description"><p>Dispose of the component and all child components</p></div><pclass="vjs-only"><emid="disposeFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L101">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 101</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsel"><h3id="elHeader">el()</h3><divid="elDescription"class="description"><p>Get the component's DOM element</p>
<preclass="prettyprint source lang-js"><code> var domEl = myComponent.el();</code></pre></div><pclass="vjs-only"><emid="elFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L195">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 195</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsenableTouchActivity"><h3id="enableTouchActivityHeader">enableTouchActivity()</h3><divid="enableTouchActivityDescription"class="description"><p>Report user touch activity when touch events occur
User activity is used to determine when controls should show/hide. It's
relatively simple when it comes to mouse events, because any mouse event
should show the controls. So we capture mouse events that bubble up to the
player and report activity when that happens.
With touch events it isn't as easy. We can't rely on touch events at the
player level, because a tap (touchstart + touchend) on the video itself on
mobile devices is meant to turn controls off (and on). User activity is
checked asynchronously, so what could happen is a tap event on the video
turns the controls off, then the touchend event bubbles up to the player,
which if it reported user activity, would turn the controls right back on.
(We also don't want to completely block touch events from bubbling up)
Also a touchmove, touch+hold, and anything other than a tap is not supposed
to turn the controls back on on a mobile device.
Here we're setting the default component behavior to report user activity
whenever touch events happen, and this can be turned off by components that
want touch events to act differently.</p></div><pclass="vjs-only"><emid="enableTouchActivityFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1174">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1174</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsgetChild"><h3id="getChildHeader">getChild()</h3><divid="getChildDescription"class="description"><p>Returns a child component with the provided name</p></div><pclass="vjs-only"><emid="getChildFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L305">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 305</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsgetChildById"><h3id="getChildByIdHeader">getChildById()</h3><divid="getChildByIdDescription"class="description"><p>Returns a child component with the provided ID</p></div><pclass="vjs-only"><emid="getChildByIdFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L295">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 295</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsheight"><h3id="heightHeader">height( num, [skipListeners] )</h3><divid="heightDescription"class="description"><p>Get or set the height of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>num</td><td>Number|String</td><td>yes</td><td>New component height</td></tr><tr><td>skipListeners</td><td>Boolean</td><td>no</td><td>Skip the resize event trigger</td></tr></tbody></table><pclass="vjs-only"><emid="heightFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L998">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 998</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodshide"><h3id="hideHeader">hide()</h3><divid="hideDescription"class="description"><p>Hide the component element if currently showing</p></div><pclass="vjs-only"><emid="hideFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L944">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 944</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsid"><h3id="idHeader">id()</h3><divid="idDescription"class="description"><p>Get the component's ID</p>
<preclass="prettyprint source lang-js"><code> var id = myComponent.id();</code></pre></div><pclass="vjs-only"><emid="idFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L256">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 256</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsinitChildren"><h3id="initChildrenHeader">initChildren()</h3><divid="initChildrenDescription"class="description"><p>Add and initialize default child components from options</p>
<preclass="prettyprint source lang-js"><code> // when an instance of MyComponent is created, all children in options
// will be added to the instance by their name strings and options
MyComponent.prototype.options_ = {
children: [
'myChildComponent'
],
myChildComponent: {
myChildOption: true
}
};
// Or when creating the component
var myComp = new MyComponent(player, {
children: [
'myChildComponent'
],
myChildComponent: {
myChildOption: true
}
});</code></pre><p>The children option can also be an array of
child options objects (that also include a 'name' key).
This can be used if you have two child components of the
same type that need different options.</p>
<preclass="prettyprint source lang-js"><code> var myComp = new MyComponent(player, {
children: [
'button',
{
name: 'button',
someOtherOption: true
},
{
name: 'button',
someOtherOption: false
}
]
});</code></pre></div><pclass="vjs-only"><emid="initChildrenFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L455">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 455</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsname"><h3id="nameHeader">name()</h3><divid="nameDescription"class="description"><p>Get the component's name. The name is often used to reference the component.</p>
<preclass="prettyprint source lang-js"><code> var name = myComponent.name();</code></pre></div><pclass="vjs-only"><emid="nameFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L269">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 269</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsoptions"><h3id="optionsHeader">options( obj )</h3><divid="optionsDescription"class="description"><p>Deep merge of options objects
Whenever a property is an object on both options objects
the two properties will be merged using mergeOptions.</p>
'childTwo': null, // Disabled. Won't be initialized.
'childThree': {},
'childFour': {}
}
}</code></pre></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>obj</td><td>Object</td><td>yes</td><td>Object of new option values</td></tr></tbody></table><pclass="vjs-only"><emid="optionsFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L145">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsplayer"><h3id="playerHeader">player()</h3><divid="playerDescription"class="description"><p>Return the component's player</p></div><pclass="vjs-only"><emid="playerFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L135">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 135</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsready"><h3id="readyHeader">ready( fn, sync )</h3><divid="readyDescription"class="description"><p>Bind a listener to the component's ready state.
Different from event listeners in that if the ready event has already happened
it will trigger the function immediately.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>fn</td><td>function</td><td>yes</td><td>Ready listener</td></tr><tr><td>sync</td><td>Boolean</td><td>yes</td><td>Exec the listener synchronously if component is ready</td></tr></tbody></table><pclass="vjs-only"><emid="readyFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L787">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 787</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodsremoveChild"><h3id="removeChildHeader">removeChild( component )</h3><divid="removeChildDescription"class="description"><p>Remove a child component from this component's list of children, and the
child component's element from this component's element</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>component</td><td>Component</td><td>yes</td><td>Component to remove</td></tr></tbody></table><pclass="vjs-only"><emid="removeChildFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L415">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 415</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodssetInterval"><h3id="setIntervalHeader">setInterval( fn, interval )</h3><divid="setIntervalDescription"class="description"><p>Creates an interval and sets up disposal automatically.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>fn</td><td>function</td><td>yes</td><td>The function to run every N seconds.</td></tr><tr><td>interval</td><td>Number</td><td>yes</td><td>Number of ms to delay before executing specified function.</td></tr></tbody></table><pclass="vjs-only"><emid="setIntervalFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1271">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1271</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodssetTimeout"><h3id="setTimeoutHeader">setTimeout( fn, timeout )</h3><divid="setTimeoutDescription"class="description"><p>Creates timeout and sets up disposal automatically.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>fn</td><td>function</td><td>yes</td><td>The function to run after the timeout.</td></tr><tr><td>timeout</td><td>Number</td><td>yes</td><td>Number of ms to delay before executing specified function.</td></tr></tbody></table><pclass="vjs-only"><emid="setTimeoutFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1227">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1227</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsshow"><h3id="showHeader">show()</h3><divid="showDescription"class="description"><p>Show the component element if hidden</p></div><pclass="vjs-only"><emid="showFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L933">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 933</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodstoggleClass"><h3id="toggleClassHeader">toggleClass( classToToggle, [predicate] )</h3><divid="toggleClassDescription"class="description"><p>Add or remove a CSS class name from the component's element</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>classToToggle</td><td>String</td></tr><tr><td>predicate</td><td>Boolean|function</td><td>no</td><td>Can be a function that returns a Boolean. If <code>true</code>, the class
will be added; if <code>false</code>, the class will be removed. If not
given, the class will be added if not present and vice versa.</td></tr></tbody></table><pclass="vjs-only"><emid="toggleClassFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L916">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 916</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodstriggerReady"><h3id="triggerReadyHeader">triggerReady()</h3><divid="triggerReadyDescription"class="description"><p>Trigger the ready listeners</p></div><pclass="vjs-only"><emid="triggerReadyFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L814">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodswidth"><h3id="widthHeader">width( num, skipListeners )</h3><divid="widthDescription"class="description"><p>Set or get the width of the component (CSS values)
Setting the video tag dimension values only works with values in pixels.
Percent values will not work.
Some percents can be used, but width()/height() will return the number + %,
not the actual computed width/height.</p></div><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>num</td><td>Number|String</td><td>yes</td><td>Optional width number</td></tr><tr><td>skipListeners</td><td>Boolean</td><td>yes</td><td>Skip the 'resize' event trigger</td></tr></tbody></table><pclass="vjs-only"><emid="widthFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L981">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 981</a></em></p><p><ahref="#top">[back to top]</a></p></div></section></div><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js">
