Global

Methods


$(selector [, context])

Finds a single DOM element matching selector within the optional
context of another DOM element (defaulting to document).

Parameters:
Name Type Argument Default Description
selector String

A valid CSS selector, which will be passed to querySelector.

context Element | String <optional>
document

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 document.

Returns:
Type
Element | null

$$(selector [, context])

Finds a all DOM elements matching selector within the optional
context of another DOM element (defaulting to document).

Parameters:
Name Type Argument Default Description
selector String

A valid CSS selector, which will be passed to querySelectorAll.

context Element | String <optional>
document

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 document.

Returns:
Type
NodeList

addElClass(element, classToAdd)

Add a CSS class name to an element

Parameters:
Name Type Description
element Element

Element to add class name to

classToAdd String

Classname to add


appendContent(el, content)

Normalizes and appends content to an element.

Parameters:
Name Type Description
el Element
content String | Element | TextNode | Array | function

See: normalizeContent

Returns:
Type
Element

blockTextSelection()

Attempt to block the ability to select text while dragging controls

Returns:
Type
Boolean

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

buildCSSClass()

Allow sub components to stack CSS class names

Returns:

The constructed class name

Type
String

canHandleSource(source)

Checks if we can handle source from source object

Parameters:
Name Type Description
source Object

Source for playback

Returns:
Type
probably | maybe | *

canHandleSource(source)

Checks if we can handle source from source object

Parameters:
Name Type Description
source Object

Source for playback

Returns:
Type
probably | maybe | *

canHandleSource(source)

Checks if we can handle source from source object

Parameters:
Name Type Description
source Object

Source for playback

Returns:
Type
probably | maybe | *

canPlayType(type)

Determine if we can play type

Parameters:
Name Type Description
type String

mime-type

Returns:
Type
probably | ''

canPlayType(type)

Determine if we can play type

Parameters:
Name Type Description
type String

mime-type

Returns:
Type
probably | ''

canPlayType(type)

Determine if we can play type

Parameters:
Name Type Description
type String

mime-type

Returns:
Type
probably | ''

classRegExp(className)

Produce a regular expression for matching a class name.

Parameters:
Name Type Description
className String
Returns:
Type
RegExp

createEl()

Create the component's DOM element

Returns:
Type
Element

createEl()

Create the component's DOM element

Returns:
Type
Element

createEl( [tagName] [, properties] [, attributes])

Creates an element and applies properties.

Parameters:
Name Type Argument Default Description
tagName String <optional>
'div'

Name of tag to be created.

properties Object <optional>
{}

Element properties to be applied.

attributes Object <optional>
{}

Element attributes to be applied.

Returns:
Type
Element

createEl()

Create the component's DOM element

Returns:
Type
Element

createEl()

Create the component's DOM element

Returns:
Type
Element

createEl()

Create the component's DOM element

Returns:
Type
Element

createEl()

Create the component's DOM element

Returns:
Type
Element

createItems()

Create caption menu items

Returns:

Array of menu items

Type
Array

emptyEl(el)

Empties the contents of an element.

Parameters:
Name Type Description
el Element
Returns:
Type
Element

findElPosition(el)

Offset Left
getBoundingClientRect technique from
John Resig http://ejohn.org/blog/getboundingclientrect-is-awesome/

Parameters:
Name Type Description
el Element

Element from which to get offset

Returns:
Type
Object

getEl(id)

Shorthand for document.getElementById()
Also allows for CSS (jQuery) ID syntax. But nothing other than IDs.

Parameters:
Name Type Description
id String

Element ID

Returns:

Element with supplied ID

Type
Element

getElData(el)

Returns the cache object where data for an element is stored

Parameters:
Name Type Description
el Element

Element to store data for.

Returns:
Type
Object

getPercent()

Get percentage of video played

Returns:

Percentage played

Type
Number

getPointerPosition(el, event)

Get pointer position in element
Returns an object with x and y coordinates.
The base on the coordinates are the bottom left of the element.

Parameters:
Name Type Description
el Element

Element on which to get the pointer position on

event Event

Event object

Returns:

This object will have x and y coordinates corresponding to the mouse position

Type
Object

handleClick()

Handle click on mute


handleClick()

Handle click on text track


handleMouseDown()

Handle mouse down on seek bar


handleMouseMove()

Handle mouse move on seek bar


handleMouseUp()

Handle mouse up on seek bar


handleSource(source, tech)

Handle source

Parameters:
Name Type Description
source Object

Source for playback

tech Tech

Tech object to use for playback


handleSource(source, tech)

Handle source

Parameters:
Name Type Description
source Object

Source for playback

tech Tech

Tech object to use for playback


handleSource(source)

Handle source

Source handler for dash playback.

Parameters:
Name Type Description
source Object

Source object for playback


handleSource(source, tech)

Handle source

Parameters:
Name Type Description
source Object

Source for playback

tech Tech

Tech object to use for playback


handleSource(source)

Handle source

Source handler for dash playback.

Parameters:
Name Type Description
source Object

Source object for playback


handleTracksChange()

Handle text track change


handleTracksChange(event)

Handle text track change

Parameters:
Name Type Description
event Object

Event object


hasElClass(element, classToCheck)

Check if an element has a CSS class

Parameters:
Name Type Description
element Element

Element to check

classToCheck String

Classname to check


insertContent(el, content)

Normalizes and inserts content into an element; this is identical to
appendContent(), except it empties the element first.

Parameters:
Name Type Description
el Element
content String | Element | TextNode | Array | function

See: normalizeContent

Returns:
Type
Element

isEl(value)

Determines, via duck typing, whether or not a value is a DOM element.

Parameters:
Name Type Description
value Mixed
Returns:
Type
Boolean

isNonBlankString(str)

Detect if a value is a string with any non-whitespace characters.

Parameters:
Name Type Description
str String
Returns:
Type
Boolean

isTextNode(value)

Determines, via duck typing, whether or not a value is a text node.

Parameters:
Name Type Description
value Mixed
Returns:
Type
Boolean

log()

Log plain debug messages


newGUID()

Get the next unique ID

Returns:
Type
String

normalizeContent(content)

Normalizes content for eventual insertion into the DOM.

This allows a wide range of content definition methods, but protects
from falling into the trap of simply writing to innerHTML, which is
an XSS concern.

The content for an element can be passed in multiple types and
combinations, whose behavior is as follows:

  • String
    Normalized into a text node.

  • Element, TextNode
    Passed through.

  • Array
    A one-dimensional array of strings, elements, nodes, or functions (which
    return single strings, elements, or nodes).

  • Function
    If the sole argument, is expected to produce a string, element,
    node, or array.

Parameters:
Name Type Description
content String | Element | TextNode | Array | function
Returns:
Type
Array

off(elem, type, fn)

Removes event listeners from an element

Parameters:
Name Type Description
elem Element | Object

Object to remove listeners from

type String | Array

Type of listener to remove. Don't include to remove all events from element.

fn function

Specific listener to remove. Don't include to remove listeners for an event type.


on(elem, type, fn)

Add an event listener to element
It stores the handler function in a separate cache object
and adds a generic handler to the element's event,
along with a unique id (guid) to the element.

Parameters:
Name Type Description
elem Element | Object

Element or object to bind listeners to

type String | Array

Type of event to bind to.

fn function

Event listener.


one(elem, type, fn)

Trigger a listener only once for an event

Parameters:
Name Type Description
elem Element | Object

Element or object to

type String | Array

Name/type of event

fn function

Event handler function


onSeekInput_()

Collect input events and seek when things have been stable for 125ms


onSeekInputTimeout_()

on Seek Input Timeout


plugin(name, fn)

Create a Video.js player plugin
Plugins are only initialized when options for the plugin are included
in the player options, or the plugin function on the player instance is
called.
See the plugin guide in the docs for a more detailed example

    // Make a plugin that alerts when the player plays
    videojs.plugin('myPlugin', function(myPluginOptions) {
      myPluginOptions = myPluginOptions || {};

      var player = this;
      var alertText = myPluginOptions.text || 'Player is playing!'

      player.on('play', function(){
        alert(alertText);
      });
    });
    // USAGE EXAMPLES
    // EXAMPLE 1: New player with plugin options, call plugin immediately
    var player1 = videojs('idOne', {
      myPlugin: {
        text: 'Custom text!'
      }
    });
    // Click play
    // --> Should alert 'Custom text!'
    // EXAMPLE 3: New player, initialize plugin later
    var player3 = videojs('idThree');
    // Click play
    // --> NO ALERT
    // Click pause
    // Initialize plugin using the plugin function on the player instance
    player3.myPlugin({
      text: 'Plugin added later!'
    });
    // Click play
    // --> Should alert 'Plugin added later!'
Parameters:
Name Type Description
name String

The plugin name

fn function

The plugin function that will be called with options

Mixes In:
  • videojs

removeElClass(element, classToRemove)

Remove a CSS class name from an element

Parameters:
Name Type Description
element Element

Element to remove from class name

classToRemove String

Classname to remove


setCurrentTime(time)

Set current time

Parameters:
Name Type Description
time Number

Current time of video


setCurrentTime(time)

Set current time

Parameters:
Name Type Description
time Number

Current time of video


setSrc( [src])

Set video

Parameters:
Name Type Argument Description
src Object <optional>

Source object


stepBack()

Move more quickly rewind for keyboard-only users


stepForward()

Move more quickly fast forward for keyboard-only users


textContent(el, text)

Injects text into an element, replacing any existing contents entirely.

Parameters:
Name Type Description
el Element
text String
Returns:
Type
Element

throwIfWhitespace(str)

Throws an error if the passed string has whitespace. This is used by
class methods to be relatively consistent with the classList API.

Parameters:
Name Type Description
str String
Returns:
Type
Boolean

toggleElClass(element, classToToggle [, predicate])

Adds or removes a CSS class name on an element depending on an optional
condition or the presence/absence of the class name.

Parameters:
Name Type Argument Description
element Element
classToToggle String
predicate Boolean | function <optional>

Can be a function that returns a Boolean. If true, the class
will be added; if false, the class will be removed. If not
given, the class will be added if not present and vice versa.


trigger(elem, event [, hash])

Trigger an event for an element

Parameters:
Name Type Argument Description
elem Element | Object

Element to trigger an event on

event Event | Object | String

A string (the type) or an event object with a type attribute

hash Object <optional>

data hash to pass along with the event

Returns:

Returned only if default was prevented

Type
Boolean

unblockTextSelection()

Turn off text selection blocking

Returns:
Type
Boolean

update()

Update caption menu items


updateARIAAttributes()

Update ARIA accessibility attributes


updateContent()

Update time display


updateContent()

Update time display


updateContent()

Update time display

Events


ABORT

Fired when playback is aborted


ADD_TRACK

Fired when an AudioTrack object has been added to an AudioTrackList object.


BEFORE_MODAL_CLOSE

Used when a modal html view will be closed. Fired by VideoJS on the ModalDialog


BEFORE_MODAL_EMPTY

Used when a modal html view will clear its content. Fired by VideoJS on the ModalDialog


BEFORE_MODAL_FILL

Used when a modal html view will be populated with html content. Fired by VideoJS on the ModalDialog


BEFORE_MODAL_OPEN

Used when a modal html view is about to be opened. Fired by VideoJS on the ModalDialog


BITRATE_CHANGED

Fired when the video bitrate changes


BLUR

Used when an html element loses focus. Fired by VideoJS on components


CAN_PLAY

Fired when the player can start playback


CAN_PLAY_THROUGH

Enough data has been loaded to play the media up to its end


CHANGE

Fired when a state changes. Used for example when an AudioTrack changes its enabled value


CLICK

Used when an html element is clicked. Fired by VideoJS on components


CLOSE

Used when something closes. Fired by VideoJS when the CloseButton closes


CONTROLS_DISABLED

When controls are disabled


CONTROLS_ENABLED

When controls are enabled


DISPOSE

Fired when the player is destroyed.


DURATION_CHANGE

Fired when the video duration changes


EMPTIED

When the current playlist is empty


ENDED

Fired when video playback ends


ENTER_FULL_WINDOW

When fullscreen isn't supported and the video will resize to the window


ERROR

Fired when an error occurs


EXIT_FULL_WINDOW

When exiting full window


FIRST_PLAY

Video is played for the first time


FOCUS

Used when an html element gains focus. Fired by VideoJS on components


FULLSCREEN_CHANGE

When the fullscreen state changes


KEY_DOWN

When a key is down


KEY_UP

When a key is up


LOAD_START

Fired when the video is starting to load


LOADED_DATA

Fired when the player has downloaded data at the current playback position


LOADED_METADATA

Fired when the player has initial duration and dimension information


METRIC_CHANGED

Fired by Dash.js when a metric changes


MODAL_CLOSE

Used when a modal html view has been closed. Fired by VideoJS on the ModalDialog


MODAL_EMPTY

Used when a modal html view has cleared its content. Fired by VideoJS on the ModalDialog


MODAL_FILL

Used when a modal html view has been populated with html content. Fired by VideoJS on the ModalDialog


MODAL_OPEN

Used when a modal html view has been opened. Fired by VideoJS on the ModalDialog


MODE_CHANGE

Fired when an AudioTrack object changes its enabled value


MOUSE_DOWN

When the mouse is down


MOUSE_MOVE

When the mouse is moved


MOUSE_UP

When the mouse is up


PAUSE

Fired when the player is paused


PLAY

Fired when the player will start playing


PLAYING

Fired when the player has starting playback


POSTER_CHANGE

When the video poster changes


PROGRESS

When the user agent is downloading media data


RATE_CHANGE

When the playing speed of the audio/video is changed


READY

Used when something is ready. Fired when the tech is ready


RECOVERABLE_ASSET_ERROR

Fired when a recoverable asset error occurs


REMOVE_TRACK

Fired when an AudioTrack object has been removed from an AudioTrackList object.


RESIZE

Used when an html element resizes. Fired when the video element changes size


SEEKED

Fired when the player seeked to a different point in time


SEEKING

Fired when the player started seeking


SLIDER_ACTIVE

Fired when a VideoJS slider is active


SLIDER_INACTIVE

Fired when a VideoJS slider is inactive


STALLED

When the player is trying to get media data, but data is not available


SUSPEND

When the player is suspended from downloading media data


TAP

Used when an html element is tapped. Fired by VideoJS on components


TEXT_TRACK_CHANGE

When the text track has been changed


TIME_UPDATE

Fired when the current playback position has changed


TOUCH_CANCEL

When a touch point has been disrupted


TOUCH_END

When touch ended


TOUCH_LEAVE

When a touch point is moved off the interactive area of an element


TOUCH_MOVE

When touch moved


TOUCH_START

When touch started


TRACK_CHANGE

When the track has been changed


USER_ACTIVE

Fired when the user is active


USERIN_ACTIVE

Fired when the user is inactive


USING_CUSTOM_CONTROLS

When custom controls are being used


USING_NATIVE_CONTROLS

When native tech or device controls are being used


VOLUME_CHANGE

Fired when the volume changes


WAITING

Fired when the player starts buffering