Extends

• Component

Members

featuresFullscreenResize :boolean

Boolean indicating whether the Tech supports fullscreen resize control. Resizing plugins using request fullscreen reloads the plugin

featuresMuteControl :boolean

Boolean indicating whether the Tech supports muting volume.

featuresNativeTextTracks :boolean

Boolean indicating whether the Tech supports the native TextTracks. This will help us integrate with native TextTracks if the browser supports them.

featuresPlaybackRate :boolean

featuresProgressEvents :boolean

Boolean indicating whether the Tech supports the progress event. This will be used to determine if Tech#manualProgressOn should be called.

featuresSourceset :boolean

featuresTimeupdateEvents :boolean

Boolean indicating whether the Tech supports the timeupdate event. This will be used to determine if Tech#manualTimeUpdates should be called.

featuresVideoFrameCallback :boolean

Boolean indicating whether the Tech supports requestVideoFrameCallback.

featuresVolumeControl :boolean

Boolean indicating whether the Tech supports volume control.

Methods

$(selector, contextopt) → {Element|null}

Find a single DOM element matching a selector. This can be within the Components contentEl() or another custom context.

See

• Information on CSS Selectors

$$(selector, contextopt) → {NodeList}

Finds all DOM element matching a selector. This can be within the Components contentEl() or another custom context.

See

• Information on CSS Selectors

addChild(child, optionsopt, indexopt) → {Component}

Add a child Component inside the current Component.

addClass(…classesToAdd)

Add a CSS class name to the Components element.

addRemoteTextTrack(options, manualCleanupopt) → {HTMLTrackElement}

addTextTrack(kind, labelopt, languageopt) → {TextTrack}

Create and returns a remote TextTrack object.

addWebVttScript_()

Emulate TextTracks using vtt.js if necessary

audioTracks() → {AudioTrackList}

blur()

Remove the focus from this component

buffered() → {TimeRange}

Get and create a TimeRange object for buffering.

bufferedPercent() → {number}

Get the percentage of the current video that is currently buffered.

(abstract) buildCSSClass() → {string}

Builds the default DOM class name. Should be overridden by sub-components.

(abstract) canPlayType(_type) → {string}

cancelAnimationFrame(id) → {number}

cancelNamedAnimationFrame(name)

Cancels a current named animation frame if it exists.

cancelVideoFrameCallback(id)

A fallback implementation of cancelVideoFrameCallback

children() → {Array}

Get an array of all child components

cleanupAutoTextTracks()

Remove any TextTracks added via addRemoteTextTrack that are flagged for automatic garbage collection

clearInterval(intervalId) → {number}

Clears an interval that gets created via window.setInterval or Component#setInterval. If you set an interval via Component#setInterval use this function instead of window.clearInterval. If you don't your dispose listener will not get cleaned up until Component#dispose!

clearTimeout(timeoutId) → {number}

Clears a timeout that gets created via window.setTimeout or Component#setTimeout. If you set a timeout via Component#setTimeout use this function instead of window.clearTimout. If you don't your dispose listener will not get cleaned up until Component#dispose!

clearTracks(types)

contentEl() → {Element}

Return the Components DOM element. This is where children get inserted. This will usually be the the same as the element returned in Component#el.

createEl(tagNameopt, propertiesopt, attributesopt) → {Element}

Create the Components DOM element.

createRemoteTextTrack(options) → {HTMLTrackElement}

(abstract) crossOrigin()

Get the value of crossOrigin from the tech.

currentDimension(widthOrHeight) → {number}

currentDimensions() → {Component~DimensionObject}

currentHeight() → {number}

currentWidth() → {number}

dimension(widthOrHeight, numopt, skipListenersopt) → {number|undefined}

dimensions(width, height)

Set both the width and height of the Component element at the same time.

(abstract) disablePictureInPicture()

A method to check for the value of the 'disablePictureInPicture'

dispose()

el() → {Element}

Get the Components DOM element

(protected) emitTapEvents()

Emit a 'tap' events when touch event support gets detected. This gets used to support toggling the controls through a tap on the video. They get enabled because every sub-component would have extra overhead otherwise.

emulateTextTracks()

Emulate texttracks

enableTouchActivity()

error(erropt) → {MediaError|null}

Get or set an error on the Tech.

focus()

Set the focus to this component

getAttribute(attribute) → {string|null}

Get the value of an attribute on the Components element.

getChild(name) → {Component|undefined}

Returns the child Component with the given name.

getChildById(id) → {Component|undefined}

Returns the child Component with the given id.

getDescendant(…names) → {Component|undefined}

Returns the descendant Component following the givent descendant names. For instance ['foo', 'bar', 'baz'] would try to get 'foo' on the current component, 'bar' on the 'foo' component and 'baz' on the 'bar' component and return undefined if any of those don't exist.

getIsAvailableToBeFocused(el) → {boolean}

Determine whether or not this component is currently visible/enabled/etc...

getIsFocusable(el) → {boolean}

Determine whether or not this component can be considered as focusable component.

getPositions() → {Object}

Retrieves the position and size information of the component's element.

(abstract) getVideoPlaybackQuality() → {Object}

Gets available media playback quality metrics as specified by the W3C's Media Playback Quality API.

handleKeyDown(event)

When this Component receives a keydown event which it does not process, it passes the event to the Player for handling.

handleKeyPress(event)

Many components used to have a handleKeyPress method, which was poorly named because it listened to a keydown event. This method name now delegates to handleKeyDown. This means anyone calling handleKeyPress will not see their method calls stop working.

(abstract) handleLanguagechange()

Handles language change for the player in components. Should be overridden by sub-components.

hasClass(classToCheck) → {boolean}

Check if a component's element has a CSS class name.

height(numopt, skipListenersopt) → {number|undefined}

Get or set the height of the component based upon the CSS styles. See Component#dimension for more detailed information.

hide()

Hide the Components element if it is currently showing by adding the 'vjs-hidden` class name to it.

id() → {string}

Get this Components ID

initChildren()

Add and initialize default child Components based upon options.

initTrackListeners()

isDisposed() → {boolean}

Determine whether or not this component has been disposed.

localize(string, tokensopt, defaultValueopt) → {string}

{
  "progress bar timing: currentTime={1} duration={2}": "{1} of {2}"
}

this.localize('progress bar timing: currentTime={1} duration{2}',
              [this.player_.currentTime(), this.player_.duration()],
              '{1} of {2}');

manualProgressOff()

manualProgressOn()

Polyfill the progress event for browsers that don't support it natively.

manualTimeUpdatesOff()

manualTimeUpdatesOn()

Polyfill the timeupdate event for browsers that don't support it.

name() → {string}

Get the Components name. The name gets used to reference the Component and is set during registration.

onDurationChange(event)

Update our internal duration on a durationchange event by calling Tech#duration.

options(obj) → {Object}

(abstract) overrideNativeAudioTracks(override)

Attempt to force override of native audio tracks.

(abstract) overrideNativeVideoTracks(override)

Attempt to force override of native video tracks.

(abstract) play()

Start playback

played() → {TimeRange}

player() → {Player}

Return the Player that the Component has attached to.

(abstract) playsinline()

A method to check for the presence of the 'playsinline'

ready(fn)

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.

remoteTextTrackEls() → {HtmlTrackElementList}

remoteTextTracks() → {TextTrackList}

removeAttribute(attribute)

Remove an attribute from the Components element.

removeChild(component)

Remove a child Component from this Components list of children. Also removes the child Components element from this Components element.

removeClass(…classesToRemove)

Remove a CSS class name from the Components element.

removeRemoteTextTrack(track)

Remove a remote text track from the remote TextTrackList.

requestAnimationFrame(fn) → {number}

requestNamedAnimationFrame(name, fn)

Request an animation frame, but only one named animation frame will be queued. Another will never be added until the previous one finishes.

(abstract) requestPictureInPicture() → {Promise|undefined}

Attempt to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device.

requestVideoFrameCallback(cb) → {number}

A fallback implementation of requestVideoFrameCallback using requestAnimationFrame

(abstract) reset()

Reset the tech, which will removes all sources and reset the internal readyState.

(abstract) scrubbing()

Get whether we are scrubbing or not

setAttribute(attribute, value)

Set the value of an attribute on the Component's element

(abstract) setCrossOrigin(crossOrigin)

Set the value of crossOrigin on the tech.

setCurrentTime(_seconds)

(abstract) setDisablePictureInPicture()

A method to set or unset the 'disablePictureInPicture'

setIcon(iconName, elopt) → {Element}

Adds an SVG icon element to another element or component.

setInterval(fn, interval) → {number}

(abstract) setPlaysinline()

A method to set or unset the 'playsinline'

(abstract) setPoster()

A method to set a poster from a Tech.

(abstract) setScrubbing(_isScrubbing)

Set whether we are scrubbing or not

setTimeout(fn, timeout) → {number}

show()

Show the Components element if it is hidden by removing the 'vjs-hidden' class name from it.

stopTrackingCurrentTime()

Stop the interval function created in Tech#trackCurrentTime so that the timeupdate event is no longer triggered.

stopTrackingProgress()

Turn off the polyfill for progress events that was created in Tech#manualProgressOn Stop manually tracking progress events by clearing the interval that was set in Tech#trackProgress.

textTracks() → {TextTrackList}

toggleClass(classToToggle, predicateopt)

trackCurrentTime()

Sets up an interval function to track current time and trigger timeupdate every 250 milliseconds.

trackProgress(event)

triggerReady()

Trigger all the ready listeners for this Component.

triggerSourceset(src)

A special function to trigger source set in a way that will allow player to re-trigger if the player or tech are not ready yet.

videoTracks() → {VideoTrackList}

width(numopt, skipListenersopt) → {number|undefined}

Get or set the width of the component based upon the CSS styles. See Component#dimension for more detailed information.

(static) canPlaySource(srcObj, options) → {string}

Check if the tech can support the given source

(static) canPlayType(_type) → {string}

(static) getTech(name) → {Tech|undefined}

Get a Tech from the shared list by name.

(static) registerTech(name, tech)

Registers a Tech into a shared list for videojs.

(static) withSourceHandlers(_Tech)

A functional mixin for techs that want to use the Source Handler pattern. Source handlers are scripts for handling specific formats. The source handler pattern is used for adaptive formats (HLS, DASH) that manually load video data and feed it into a Source Buffer (Media Source Extensions) Example: Tech.withSourceHandlers.call(MyTech);

Mixes In

• Tech~SourceHandlerAdditions

Events

audiotrackchange

Triggered when tracks are added or removed on the Tech AudioTrackList

componentresize

Triggered when a component is resized.

dispose

Triggered when a Component is disposed.

progress

See Player#progress

ready

Triggered when a Component is ready.

sourceset

Fired when the source is set on the tech causing the media element to reload.

tap

Triggered when a Component is tapped.

texttrackchange

Triggered when tracks are added or removed on the Tech TextTrackList

timeupdate

Trigger timeupdate because we're done seeking and the time has changed. This is particularly useful for if the player is paused to time the time displays.

timeupdate

Triggered at an interval of 250ms to indicated that time is passing in the video.

timeupdate

A manual timeupdate event.

videotrackchange

Triggered when tracks are added or removed on the Tech VideoTrackList

vttjsloaded

Fired when vtt.js is loaded.

vttjsloaded

Fired when vtt.js was not loaded due to an error