</script><linkhref="https://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/CaptionSettingsMenuItem.html">
<pclass="legacydocsnote">This documentation is for an outdated version of Video.js. See <ahref="https://docs.videojs.com/CaptionSettingsMenuItem.html">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>CaptionSettingsMenuItem Methods</h3><h4>Class Methods</h4><ulid="methodsList"><li><ahref="#MethodshandleClick">handleClick</a></li></ul><h4>Inherited Methods from TextTrackMenuItem</h4><ul><li><ahref="#MethodshandleTracksChange">handleTracksChange</a></li></ul><h4>Inherited Methods from MenuItem</h4><ul><li><ahref="#MethodscreateEl">createEl</a></li><li><ahref="#Methodsselected">selected</a></li></ul><h4>Inherited Methods from Button</h4><ul><li><ahref="#MethodsaddChild">addChild</a></li><li><ahref="#MethodshandleKeyPress">handleKeyPress</a></li></ul><h4>Inherited Methods from ClickableComponent</h4><ul><li><ahref="#MethodsbuildCSSClass">buildCSSClass</a></li><li><ahref="#MethodscontrolText">controlText</a></li><li><ahref="#MethodshandleBlur">handleBlur</a></li><li><ahref="#MethodshandleFocus">handleFocus</a></li></ul><h4>Inherited Methods from Component</h4><ul><li><ahref="#Methods$">$</a></li><li><ahref="#Methods$$">$$</a></li><li><ahref="#MethodsaddClass">addClass</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="#Methodsextend">extend</a></li><li><ahref="#MethodsgetChild">getChild</a></li><li><ahref="#MethodsgetChildById">getChildById</a></li><li><ahref="#MethodsgetComponent">getComponent</a></li><li><ahref="#MethodshasClass">hasClass</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="#Methodsoff">off</a></li><li><ahref="#Methodson">on</a></li><li><ahref="#Methodsone">one</a></li><li><ahref="#Methodsoptions">options</a></li><li><ahref="#Methodsplayer">player</a></li><li><ahref="#Methodsready">ready</a></li><li><ahref="#MethodsregisterComponent">registerComponent</a></li><li><ahref="#MethodsremoveChild">removeChild</a></li><li><ahref="#MethodsremoveClass">removeClass</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="#Methodstrigger">trigger</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>CaptionSettingsMenuItem</h1><divstyle="border:none"id="classDescription"class="description"><p>The menu item for caption track settings menu</p></div><p>DEFINED IN: <ahref="https://github.com/videojs/video.js/blob/master/src/js/control-bar/text-track-controls/caption-settings-menu-item.js#L7">caption-settings-menu-item.js line number: 7</a></p><p>EXTENDS: <ahref="text-track-menu-item.html">text-track-menu-item.js</a></p><h3>Constructor</h3><pre><code>CaptionSettingsMenuItem( player,[options] )</code></pre><h4>Parameters</h4><table><thead><tr><th>name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>player</td><td>Player|Object</td></tr><tr><td>options</td><td>Object</td></tr></tbody></table></section><sectionid="methods"class="section"><h2>Methods</h2><divid="MethodshandleClick"><h3id="handleClickHeader">handleClick()</h3><divid="handleClickDescription"class="description"><p>Handle click on menu item</p></div><pclass="vjs-only"><emid="handleClickFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/control-bar/text-track-controls/caption-settings-menu-item.js#L35">https://github.com/videojs/video.js/blob/master/sr
<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="MethodsaddClass"><h3id="addClassHeader">addClass( classToAdd )</h3><divid="addClassDescription"class="description"><p>Add a CSS class name to 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>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/component.js#L892">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 892</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="Methodsextend"><h3id="extendHeader">static extend( props )<emclass="deprecated"> (deprecated)</em></h3><divid="extendDescription"class="description"><p>Sets up the constructor using the supplied init method
or uses the init of the parent 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>props</td><td>Object</td><td>yes</td><td>An object of properties</td></tr></tbody></table><pclass="vjs-only"><emid="extendFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1350">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1350</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="MethodsgetComponent"><h3id="getComponentHeader">static getComponent( name )</h3><divid="getComponentDescription"class="description"><p>Gets a component by 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>name</td><td>String</td><td>yes</td><td>Name of the component to get</td></tr></tbody></table><pclass="vjs-only"><emid="getComponentFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1331">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1331</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="MethodshasClass"><h3id="hasClassHeader">hasClass( classToCheck )</h3><divid="hasClassDescription"class="description"><p>Check if a component's element has a CSS 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>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/component.js#L881">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 881</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="Methodsoff"><h3id="offHeader">off( first, second, [third] )</h3><divid="offDescription"class="description"><p>Remove an event listener from this component's element</p>
<preclass="prettyprint source lang-js"><code> myComponent.off('eventType', myFunc);</code></pre><p>If myFunc is excluded, ALL listeners for the event type will be removed.
If eventType is excluded, ALL listeners will be removed from the component.
Alternatively you can use <code>off</code> to remove listeners that were added to other
elements or components using <code>myComponent.on(otherComponent...</code>.
In this case both the event type and listener function are REQUIRED.</p>
myComponent.off(otherComponent, 'eventType', myFunc);</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>first</td><td>String|Component</td><td>yes</td><td>The event type or other component</td></tr><tr><td>second</td><td>function|String</td><td>yes</td><td>The listener function or event type</td></tr><tr><td>third</td><td>function</td><td>no</td><td>The listener for other component</td></tr></tbody></table><pclass="vjs-only"><emid="offFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L680">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 680</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodson"><h3id="onHeader">on( first, second, third )</h3><divid="onDescription"class="description"><p>Add an event listener to this component's element</p>
<preclass="prettyprint source lang-js"><code> var myFunc = function(){
var myComponent = this;
// Do something when the event is fired
};
myComponent.on('eventType', myFunc);</code></pre><p>The context of myFunc will be myComponent unless previously bound.
Alternatively, you can add a listener to another element or component.</p>
myComponent.on(otherComponent, 'eventName', myFunc);</code></pre><p>The benefit of using this over <code>VjsEvents.on(otherElement, 'eventName', myFunc)</code>
and <code>otherComponent.on('eventName', myFunc)</code> is that this way the listeners
will be automatically cleaned up when either component is disposed.
It will also bind myComponent as the context of myFunc.
<strong>NOTE</strong>: When using this on elements in the page other than window
and document (both permanent), if you remove the element from the DOM
you need to call <code>myComponent.trigger(el, 'dispose')</code> on it to clean up
references to it and allow the browser to garbage collect it.</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>first</td><td>String|Component</td><td>yes</td><td>The event type or other component</td></tr><tr><td>second</td><td>function|String</td><td>yes</td><td>The event handler or event type</td></tr><tr><td>third</td><td>function</td><td>yes</td><td>The event handler</td></tr></tbody></table><pclass="vjs-only"><emid="onFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L605">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 605</a></em></p><p><ahref="#top">[back to top]</a></p></div><divid="Methodsone"><h3id="oneHeader">one( first, second, [third] )</h3><divid="oneDescription"class="description"><p>Add an event listener to be triggered only once and then removed</p>
<preclass="prettyprint source lang-js"><code> myComponent.one('eventName', myFunc);</code></pre><p>Alternatively you can add a listener to another element or component
myComponent.one(otherComponent, 'eventName', myFunc);</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>first</td><td>String|Component</td><td>yes</td><td>The event type or other component</td></tr><tr><td>second</td><td>function|String</td><td>yes</td><td>The listener function or event type</td></tr><tr><td>third</td><td>function</td><td>no</td><td>The listener function for other component</td></tr></tbody></table><pclass="vjs-only"><emid="oneFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L728">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 728</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="MethodsregisterComponent"><h3id="registerComponentHeader">static registerComponent( name, comp )</h3><divid="registerComponentDescription"class="description"><p>Registers a component</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>name</td><td>String</td><td>yes</td><td>Name of the component to register</td></tr><tr><td>comp</td><td>Object</td><td>yes</td><td>The component to register</td></tr></tbody></table><pclass="vjs-only"><emid="registerComponentFooter">Defined in <ahref="https://github.com/videojs/video.js/blob/master/src/js/component.js#L1314">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1314</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="MethodsremoveClass"><h3id="removeClassHeader">removeClass( classToRemove )</h3><divid="removeClassDescription"class="description"><p>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>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/component.js#L904">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 904</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="Methodstrigger"><h3id="triggerHeader">trigger( event, [hash] )</h3><divid="triggerDescription"class="description"><p>Trigger an event on an element</p>
myComponent.trigger({'type':'eventName'}, {data: 'some data'});</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>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/component.js#L768">https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768</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">
