mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
160 lines
37 KiB
HTML
160 lines
37 KiB
HTML
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>ControlBar</title><script src="//use.edgefonts.net/source-code-pro.js">
|
|
// font for code blocks
|
|
</script><link href="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 --><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-forest.light.min.css"/><link rel="stylesheet" type="text/css" href="css/api-docs.css"/><link rel="canonical" href="https://docs.videojs.com/ControlBar.html">
|
|
</head><body>
|
|
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/ControlBar.html">documentation for the current release</a>.
|
|
<section id="index" class="side-nav"><h2 class="sideNavHeader"><a href="index.html">API Index</a></h2><div id="memberIndex" class="member-index"><h3>ControlBar Methods</h3><h4>Class Methods</h4><ul id="methodsList"><li><a href="#MethodscreateEl">createEl</a></li></ul><h4>Inherited Methods from Component</h4><ul><li><a href="#Methods$">$</a></li><li><a href="#Methods$$">$$</a></li><li><a href="#MethodsaddChild">addChild</a></li><li><a href="#MethodsaddClass">addClass</a></li><li><a href="#MethodsbuildCSSClass">buildCSSClass</a></li><li><a href="#Methodschildren">children</a></li><li><a href="#MethodsclearInterval">clearInterval</a></li><li><a href="#MethodsclearTimeout">clearTimeout</a></li><li><a href="#MethodscontentEl">contentEl</a></li><li><a href="#Methodsdimensions">dimensions</a></li><li><a href="#Methodsdispose">dispose</a></li><li><a href="#Methodsel">el</a></li><li><a href="#MethodsenableTouchActivity">enableTouchActivity</a></li><li><a href="#Methodsextend">extend</a></li><li><a href="#MethodsgetChild">getChild</a></li><li><a href="#MethodsgetChildById">getChildById</a></li><li><a href="#MethodsgetComponent">getComponent</a></li><li><a href="#MethodshasClass">hasClass</a></li><li><a href="#Methodsheight">height</a></li><li><a href="#Methodshide">hide</a></li><li><a href="#Methodsid">id</a></li><li><a href="#MethodsinitChildren">initChildren</a></li><li><a href="#Methodsname">name</a></li><li><a href="#Methodsoff">off</a></li><li><a href="#Methodson">on</a></li><li><a href="#Methodsone">one</a></li><li><a href="#Methodsoptions">options</a></li><li><a href="#Methodsplayer">player</a></li><li><a href="#Methodsready">ready</a></li><li><a href="#MethodsregisterComponent">registerComponent</a></li><li><a href="#MethodsremoveChild">removeChild</a></li><li><a href="#MethodsremoveClass">removeClass</a></li><li><a href="#MethodssetInterval">setInterval</a></li><li><a href="#MethodssetTimeout">setTimeout</a></li><li><a href="#Methodsshow">show</a></li><li><a href="#MethodstoggleClass">toggleClass</a></li><li><a href="#Methodstrigger">trigger</a></li><li><a href="#MethodstriggerReady">triggerReady</a></li><li><a href="#Methodswidth">width</a></li></ul></div></section><div id="main" class="section"><section id="top" class="section"><h1>ControlBar</h1><div style="border:none" id="classDescription" class="description"><p>Container of main controls</p></div><p>DEFINED IN: <a href="https://github.com/videojs/video.js/blob/master/src/js/control-bar/control-bar.js#L24">control-bar.js line number: 24</a></p><p>EXTENDS: <a href="component.html">component.js</a></p><h3>Constructor</h3><pre><code>ControlBar()</code></pre></section><section id="methods" class="section"><h2>Methods</h2><div id="MethodscreateEl"><h3 id="createElHeader">createEl()</h3><div id="createElDescription" class="description"><p>Create the component's DOM element</p></div><p class="vjs-only"><em id="createElFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/control-bar/control-bar.js#L32">https://github.com/videojs/video.js/blob/master/src/js/control-bar/control-bar.js line number: 32</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methods$"><h3 id="$Header">$( selector, [context] )</h3><div id="$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><p class="vjs-only"><em id="$Footer">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methods$$"><h3 id="$$Header">$$( selector, [context] )</h3><div id="$$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><p class="vjs-only"><em id="$$Footer">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsaddChild"><h3 id="addChildHeader">addChild( child, [options] )</h3><div id="addChildDescription" class="description"><p>Adds a child component inside this component</p>
|
|
<pre class="prettyprint source lang-js"><code> myComponent.el();
|
|
// -> <div class='my-component'></div>
|
|
myComponent.children();
|
|
// [empty array]
|
|
|
|
var myButton = myComponent.addChild('MyButton');
|
|
// -> <div class='my-component'><div class="my-button">myButton<div></div>
|
|
// -> myButton === myComponent.children()[0];</code></pre><p>Pass in options for child constructors and options for children of the child</p>
|
|
<pre class="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><p class="vjs-only"><em id="addChildFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsaddClass"><h3 id="addClassHeader">addClass( classToAdd )</h3><div id="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><p class="vjs-only"><em id="addClassFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsbuildCSSClass"><h3 id="buildCSSClassHeader">buildCSSClass()</h3><div id="buildCSSClassDescription" class="description"><p>Allows sub components to stack CSS class names</p></div><p class="vjs-only"><em id="buildCSSClassFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodschildren"><h3 id="childrenHeader">children()</h3><div id="childrenDescription" class="description"><p>Get an array of all child components</p>
|
|
<pre class="prettyprint source lang-js"><code> var kids = myComponent.children();</code></pre></div><p class="vjs-only"><em id="childrenFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsclearInterval"><h3 id="clearIntervalHeader">clearInterval( intervalId )</h3><div id="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><p class="vjs-only"><em id="clearIntervalFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsclearTimeout"><h3 id="clearTimeoutHeader">clearTimeout( timeoutId )</h3><div id="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><p class="vjs-only"><em id="clearTimeoutFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodscontentEl"><h3 id="contentElHeader">contentEl()</h3><div id="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><p class="vjs-only"><em id="contentElFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsdimensions"><h3 id="dimensionsHeader">dimensions( width, height )</h3><div id="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><p class="vjs-only"><em id="dimensionsFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsdispose"><h3 id="disposeHeader">dispose()</h3><div id="disposeDescription" class="description"><p>Dispose of the component and all child components</p></div><p class="vjs-only"><em id="disposeFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsel"><h3 id="elHeader">el()</h3><div id="elDescription" class="description"><p>Get the component's DOM element</p>
|
|
<pre class="prettyprint source lang-js"><code> var domEl = myComponent.el();</code></pre></div><p class="vjs-only"><em id="elFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsenableTouchActivity"><h3 id="enableTouchActivityHeader">enableTouchActivity()</h3><div id="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><p class="vjs-only"><em id="enableTouchActivityFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsextend"><h3 id="extendHeader">static extend( props )<em class="deprecated"> (deprecated)</em></h3><div id="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><p class="vjs-only"><em id="extendFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsgetChild"><h3 id="getChildHeader">getChild()</h3><div id="getChildDescription" class="description"><p>Returns a child component with the provided name</p></div><p class="vjs-only"><em id="getChildFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsgetChildById"><h3 id="getChildByIdHeader">getChildById()</h3><div id="getChildByIdDescription" class="description"><p>Returns a child component with the provided ID</p></div><p class="vjs-only"><em id="getChildByIdFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsgetComponent"><h3 id="getComponentHeader">static getComponent( name )</h3><div id="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><p class="vjs-only"><em id="getComponentFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodshasClass"><h3 id="hasClassHeader">hasClass( classToCheck )</h3><div id="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><p class="vjs-only"><em id="hasClassFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsheight"><h3 id="heightHeader">height( num, [skipListeners] )</h3><div id="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><p class="vjs-only"><em id="heightFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodshide"><h3 id="hideHeader">hide()</h3><div id="hideDescription" class="description"><p>Hide the component element if currently showing</p></div><p class="vjs-only"><em id="hideFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsid"><h3 id="idHeader">id()</h3><div id="idDescription" class="description"><p>Get the component's ID</p>
|
|
<pre class="prettyprint source lang-js"><code> var id = myComponent.id();</code></pre></div><p class="vjs-only"><em id="idFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsinitChildren"><h3 id="initChildrenHeader">initChildren()</h3><div id="initChildrenDescription" class="description"><p>Add and initialize default child components from options</p>
|
|
<pre class="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>
|
|
<pre class="prettyprint source lang-js"><code> var myComp = new MyComponent(player, {
|
|
children: [
|
|
'button',
|
|
{
|
|
name: 'button',
|
|
someOtherOption: true
|
|
},
|
|
{
|
|
name: 'button',
|
|
someOtherOption: false
|
|
}
|
|
]
|
|
});</code></pre></div><p class="vjs-only"><em id="initChildrenFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsname"><h3 id="nameHeader">name()</h3><div id="nameDescription" class="description"><p>Get the component's name. The name is often used to reference the component.</p>
|
|
<pre class="prettyprint source lang-js"><code> var name = myComponent.name();</code></pre></div><p class="vjs-only"><em id="nameFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsoff"><h3 id="offHeader">off( first, second, [third] )</h3><div id="offDescription" class="description"><p>Remove an event listener from this component's element</p>
|
|
<pre class="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>
|
|
<pre class="prettyprint source lang-js"><code> myComponent.off(otherElement, 'eventType', myFunc);
|
|
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><p class="vjs-only"><em id="offFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodson"><h3 id="onHeader">on( first, second, third )</h3><div id="onDescription" class="description"><p>Add an event listener to this component's element</p>
|
|
<pre class="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>
|
|
<pre class="prettyprint source lang-js"><code> myComponent.on(otherElement, 'eventName', myFunc);
|
|
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><p class="vjs-only"><em id="onFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsone"><h3 id="oneHeader">one( first, second, [third] )</h3><div id="oneDescription" class="description"><p>Add an event listener to be triggered only once and then removed</p>
|
|
<pre class="prettyprint source lang-js"><code> myComponent.one('eventName', myFunc);</code></pre><p>Alternatively you can add a listener to another element or component
|
|
that will be triggered only once.</p>
|
|
<pre class="prettyprint source lang-js"><code> myComponent.one(otherElement, 'eventName', myFunc);
|
|
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><p class="vjs-only"><em id="oneFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsoptions"><h3 id="optionsHeader">options( obj )</h3><div id="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>
|
|
<pre class="prettyprint source lang-js"><code> Parent.prototype.options_ = {
|
|
optionSet: {
|
|
'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
|
|
'childTwo': {},
|
|
'childThree': {}
|
|
}
|
|
}
|
|
newOptions = {
|
|
optionSet: {
|
|
'childOne': { 'foo': 'baz', 'abc': '123' }
|
|
'childTwo': null,
|
|
'childFour': {}
|
|
}
|
|
}
|
|
|
|
this.options(newOptions);</code></pre><p>RESULT</p>
|
|
<pre class="prettyprint source lang-js"><code> {
|
|
optionSet: {
|
|
'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
|
|
'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><p class="vjs-only"><em id="optionsFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsplayer"><h3 id="playerHeader">player()</h3><div id="playerDescription" class="description"><p>Return the component's player</p></div><p class="vjs-only"><em id="playerFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsready"><h3 id="readyHeader">ready( fn, sync )</h3><div id="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><p class="vjs-only"><em id="readyFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsregisterComponent"><h3 id="registerComponentHeader">static registerComponent( name, comp )</h3><div id="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><p class="vjs-only"><em id="registerComponentFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsremoveChild"><h3 id="removeChildHeader">removeChild( component )</h3><div id="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><p class="vjs-only"><em id="removeChildFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodsremoveClass"><h3 id="removeClassHeader">removeClass( classToRemove )</h3><div id="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><p class="vjs-only"><em id="removeClassFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodssetInterval"><h3 id="setIntervalHeader">setInterval( fn, interval )</h3><div id="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><p class="vjs-only"><em id="setIntervalFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodssetTimeout"><h3 id="setTimeoutHeader">setTimeout( fn, timeout )</h3><div id="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><p class="vjs-only"><em id="setTimeoutFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodsshow"><h3 id="showHeader">show()</h3><div id="showDescription" class="description"><p>Show the component element if hidden</p></div><p class="vjs-only"><em id="showFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodstoggleClass"><h3 id="toggleClassHeader">toggleClass( classToToggle, [predicate] )</h3><div id="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><p class="vjs-only"><em id="toggleClassFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodstrigger"><h3 id="triggerHeader">trigger( event, [hash] )</h3><div id="triggerDescription" class="description"><p>Trigger an event on an element</p>
|
|
<pre class="prettyprint source lang-js"><code> myComponent.trigger('eventName');
|
|
myComponent.trigger({'type':'eventName'});
|
|
myComponent.trigger('eventName', {data: 'some data'});
|
|
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><p class="vjs-only"><em id="triggerFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="MethodstriggerReady"><h3 id="triggerReadyHeader">triggerReady()</h3><div id="triggerReadyDescription" class="description"><p>Trigger the ready listeners</p></div><p class="vjs-only"><em id="triggerReadyFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div><div id="Methodswidth"><h3 id="widthHeader">width( num, skipListeners )</h3><div id="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><p class="vjs-only"><em id="widthFooter">Defined in <a href="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><a href="#top">[back to top]</a></p></div></section></div><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js">
|
|
// syntax highlighter for code samples
|
|
</script><script src="./js/highlight-syntax.js">
|
|
// activates syntax highlighting
|
|
</script></body></html> |