web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2024-12-23 02:04:34 +02:00
Code Releases Activity
a40054d62e
video.js/docs/legacy-docs/api/html5.html

177 lines
70 KiB
HTML
Raw Blame History

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>Html5</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/Html5.html">
</head><body>
<p class="legacydocsnote">This documentation is for an outdated version of Video.js. See <a href="https://docs.videojs.com/Html5.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>Html5 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="#Methodsautoplay">autoplay</a></li><li><a href="#Methodsbuffered">buffered</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="#MethodsdefaultMuted">defaultMuted</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="#MethodsenterFullScreen">enterFullScreen</a></li><li><a href="#Methodserror">error</a></li><li><a href="#MethodsexitFullScreen">exitFullScreen</a></li><li><a href="#Methodsheight">height</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="#MethodsremoveRemoteTextTrack">removeRemoteTextTrack</a></li><li><a href="#Methodsreset">reset</a></li><li><a href="#Methodsseekable">seekable</a></li><li><a href="#Methodsseeking">seeking</a></li><li><a href="#MethodssetAutoplay">setAutoplay</a></li><li><a href="#MethodssetControls">setControls</a></li><li><a href="#MethodssetCurrentTime">setCurrentTime</a></li><li><a href="#MethodssetLoop">setLoop</a></li><li><a href="#MethodssetMuted">setMuted</a></li><li><a href="#MethodssetPlaybackRate">setPlaybackRate</a></li><li><a href="#MethodssetPreload">setPreload</a></li><li><a href="#MethodssetSrc">setSrc</a></li><li><a href="#MethodssetVolume">setVolume</a></li><li><a href="#Methodssrc">src</a></li><li><a href="#MethodssupportsFullScreen">supportsFullScreen</a></li><li><a href="#MethodstextTracks">textTracks</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 Tech</h4><ul><li><a href="#MethodsbufferedPercent">bufferedPercent</a></li><li><a href="#MethodsemulateTextTracks">emulateTextTracks</a></li><li><a href="#MethodsgetComponent">getComponent</a></li><li><a href="#MethodsinitTextTrackListeners">initTextTrackListeners</a></li><li><a href="#MethodsmanualProgressOff">manualProgressOff</a></li><li><a href="#MethodsmanualProgressOn">manualProgressOn</a></li><li><a href="#MethodsmanualTimeUpdatesOff">manualTimeUpdatesOff</a></li><li><a href="#MethodsmanualTimeUpdatesOn">manualTimeUpdatesOn</a></li><li><a href="#MethodsonDurationChange">onDurationChange</a></li><li><a href="#Methodsplayed">played</a></li><li><a href="#MethodsregisterComponent">registerComponent</a></li><li><a href="#MethodsremoteTextTrackEls">remoteTextTrackEls</a></li><li><a href="#MethodsremoteTextTracks">remoteTextTracks</a></li><li><a href="#MethodssetPoster">setPoster</a></li><li><a href="#MethodsstopTrackingCurrentTime">stopTrackingCurrentTime</a></li><li><a href="#MethodsstopTrackingProgress">stopTrackingProgress</a></li><li><a href="#MethodstrackCurrentTime">trackCurrentTime</a></li><li><a href="#MethodstrackProgress">trackProgress</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="#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="#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></div></section><div id="main" class="section"><section id="top" class="section"><h1>Html5</h1><div style="border:none" id="classDescription" class="description"><p>HTML5 Media Controller - Wrapper for HTML5 Media API</p></div><p>DEFINED IN: <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L18">html5.js line number: 18</a></p><p>EXTENDS: <a href="tech.html">tech.js</a></p><h3>Constructor</h3><pre><code>Html5( [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>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>Creates a remote text track object and returns a html track 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>options</td><td>Object</td><td>yes</td><td>The object should contain values for
kind, language, label and src (location of the WebVTT file)</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/tech/html5.js#L736">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 736</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>Creates and returns a text track 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>kind</td><td>String</td><td>yes</td><td>Text track kind (subtitles, captions, descriptions
chapters and metadata)</td></tr><tr><td>label</td><td>String</td><td>no</td><td>Label to identify the text track</td></tr><tr><td>language</td><td>String</td><td>no</td><td>Two letter language abbreviation</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/tech/html5.js#L718">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 718</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsautoplay"><h3 id="autoplayHeader">autoplay()</h3><div id="autoplayDescription" class="description"><p>Get autoplay attribute</p></div><p class="vjs-only"><em id="autoplayFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L547">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 547</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 that represents the intersection
of the time ranges for which the user agent has all
relevant media</p></div><p class="vjs-only"><em id="bufferedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L338">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 338</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodscontrols"><h3 id="controlsHeader">controls()</h3><div id="controlsDescription" class="description"><p>Get controls attribute</p></div><p class="vjs-only"><em id="controlsFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L563">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 563</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/tech/html5.js#L121">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 121</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>Get current source</p></div><p class="vjs-only"><em id="currentSrcFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L501">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 501</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodscurrentTime"><h3 id="currentTimeHeader">currentTime()</h3><div id="currentTimeDescription" class="description"><p>Get current time</p></div><p class="vjs-only"><em id="currentTimeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L307">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 307</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsdefaultMuted"><h3 id="defaultMutedHeader">defaultMuted()</h3><div id="defaultMutedDescription" class="description"><p>Get the value of the muted content attribute
This attribute has no dynamic effect, it only
controls the default state of the element</p></div><p class="vjs-only"><em id="defaultMutedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L629">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 629</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 html5 media element</p></div><p class="vjs-only"><em id="disposeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L93">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 93</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsduration"><h3 id="durationHeader">duration()</h3><div id="durationDescription" class="description"><p>Get duration</p></div><p class="vjs-only"><em id="durationFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L330">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 330</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>Get if video ended</p></div><p class="vjs-only"><em id="endedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L621">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 621</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsenterFullScreen"><h3 id="enterFullScreenHeader">enterFullScreen()</h3><div id="enterFullScreenDescription" class="description"><p>Request to enter fullscreen</p></div><p class="vjs-only"><em id="enterFullScreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L413">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 413</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodserror"><h3 id="errorHeader">error()</h3><div id="errorDescription" class="description"><p>Get error value</p></div><p class="vjs-only"><em id="errorFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L595">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 595</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>Request to exit fullscreen</p></div><p class="vjs-only"><em id="exitFullScreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L447">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 447</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsheight"><h3 id="heightHeader">height()</h3><div id="heightDescription" class="description"><p>Get player height</p></div><p class="vjs-only"><em id="heightFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L388">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 388</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>Load media into player</p></div><p class="vjs-only"><em id="loadFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L483">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 483</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsloop"><h3 id="loopHeader">loop()</h3><div id="loopDescription" class="description"><p>Get loop attribute</p></div><p class="vjs-only"><em id="loopFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L579">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 579</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsmuted"><h3 id="mutedHeader">muted()</h3><div id="mutedDescription" class="description"><p>Get if muted</p></div><p class="vjs-only"><em id="mutedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L364">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 364</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>Get the current state of network activity for the element, from
the list below
NETWORK_EMPTY (numeric value 0)
NETWORK_IDLE (numeric value 1)
NETWORK_LOADING (numeric value 2)
NETWORK_NO_SOURCE (numeric value 3)</p></div><p class="vjs-only"><em id="networkStateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L664">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 664</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 for html5 tech</p></div><p class="vjs-only"><em id="pauseFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L292">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 292</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>Paused for html5 tech</p></div><p class="vjs-only"><em id="pausedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L299">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 299</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>Play for html5 tech</p></div><p class="vjs-only"><em id="playFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L285">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 285</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsplaybackRate"><h3 id="playbackRateHeader">playbackRate()</h3><div id="playbackRateDescription" class="description"><p>Get desired speed at which the media resource is to play</p></div><p class="vjs-only"><em id="playbackRateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L639">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 639</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsposter"><h3 id="posterHeader">poster()</h3><div id="posterDescription" class="description"><p>Get poster</p></div><p class="vjs-only"><em id="posterFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L515">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 515</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodspreload"><h3 id="preloadHeader">preload()</h3><div id="preloadDescription" class="description"><p>Get preload attribute</p></div><p class="vjs-only"><em id="preloadFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L531">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 531</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>Get 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
HAVE_NOTHING (numeric value 0)
HAVE_METADATA (numeric value 1)
HAVE_CURRENT_DATA (numeric value 2)
HAVE_FUTURE_DATA (numeric value 3)
HAVE_ENOUGH_DATA (numeric value 4)</p></div><p class="vjs-only"><em id="readyStateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L677">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 677</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 remote text track from TextTrackList 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>track</td><td>TextTrackObject</td><td>yes</td><td>Texttrack object 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/tech/html5.js#L779">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 779</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 tech. Removes all sources and calls <code>load</code>.</p></div><p class="vjs-only"><em id="resetFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L492">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 492</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>Get a TimeRanges object that represents the
ranges of the media resource to which it is possible
for the user agent to seek.</p></div><p class="vjs-only"><em id="seekableFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L611">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 611</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>Get 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/tech/html5.js#L603">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 603</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetAutoplay"><h3 id="setAutoplayHeader">setAutoplay( val )</h3><div id="setAutoplayDescription" class="description"><p>Set 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>val</td><td>String</td><td>yes</td><td>Value for preload attribute</td></tr></tbody></table><p class="vjs-only"><em id="setAutoplayFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L555">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 555</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetControls"><h3 id="setControlsHeader">setControls( val )</h3><div id="setControlsDescription" class="description"><p>Set controls 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>val</td><td>String</td><td>yes</td><td>Value for controls attribute</td></tr></tbody></table><p class="vjs-only"><em id="setControlsFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L571">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 571</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetCurrentTime"><h3 id="setCurrentTimeHeader">setCurrentTime( seconds )</h3><div id="setCurrentTimeDescription" class="description"><p>Set current 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>seconds</td><td>Number</td><td>yes</td><td>Current time of video</td></tr></tbody></table><p class="vjs-only"><em id="setCurrentTimeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L315">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 315</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetLoop"><h3 id="setLoopHeader">setLoop( val )</h3><div id="setLoopDescription" class="description"><p>Set loop 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>val</td><td>String</td><td>yes</td><td>Value for loop attribute</td></tr></tbody></table><p class="vjs-only"><em id="setLoopFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L587">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 587</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetMuted"><h3 id="setMutedHeader">setMuted( If )</h3><div id="setMutedDescription" class="description"><p>Set muted</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>If</td><td>Boolean</td><td>yes</td><td>player is to be muted or note</td></tr></tbody></table><p class="vjs-only"><em id="setMutedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L372">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 372</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetPlaybackRate"><h3 id="setPlaybackRateHeader">setPlaybackRate( val )</h3><div id="setPlaybackRateDescription" class="description"><p>Set desired speed at which the media resource is to play</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>val</td><td>Number</td><td>yes</td><td>Speed at which the media resource is to play</td></tr></tbody></table><p class="vjs-only"><em id="setPlaybackRateFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L656">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 656</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetPreload"><h3 id="setPreloadHeader">setPreload( val )</h3><div id="setPreloadDescription" class="description"><p>Set 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>val</td><td>String</td><td>yes</td><td>Value for preload attribute</td></tr></tbody></table><p class="vjs-only"><em id="setPreloadFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L539">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 539</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetSrc"><h3 id="setSrcHeader">setSrc( src )<em class="deprecated"> (deprecated)</em></h3><div id="setSrcDescription" class="description"><p>Set video</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>src</td><td>Object</td><td>yes</td><td>Source object</td></tr></tbody></table><p class="vjs-only"><em id="setSrcFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L472">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 472</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetVolume"><h3 id="setVolumeHeader">setVolume( percentAsDecimal )</h3><div id="setVolumeDescription" class="description"><p>Set volume level</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>Volume percent as a decimal</td></tr></tbody></table><p class="vjs-only"><em id="setVolumeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L356">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 356</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodssrc"><h3 id="srcHeader">src( [src] )</h3><div id="srcDescription" class="description"><p>Get/set video</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>src</td><td>Object</td><td>no</td><td>Source object</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/tech/html5.js#L456">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 456</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>Get if there is fullscreen support</p></div><p class="vjs-only"><em id="supportsFullScreenFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L396">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 396</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 text tracks</p></div><p class="vjs-only"><em id="textTracksFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L708">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 708</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 height of video</p></div><p class="vjs-only"><em id="videoHeightFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L700">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 700</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 width of video</p></div><p class="vjs-only"><em id="videoWidthFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L692">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 692</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsvolume"><h3 id="volumeHeader">volume()</h3><div id="volumeDescription" class="description"><p>Get volume level</p></div><p class="vjs-only"><em id="volumeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L348">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 348</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodswidth"><h3 id="widthHeader">width()</h3><div id="widthDescription" class="description"><p>Get player width</p></div><p class="vjs-only"><em id="widthFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js#L380">https://github.com/videojs/video.js/blob/master/src/js/tech/html5.js line number: 380</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 buffered percent</p></div><p class="vjs-only"><em id="bufferedPercentFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L146">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 146</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsemulateTextTracks"><h3 id="emulateTextTracksHeader">emulateTextTracks()</h3><div id="emulateTextTracksDescription" class="description"><p>Emulate texttracks</p></div><p class="vjs-only"><em id="emulateTextTracksFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L316">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 316</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/tech/tech.js#L509">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 509</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsinitTextTrackListeners"><h3 id="initTextTrackListenersHeader">initTextTrackListeners()</h3><div id="initTextTrackListenersDescription" class="description"><p>Initialize texttrack listeners</p></div><p class="vjs-only"><em id="initTextTrackListenersFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L293">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 293</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsmanualProgressOff"><h3 id="manualProgressOffHeader">manualProgressOff()</h3><div id="manualProgressOffDescription" class="description"><p>Turn off progress events</p></div><p class="vjs-only"><em id="manualProgressOffFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L91">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 91</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsmanualProgressOn"><h3 id="manualProgressOnHeader">manualProgressOn()</h3><div id="manualProgressOnDescription" class="description"><p>Turn on progress events</p></div><p class="vjs-only"><em id="manualProgressOnFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L77">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 77</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsmanualTimeUpdatesOff"><h3 id="manualTimeUpdatesOffHeader">manualTimeUpdatesOff()</h3><div id="manualTimeUpdatesOffDescription" class="description"><p>Remove event listeners for on play and pause and tracking current time</p></div><p class="vjs-only"><em id="manualTimeUpdatesOffFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L178">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 178</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsmanualTimeUpdatesOn"><h3 id="manualTimeUpdatesOnHeader">manualTimeUpdatesOn()</h3><div id="manualTimeUpdatesOnDescription" class="description"><p>Set event listeners for on play and pause and tracking current time</p></div><p class="vjs-only"><em id="manualTimeUpdatesOnFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L166">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 166</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsonDurationChange"><h3 id="onDurationChangeHeader">onDurationChange()</h3><div id="onDurationChangeDescription" class="description"><p>Update duration</p></div><p class="vjs-only"><em id="onDurationChangeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L127">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 127</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="Methodsplayed"><h3 id="playedHeader">played()</h3><div id="playedDescription" class="description"><p>Return the time ranges that have been played through for the
current source. This implementation is incomplete. It does not
track the played time ranges, only whether the source has played
at all or not.</p></div><p class="vjs-only"><em id="playedFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L267">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 267</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsregisterComponent"><h3 id="registerComponentHeader">static registerComponent( name, tech )</h3><div id="registerComponentDescription" class="description"><p>Registers a Tech</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 Tech to register</td></tr><tr><td>tech</td><td>Object</td><td>yes</td><td>The tech 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/tech/tech.js#L488">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 488</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 remote htmltrackelements</p></div><p class="vjs-only"><em id="remoteTextTrackElsFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L383">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 383</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 remote texttracks</p></div><p class="vjs-only"><em id="remoteTextTracksFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L372">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 372</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodssetPoster"><h3 id="setPosterHeader">setPoster()</h3><div id="setPosterDescription" class="description"><p>Provide a default setPoster method for techs
Poster support for techs should be optional, so we don't want techs to
break if they don't have a way to set a poster.</p></div><p class="vjs-only"><em id="setPosterFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L453">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 453</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsstopTrackingCurrentTime"><h3 id="stopTrackingCurrentTimeHeader">stopTrackingCurrentTime()</h3><div id="stopTrackingCurrentTimeDescription" class="description"><p>Turn off play progress tracking (when paused or dragging)</p></div><p class="vjs-only"><em id="stopTrackingCurrentTimeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L202">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 202</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodsstopTrackingProgress"><h3 id="stopTrackingProgressHeader">stopTrackingProgress()</h3><div id="stopTrackingProgressDescription" class="description"><p>Stops tracking progress by clearing progress interval</p></div><p class="vjs-only"><em id="stopTrackingProgressFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L156">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 156</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodstrackCurrentTime"><h3 id="trackCurrentTimeHeader">trackCurrentTime()</h3><div id="trackCurrentTimeDescription" class="description"><p>Tracks current time</p></div><p class="vjs-only"><em id="trackCurrentTimeFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L190">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 190</a></em></p><p><a href="#top">[back to top]</a></p></div><div id="MethodstrackProgress"><h3 id="trackProgressHeader">trackProgress()</h3><div id="trackProgressDescription" class="description"><p>Track progress</p></div><p class="vjs-only"><em id="trackProgressFooter">Defined in <a href="https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js#L103">https://github.com/videojs/video.js/blob/master/src/js/tech/tech.js line number: 103</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="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="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></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