web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-10 23:30:03 +02:00
Code Releases Activity
f0db8f103c
video.js/docs/legacy-docs/api/player.html

280 lines
85 KiB
HTML
Raw Blame History

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Player</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/Player.html">
</head><body>
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/Player.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>Player Methods</h3><h4>Class Methods</h4><ul id="methodsList"><li><a href="#MethodsaddRemoteTextTrack">addRemoteTextTrack</a></li><li><a href="#MethodsaddTextTrack">addTextTrack</a></li><li><a href="#MethodsaspectRatio">aspectRatio</a></li><li><a href="#Methodsautoplay">autoplay</a></li><li><a href="#Methodsbuffered">buffered</a></li><li><a href="#MethodsbufferedEnd">bufferedEnd</a></li><li><a href="#MethodsbufferedPercent">bufferedPercent</a></li><li><a href="#MethodscanPlayType">canPlayType</a></li><li><a href="#Methodscontrols">controls</a></li><li><a href="#MethodscreateEl">createEl</a></li><li><a href="#MethodscurrentSrc">currentSrc</a></li><li><a href="#MethodscurrentTime">currentTime</a></li><li><a href="#MethodscurrentType">currentType</a></li><li><a href="#Methodsdimension">dimension</a></li><li><a href="#Methodsdispose">dispose</a></li><li><a href="#Methodsduration">duration</a></li><li><a href="#Methodsended">ended</a></li><li><a href="#MethodsenterFullWindow">enterFullWindow</a></li><li><a href="#Methodserror">error</a></li><li><a href="#MethodsexitFullscreen">exitFullscreen</a></li><li><a href="#MethodsexitFullWindow">exitFullWindow</a></li><li><a href="#Methodsfluid">fluid</a></li><li><a href="#MethodsfullWindowOnEscKey">fullWindowOnEscKey</a></li><li><a href="#MethodsgetCache">getCache</a></li><li><a href="#MethodsgetTagSettings">getTagSettings</a></li><li><a href="#Methodsheight">height</a></li><li><a href="#Methodsinit">init</a></li><li><a href="#MethodsisFullscreen">isFullscreen</a></li><li><a href="#Methodslanguage">language</a></li><li><a href="#Methodslanguages">languages</a></li><li><a href="#Methodsload">load</a></li><li><a href="#Methodsloop">loop</a></li><li><a href="#Methodsmuted">muted</a></li><li><a href="#MethodsnetworkState">networkState</a></li><li><a href="#Methodspause">pause</a></li><li><a href="#Methodspaused">paused</a></li><li><a href="#Methodsplay">play</a></li><li><a href="#MethodsplaybackRate">playbackRate</a></li><li><a href="#Methodsposter">poster</a></li><li><a href="#Methodspreload">preload</a></li><li><a href="#MethodsreadyState">readyState</a></li><li><a href="#MethodsremainingTime">remainingTime</a></li><li><a href="#MethodsremoteTextTrackEls">remoteTextTrackEls</a></li><li><a href="#MethodsremoteTextTracks">remoteTextTracks</a></li><li><a href="#MethodsremoveRemoteTextTrack">removeRemoteTextTrack</a></li><li><a href="#MethodsreportUserActivity">reportUserActivity</a></li><li><a href="#MethodsrequestFullscreen">requestFullscreen</a></li><li><a href="#Methodsreset">reset</a></li><li><a href="#Methodsscrubbing">scrubbing</a></li><li><a href="#Methodsseekable">seekable</a></li><li><a href="#Methodsseeking">seeking</a></li><li><a href="#MethodsselectSource">selectSource</a></li><li><a href="#Methodssrc">src</a></li><li><a href="#MethodssupportsFullScreen">supportsFullScreen</a></li><li><a href="#Methodstech">tech</a></li><li><a href="#MethodstextTracks">textTracks</a></li><li><a href="#MethodstoJSON">toJSON</a></li><li><a href="#MethodsupdateStyleEl_">updateStyleEl_</a></li><li><a href="#MethodsuserActive">userActive</a></li><li><a href="#MethodsvideoHeight">videoHeight</a></li><li><a href="#MethodsvideoWidth">videoWidth</a></li><li><a href="#Methodsvolume">volume</a></li><li><a href="#Methodswidth">width</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="#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="#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></ul><h3>Player Events</h3><h4>Class Events</h4><ul id="eventsList"><li><a href="#Eventsended">ended</a></li><li><a href="#Eventserror">error</a></li><li><a href="#Eventsloadeddata">loadeddata</a></li><li><a href="#Eventsloadedmetadata">loadedmetadata</a></li><li><a href="#Eventstimeupdate">timeupdate</a></li><li><a href="#Eventsuseractive">useractive</a></li><li><a href="#Eventsuserinactive">userinactive</a></li><li><a href="#Eventsvolumechange">volumechange</a></li></ul></div></section><div id="main" class="section"><section id="top" class="section"><h1>Player</h1><div style="border:none" id="classDescription" class="description"><p>An instance of the <code>Player</code> class is created when any of the Video.js setup methods are used to initialize a video.</p>
<pre class="prettyprint source lang-js"><code>var myPlayer = videojs('example_video_1');</code></pre><p>In the following example, the <code>data-setup</code> attribute tells the Video.js library to create a player instance when the library is ready.</p>
<pre class="prettyprint source lang-html"><code><video id="example_video_1" data-setup='{}' controls>
<source src="my-source.mp4" type="video/mp4">
</video></code></pre><p>After an instance has been created it can be accessed globally using <code>Video('example_video_1')</code>.</p></div><p>DEFINED IN: <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L41">player.js line number: 41</a></p><p>EXTENDS: <a href="component.html">component.js</a></p><h3>Constructor</h3><pre><code>Player( tag,[options],[ready] )</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>tag</td><td>Element</td><td>yes</td><td>The original video tag used for configuring options</td></tr><tr><td>options</td><td>Object</td><td>no</td><td>Object of option names and values</td></tr><tr><td>ready</td><td>function</td><td>no</td><td>Ready callback function</td></tr></tbody></table></section><section id="methods" class="section"><h2>Methods</h2><div id="MethodsaddRemoteTextTrack"><h3 id="addRemoteTextTrackHeader">addRemoteTextTrack( options )</h3><div id="addRemoteTextTrackDescription" class="description"><p>Add a remote text track</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>options</td><td>Object</td><td>yes</td><td>Options for remote text track</td></tr></tbody></table><p class="vjs-only"><em id="addRemoteTextTrackFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2520">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2520</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsaddTextTrack"><h3 id="addTextTrackHeader">addTextTrack( kind, [label], [language] )</h3><div id="addTextTrackDescription" class="description"><p>Add a text track
In addition to the W3C settings we allow adding additional info through options.
http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack</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>kind</td><td>String</td><td>yes</td><td>Captions, subtitles, chapters, descriptions, or metadata</td></tr><tr><td>label</td><td>String</td><td>no</td><td>Optional label</td></tr><tr><td>language</td><td>String</td><td>no</td><td>Optional language</td></tr></tbody></table><p class="vjs-only"><em id="addTextTrackFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2506">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2506</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsaspectRatio"><h3 id="aspectRatioHeader">aspectRatio( [ratio] )</h3><div id="aspectRatioDescription" class="description"><p>Get/Set the aspect ratio</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>ratio</td><td>String</td><td>no</td><td>Aspect ratio for player</td></tr></tbody></table><p class="vjs-only"><em id="aspectRatioFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L385">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 385</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsautoplay"><h3 id="autoplayHeader">autoplay( value )</h3><div id="autoplayDescription" class="description"><p>Get or set the autoplay attribute.</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>Boolean</td><td>yes</td><td>Boolean to determine if video should autoplay</td></tr></tbody></table><p class="vjs-only"><em id="autoplayFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1980">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1980</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsbuffered"><h3 id="bufferedHeader">buffered()</h3><div id="bufferedDescription" class="description"><p>Get a TimeRange object with the times of the video that have been downloaded
If you just want the percent of the video that's been downloaded,
use bufferedPercent.</p>
<pre class="prettyprint source lang-js"><code> // Number of different ranges of time have been buffered. Usually 1.
numberOfRanges = bufferedTimeRange.length,
// Time in seconds when the first range starts. Usually 0.
firstRangeStart = bufferedTimeRange.start(0),
// Time in seconds when the first range ends
firstRangeEnd = bufferedTimeRange.end(0),
// Length in seconds of the first time range
firstRangeLength = firstRangeEnd - firstRangeStart;</code></pre></div><p class="vjs-only"><em id="bufferedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1386">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1386</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsbufferedEnd"><h3 id="bufferedEndHeader">bufferedEnd()</h3><div id="bufferedEndDescription" class="description"><p>Get the ending time of the last buffered time range
This is used in the progress bar to encapsulate all time ranges.</p></div><p class="vjs-only"><em id="bufferedEndFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1429">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1429</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsbufferedPercent"><h3 id="bufferedPercentHeader">bufferedPercent()</h3><div id="bufferedPercentDescription" class="description"><p>Get the percent (as a decimal) of the video that's been downloaded</p>
<pre class="prettyprint source lang-js"><code> var howMuchIsDownloaded = myPlayer.bufferedPercent();</code></pre><p>0 means none, 1 means all.
(This method isn't in the HTML5 spec, but it's very convenient)</p></div><p class="vjs-only"><em id="bufferedPercentFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1414">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1414</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodscanPlayType"><h3 id="canPlayTypeHeader">canPlayType( type )</h3><div id="canPlayTypeDescription" class="description"><p>Check whether the player can play a given mimetype</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>type</td><td>String</td><td>yes</td><td>The mimetype to check</td></tr></tbody></table><p class="vjs-only"><em id="canPlayTypeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1680">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1680</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodscontrols"><h3 id="controlsHeader">controls( bool )</h3><div id="controlsDescription" class="description"><p>Get or set whether or not the controls are showing.</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>bool</td><td>Boolean</td><td>yes</td><td>Set controls to showing or not</td></tr></tbody></table><p class="vjs-only"><em id="controlsFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2073">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2073</a></em></p><p><a href="#top">[back to top]</a></p></div><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/player.js#L241">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 241</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodscurrentSrc"><h3 id="currentSrcHeader">currentSrc()</h3><div id="currentSrcDescription" class="description"><p>Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
Can be used in conjuction with <code>currentType</code> to assist in rebuilding the current source object.</p></div><p class="vjs-only"><em id="currentSrcFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1940">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1940</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodscurrentTime"><h3 id="currentTimeHeader">currentTime( seconds )</h3><div id="currentTimeDescription" class="description"><p>Get or set the current time (in seconds)</p>
<pre class="prettyprint source lang-js"><code> // get
var whereYouAt = myPlayer.currentTime();
// set
myPlayer.currentTime(120); // 2 minutes into the video</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>seconds</td><td>Number|String</td><td>yes</td><td>The time to seek to</td></tr></tbody></table><p class="vjs-only"><em id="currentTimeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1296">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1296</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodscurrentType"><h3 id="currentTypeHeader">currentType()</h3><div id="currentTypeDescription" class="description"><p>Get the current source type e.g. video/mp4
This can allow you rebuild the current source object so that you could load the same
source and tech later</p></div><p class="vjs-only"><em id="currentTypeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1951">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1951</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsdimension"><h3 id="dimensionHeader">dimension( dimension, [value] )</h3><div id="dimensionDescription" class="description"><p>Get/set dimension for player</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>dimension</td><td>String</td><td>yes</td><td>Either width or height</td></tr><tr><td>value</td><td>Number</td><td>no</td><td>Value for dimension</td></tr></tbody></table><p class="vjs-only"><em id="dimensionFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L332">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 332</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>Destroys the video player and does any necessary cleanup</p>
<pre class="prettyprint source lang-js"><code> myPlayer.dispose();</code></pre><p>This is especially helpful if you are dynamically adding and removing videos
to/from the DOM.</p></div><p class="vjs-only"><em id="disposeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L212">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 212</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsduration"><h3 id="durationHeader">duration( seconds )</h3><div id="durationDescription" class="description"><p>Get the length in time of the video in seconds</p>
<pre class="prettyprint source lang-js"><code> var lengthOfVideo = myPlayer.duration();</code></pre><p><strong>NOTE</strong>: The video must have started loading before the duration can be
known, and in the case of Flash, may not be known until the video starts
playing.</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>Duration when setting</td></tr></tbody></table><p class="vjs-only"><em id="durationFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1327">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1327</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsended"><h3 id="endedHeader">ended()</h3><div id="endedDescription" class="description"><p>Returns whether or not the player is in the "ended" state.</p></div><p class="vjs-only"><em id="endedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2204">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2204</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsenterFullWindow"><h3 id="enterFullWindowHeader">enterFullWindow()</h3><div id="enterFullWindowDescription" class="description"><p>When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.</p></div><p class="vjs-only"><em id="enterFullWindowFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1621">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1621</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodserror"><h3 id="errorHeader">error( err )</h3><div id="errorDescription" class="description"><p>Set or get the current MediaError</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>err</td><td>*</td><td>yes</td><td>A MediaError or a String/Number to be turned into a MediaError</td></tr></tbody></table><p class="vjs-only"><em id="errorFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2163">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2163</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsexitFullscreen"><h3 id="exitFullscreenHeader">exitFullscreen()</h3><div id="exitFullscreenDescription" class="description"><p>Return the video to its normal size after having been in full screen mode</p>
<pre class="prettyprint source lang-js"><code> myPlayer.exitFullscreen();</code></pre></div><p class="vjs-only"><em id="exitFullscreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1595">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1595</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsexitFullWindow"><h3 id="exitFullWindowHeader">exitFullWindow()</h3><div id="exitFullWindowDescription" class="description"><p>Exit full window</p></div><p class="vjs-only"><em id="exitFullWindowFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1660">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1660</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsfluid"><h3 id="fluidHeader">fluid( bool )</h3><div id="fluidDescription" class="description"><p>Add/remove the vjs-fluid 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>bool</td><td>Boolean</td><td>yes</td><td>Value of true adds the class, value of false removes the class</td></tr></tbody></table><p class="vjs-only"><em id="fluidFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L365">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 365</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsfullWindowOnEscKey"><h3 id="fullWindowOnEscKeyHeader">fullWindowOnEscKey( event )</h3><div id="fullWindowOnEscKeyDescription" class="description"><p>Check for call to either exit full window or full screen on ESC key</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>event</td><td>String</td><td>yes</td><td>Event to check for key press</td></tr></tbody></table><p class="vjs-only"><em id="fullWindowOnEscKeyFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1644">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1644</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsgetCache"><h3 id="getCacheHeader">getCache()</h3><div id="getCacheDescription" class="description"><p>Get object for cached values.</p></div><p class="vjs-only"><em id="getCacheFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1156">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1156</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsgetTagSettings"><h3 id="getTagSettingsHeader">static getTagSettings( tag )</h3><div id="getTagSettingsDescription" class="description"><p>Gets tag settings</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>The player tag</td></tr></tbody></table><p class="vjs-only"><em id="getTagSettingsFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2657">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2657</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsheight"><h3 id="heightHeader">height( [value] )</h3><div id="heightDescription" class="description"><p>Get/set player 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>value</td><td>Number</td><td>no</td><td>Value for height</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/player.js#L321">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 321</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsinit"><h3 id="initHeader">init( tag, [options], [ready] )</h3><div id="initDescription" class="description"><p>player's constructor function</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>The original video tag used for configuring options</td></tr><tr><td>options</td><td>Object</td><td>no</td><td>Player options</td></tr><tr><td>ready</td><td>function</td><td>no</td><td>Ready callback function</td></tr></tbody></table><p class="vjs-only"><em id="initFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L62">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 62</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsisFullscreen"><h3 id="isFullscreenHeader">isFullscreen( [isFS] )</h3><div id="isFullscreenDescription" class="description"><p>Check if the player is in fullscreen mode</p>
<pre class="prettyprint source lang-js"><code> // get
var fullscreenOrNot = myPlayer.isFullscreen();
// set
myPlayer.isFullscreen(true); // tell the player it's in fullscreen</code></pre><p>NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
property and instead document.fullscreenElement is used. But isFullscreen is
still a valuable property for internal player workings.</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>isFS</td><td>Boolean</td><td>no</td><td>Update the player's fullscreen state</td></tr></tbody></table><p class="vjs-only"><em id="isFullscreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1514">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1514</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodslanguage"><h3 id="languageHeader">language( code )</h3><div id="languageDescription" class="description"><p>The player's language code
NOTE: The language should be set in the player options if you want the
the controls to be built with a specific language. Changing the lanugage
later will not update controls text.</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>code</td><td>String</td><td>yes</td><td>The locale string</td></tr></tbody></table><p class="vjs-only"><em id="languageFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2569">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2569</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodslanguages"><h3 id="languagesHeader">languages()</h3><div id="languagesDescription" class="description"><p>Get the player's language dictionary
Merge every time, because a newly added plugin might call videojs.addLanguage() at any time
Languages specified directly in the player options have precedence</p></div><p class="vjs-only"><em id="languagesFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2589">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2589</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsload"><h3 id="loadHeader">load()</h3><div id="loadDescription" class="description"><p>Begin loading the src data.</p></div><p class="vjs-only"><em id="loadFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1916">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1916</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsloop"><h3 id="loopHeader">loop( value )</h3><div id="loopDescription" class="description"><p>Get or set the loop attribute on the video 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>Boolean</td><td>yes</td><td>Boolean to determine if video should loop</td></tr></tbody></table><p class="vjs-only"><em id="loopFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1997">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1997</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsmuted"><h3 id="mutedHeader">muted( [muted] )</h3><div id="mutedDescription" class="description"><p>Get the current muted state, or turn mute on or off</p>
<pre class="prettyprint source lang-js"><code> // get
var isVolumeMuted = myPlayer.muted();
// set
myPlayer.muted(true); // mute the volume</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>muted</td><td>Boolean</td><td>no</td><td>True to mute, false to unmute</td></tr></tbody></table><p class="vjs-only"><em id="mutedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1480">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1480</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsnetworkState"><h3 id="networkStateHeader">networkState()</h3><div id="networkStateDescription" class="description"><p>Returns the current state of network activity for the element, from
the codes in the list below.</p>
<ul>
<li>NETWORK_EMPTY (numeric value 0)
The element has not yet been initialised. All attributes are in
their initial states.</li>
<li>NETWORK_IDLE (numeric value 1)
The element's resource selection algorithm is active and has
selected a resource, but it is not actually using the network at
this time.</li>
<li>NETWORK_LOADING (numeric value 2)
The user agent is actively trying to download data.</li>
<li>NETWORK_NO_SOURCE (numeric value 3)
The element's resource selection algorithm is active, but it has
not yet found a resource to use.</li>
</ul></div><p class="vjs-only"><em id="networkStateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2414">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2414</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodspause"><h3 id="pauseHeader">pause()</h3><div id="pauseDescription" class="description"><p>Pause the video playback</p>
<pre class="prettyprint source lang-js"><code> myPlayer.pause();</code></pre></div><p class="vjs-only"><em id="pauseFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1242">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1242</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodspaused"><h3 id="pausedHeader">paused()</h3><div id="pausedDescription" class="description"><p>Check if the player is paused</p>
<pre class="prettyprint source lang-js"><code> var isPaused = myPlayer.paused();
var isPlaying = !myPlayer.paused();</code></pre></div><p class="vjs-only"><em id="pausedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1256">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1256</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsplay"><h3 id="playHeader">play()</h3><div id="playDescription" class="description"><p>start media playback</p>
<pre class="prettyprint source lang-js"><code> myPlayer.play();</code></pre></div><p class="vjs-only"><em id="playFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1228">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1228</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsplaybackRate"><h3 id="playbackRateHeader">playbackRate( rate )</h3><div id="playbackRateDescription" class="description"><p>Gets or sets the current playback rate. A playback rate of
1.0 represents normal speed and 0.5 would indicate half-speed
playback, for instance.</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>rate</td><td>Number</td><td>yes</td><td>New playback rate to set.</td></tr></tbody></table><p class="vjs-only"><em id="playbackRateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2372">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2372</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsposter"><h3 id="posterHeader">poster( [src] )</h3><div id="posterDescription" class="description"><p>Get or set the poster image source url</p>
<h5>EXAMPLE:</h5><pre class="prettyprint source lang-js"><code> // get
var currentPoster = myPlayer.poster();
// set
myPlayer.poster('http://example.com/myImage.jpg');</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>src</td><td>String</td><td>no</td><td>Poster image source URL</td></tr></tbody></table><p class="vjs-only"><em id="posterFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2014">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2014</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodspreload"><h3 id="preloadHeader">preload( value )</h3><div id="preloadDescription" class="description"><p>Get or set the preload attribute</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>Boolean</td><td>yes</td><td>Boolean to determine if preload should be used</td></tr></tbody></table><p class="vjs-only"><em id="preloadFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1963">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1963</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsreadyState"><h3 id="readyStateHeader">readyState()</h3><div id="readyStateDescription" class="description"><p>Returns a value that expresses the current state of the element
with respect to rendering the current playback position, from the
codes in the list below.</p>
<ul>
<li>HAVE_NOTHING (numeric value 0)
No information regarding the media resource is available.</li>
<li>HAVE_METADATA (numeric value 1)
Enough of the resource has been obtained that the duration of the
resource is available.</li>
<li>HAVE_CURRENT_DATA (numeric value 2)
Data for the immediate current playback position is available.</li>
<li>HAVE_FUTURE_DATA (numeric value 3)
Data for the immediate current playback position is available, as
well as enough data for the user agent to advance the current
playback position in the direction of playback.</li>
<li>HAVE_ENOUGH_DATA (numeric value 4)
The user agent estimates that enough data is available for
playback to proceed uninterrupted.</li>
</ul></div><p class="vjs-only"><em id="readyStateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2438">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2438</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsremainingTime"><h3 id="remainingTimeHeader">remainingTime()</h3><div id="remainingTimeDescription" class="description"><p>Calculates how much time is left.</p>
<pre class="prettyprint source lang-js"><code> var timeLeft = myPlayer.remainingTime();</code></pre><p>Not a native video element function, but useful</p></div><p class="vjs-only"><em id="remainingTimeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1368">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1368</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsremoteTextTrackEls"><h3 id="remoteTextTrackElsHeader">remoteTextTrackEls()</h3><div id="remoteTextTrackElsDescription" class="description"><p>Get an array of remote html track elements</p></div><p class="vjs-only"><em id="remoteTextTrackElsFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2496">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2496</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsremoteTextTracks"><h3 id="remoteTextTracksHeader">remoteTextTracks()</h3><div id="remoteTextTracksDescription" class="description"><p>Get an array of remote text tracks</p></div><p class="vjs-only"><em id="remoteTextTracksFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2486">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2486</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsremoveRemoteTextTrack"><h3 id="removeRemoteTextTrackHeader">removeRemoteTextTrack( track )</h3><div id="removeRemoteTextTrackDescription" class="description"><p>Remove a remote text track</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>track</td><td>Object</td><td>yes</td><td>Remote text track to remove</td></tr></tbody></table><p class="vjs-only"><em id="removeRemoteTextTrackFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2530">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2530</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsreportUserActivity"><h3 id="reportUserActivityHeader">reportUserActivity( event )</h3><div id="reportUserActivityDescription" class="description"><p>Report user activity</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>event</td><td>Object</td><td>yes</td><td>Event object</td></tr></tbody></table><p class="vjs-only"><em id="reportUserActivityFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2229">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2229</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsrequestFullscreen"><h3 id="requestFullscreenHeader">requestFullscreen()</h3><div id="requestFullscreenDescription" class="description"><p>Increase the size of the video to full screen</p>
<pre class="prettyprint source lang-js"><code> myPlayer.requestFullscreen();</code></pre><p>In some browsers, full screen is not supported natively, so it enters
"full window mode", where the video fills the browser window.
In browsers and devices that support native full screen, sometimes the
browser's default controls will be shown, and not the Video.js custom skin.
This includes most mobile devices (iOS, Android) and older versions of
Safari.</p></div><p class="vjs-only"><em id="requestFullscreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1539">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1539</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsreset"><h3 id="resetHeader">reset()</h3><div id="resetDescription" class="description"><p>Reset the player. Loads the first tech in the techOrder,
and calls <code>reset</code> on the tech`.</p></div><p class="vjs-only"><em id="resetFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1927">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1927</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsscrubbing"><h3 id="scrubbingHeader">scrubbing( isScrubbing )</h3><div id="scrubbingDescription" class="description"><p>Returns whether or not the user is "scrubbing". Scrubbing is when the user
has clicked the progress bar handle and is dragging it along the progress bar.</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>isScrubbing</td><td>Boolean</td><td>yes</td><td>True/false the user is scrubbing</td></tr></tbody></table><p class="vjs-only"><em id="scrubbingFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1271">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1271</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsseekable"><h3 id="seekableHeader">seekable()</h3><div id="seekableDescription" class="description"><p>Returns the TimeRanges of the media that are currently available
for seeking to.</p></div><p class="vjs-only"><em id="seekableFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2220">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2220</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsseeking"><h3 id="seekingHeader">seeking()</h3><div id="seekingDescription" class="description"><p>Returns whether or not the player is in the "seeking" state.</p></div><p class="vjs-only"><em id="seekingFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2212">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2212</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsselectSource"><h3 id="selectSourceHeader">selectSource( sources )</h3><div id="selectSourceDescription" class="description"><p>Select source based on tech-order or source-order
Uses source-order selection if <code>options.sourceOrder</code> is truthy. Otherwise,
defaults to tech-order selection</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>sources</td><td>Array</td><td>yes</td><td>The sources for a media asset</td></tr></tbody></table><p class="vjs-only"><em id="selectSourceFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1720">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1720</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodssrc"><h3 id="srcHeader">src( source )</h3><div id="srcDescription" class="description"><p>The source function updates the video source
There are three types of variables you can pass as the argument.
<strong>URL String</strong>: A URL to the the video file. Use this method if you are sure
the current playback technology (HTML5/Flash) can support the source you
provide. Currently only MP4 files can be used in both HTML5 and Flash.</p>
<pre class="prettyprint source lang-js"><code> myPlayer.src("http://www.example.com/path/to/video.mp4");</code></pre><p><em>*Source Object (or element):</em> * A javascript object containing information
about the source file. Use this method if you want the player to determine if
it can support the file using the type information.</p>
<pre class="prettyprint source lang-js"><code> myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });</code></pre><p><em>*Array of Source Objects:</em> * To provide multiple versions of the source so
that it can be played using HTML5 across browsers you can use an array of
source objects. Video.js will detect which version is supported and load that
file.</p>
<pre class="prettyprint source lang-js"><code> myPlayer.src([
{ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
{ type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
{ type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
]);</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>source</td><td>String|Object|Array</td><td>yes</td><td>The source URL, object, or array of sources</td></tr></tbody></table><p class="vjs-only"><em id="srcFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1792">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1792</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssupportsFullScreen"><h3 id="supportsFullScreenHeader">supportsFullScreen()</h3><div id="supportsFullScreenDescription" class="description"><p>Check to see if fullscreen is supported</p></div><p class="vjs-only"><em id="supportsFullScreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1504">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1504</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodstech"><h3 id="techHeader">tech( )</h3><div id="techDescription" class="description"><p>Return a reference to the current tech.
It will only return a reference to the tech if given an object with the
<code>IWillNotUseThisInPlugins</code> property on it. This is try and prevent misuse
of techs by plugins.</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>undefined</td><td>Object</td></tr></tbody></table><p class="vjs-only"><em id="techFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L616">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 616</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodstextTracks"><h3 id="textTracksHeader">textTracks()</h3><div id="textTracksDescription" class="description"><p>Get an array of associated text tracks. captions, subtitles, chapters, descriptions
http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks</p></div><p class="vjs-only"><em id="textTracksFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2473">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2473</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodstoJSON"><h3 id="toJSONHeader">toJSON()</h3><div id="toJSONDescription" class="description"><p>Converts track info to JSON</p></div><p class="vjs-only"><em id="toJSONFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2601">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2601</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsupdateStyleEl_"><h3 id="updateStyleEl_Header">updateStyleEl_()</h3><div id="updateStyleEl_Description" class="description"><p>Update styles of the player element (height, width and aspect ratio)</p></div><p class="vjs-only"><em id="updateStyleEl_Footer">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L410">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 410</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsuserActive"><h3 id="userActiveHeader">userActive( bool )</h3><div id="userActiveDescription" class="description"><p>Get/set if user is active</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>bool</td><td>Boolean</td><td>yes</td><td>Value when setting</td></tr></tbody></table><p class="vjs-only"><em id="userActiveFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2239">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2239</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsvideoHeight"><h3 id="videoHeightHeader">videoHeight()</h3><div id="videoHeightDescription" class="description"><p>Get video height</p></div><p class="vjs-only"><em id="videoHeightFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2550">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2550</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsvideoWidth"><h3 id="videoWidthHeader">videoWidth()</h3><div id="videoWidthDescription" class="description"><p>Get video width</p></div><p class="vjs-only"><em id="videoWidthFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2540">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2540</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsvolume"><h3 id="volumeHeader">volume( percentAsDecimal )</h3><div id="volumeDescription" class="description"><p>Get or set the current volume of the media</p>
<pre class="prettyprint source lang-js"><code> // get
var howLoudIsIt = myPlayer.volume();
// set
myPlayer.volume(0.5); // Set volume to half</code></pre><p>0 is off (muted), 1.0 is all the way up, 0.5 is half way.</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>percentAsDecimal</td><td>Number</td><td>yes</td><td>The new volume as a decimal percent</td></tr></tbody></table><p class="vjs-only"><em id="volumeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L1448">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1448</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodswidth"><h3 id="widthHeader">width( [value] )</h3><div id="widthDescription" class="description"><p>Get/set player width</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>Number</td><td>no</td><td>Value for width</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/player.js#L310">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 310</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="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="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></section><section id="events" class="section"><h2>Events</h2><div id="Eventsended"><h3 id="endedHeader">ended</h3><div id="endedDescription" class="description"><p>Fired when video playback ends</p></div><p class="vjs-only"><em id="endedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2801">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2801</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventserror"><h3 id="errorHeader">error</h3><div id="errorDescription" class="description"><p>Fired when an error occurs</p></div><p class="vjs-only"><em id="errorFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2815">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2815</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventsloadeddata"><h3 id="loadeddataHeader">loadeddata</h3><div id="loadeddataDescription" class="description"><p>Fired when the player has downloaded data at the current playback position</p></div><p class="vjs-only"><em id="loadeddataFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2771">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2771</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventsloadedmetadata"><h3 id="loadedmetadataHeader">loadedmetadata</h3><div id="loadedmetadataDescription" class="description"><p>Fired when the player has initial duration and dimension information</p></div><p class="vjs-only"><em id="loadedmetadataFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2764">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2764</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventstimeupdate"><h3 id="timeupdateHeader">timeupdate</h3><div id="timeupdateDescription" class="description"><p>Fired when the current playback position has changed *
During playback this is fired every 15-250 milliseconds, depending on the
playback technology in use.</p></div><p class="vjs-only"><em id="timeupdateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2792">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2792</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventsuseractive"><h3 id="useractiveHeader">useractive</h3><div id="useractiveDescription" class="description"><p>Fired when the user is active, e.g. moves the mouse over the player</p></div><p class="vjs-only"><em id="useractiveFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2778">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2778</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventsuserinactive"><h3 id="userinactiveHeader">userinactive</h3><div id="userinactiveDescription" class="description"><p>Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction</p></div><p class="vjs-only"><em id="userinactiveFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2785">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2785</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Eventsvolumechange"><h3 id="volumechangeHeader">volumechange</h3><div id="volumechangeDescription" class="description"><p>Fired when the volume changes</p></div><p class="vjs-only"><em id="volumechangeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/player.js#L2808">https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2808</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>
View Git Blame Copy Permalink