var myPlayer = videojs('example_video_1');

Player( tag,[options],[ready] )

// Number of different ranges of time have been buffered. Usually 1.
    numberOfRanges = bufferedTimeRange.length,
    // Time in seconds when the first range starts. Usually 0.
    firstRangeStart = bufferedTimeRange.start(0),
    // Time in seconds when the first range ends
    firstRangeEnd = bufferedTimeRange.end(0),
    // Length in seconds of the first time range
    firstRangeLength = firstRangeEnd - firstRangeStart;

var howMuchIsDownloaded = myPlayer.bufferedPercent();

// get
    var whereYouAt = myPlayer.currentTime();
    // set
    myPlayer.currentTime(120); // 2 minutes into the video

myPlayer.dispose();

var lengthOfVideo = myPlayer.duration();

myPlayer.exitFullscreen();

// get
    var fullscreenOrNot = myPlayer.isFullscreen();
    // set
    myPlayer.isFullscreen(true); // tell the player it's in fullscreen

// get
    var isVolumeMuted = myPlayer.muted();
    // set
    myPlayer.muted(true); // mute the volume

myPlayer.pause();

var isPaused = myPlayer.paused();
    var isPlaying = !myPlayer.paused();

myPlayer.play();

// get
    var currentPoster = myPlayer.poster();
    // set
    myPlayer.poster('http://example.com/myImage.jpg');

var timeLeft = myPlayer.remainingTime();

myPlayer.requestFullscreen();

myPlayer.src("http://www.example.com/path/to/video.mp4");

myPlayer.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });

myPlayer.src([
      { type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" },
      { type: "video/webm", src: "http://www.example.com/path/to/video.webm" },
      { type: "video/ogg", src: "http://www.example.com/path/to/video.ogv" }
    ]);

// get
    var howLoudIsIt = myPlayer.volume();
    // set
    myPlayer.volume(0.5); // Set volume to half

myComponent.el();
    // -> 
    myComponent.children();
    // [empty array]

    var myButton = myComponent.addChild('MyButton');
    // -> 
myButton
    // -> myButton === myComponent.children()[0];Pass in options for child constructors and options for children of the child
    var myButton = myComponent.addChild('MyButton', {
      text: 'Press Me',
      buttonChildExample: {
        buttonChildOption: true
      }
    });

Parameters

name
Type
Required
Description

child
String|Component
yes
The class name or instance of a child to add

options
Object
no
Options, including options to be passed to children of the child.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 315
[back to top]

addClass( classToAdd )
Add a CSS class name to the component's element
Parameters

name
Type
Required
Description

classToAdd
String
yes
Classname to add

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 892
[back to top]

buildCSSClass()
Allows sub components to stack CSS class names
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 593
[back to top]

children()

Get an array of all child components
    var kids = myComponent.children();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 282
[back to top]

clearInterval( intervalId )
Clears an interval and removes the associated dispose listener
Parameters

name
Type
Required
Description

intervalId
Number
yes
The id of the interval to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1295
[back to top]

clearTimeout( timeoutId )
Clears a timeout and removes the associated dispose listener
Parameters

name
Type
Required
Description

timeoutId
Number
yes
The id of the timeout to clear

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1252
[back to top]

contentEl()
Return the component's DOM element where children are inserted.
Will either be the same as el() or a new element defined in createEl().
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 245
[back to top]

dimensions( width, height )
Set both width and height at the same time
Parameters

name
Type
Required
Description

width
Number|String
yes
Width of player

height
Number|String
yes
Height of player

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1015
[back to top]

el()

Get the component's DOM element
    var domEl = myComponent.el();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 195
[back to top]

enableTouchActivity()
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.
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1174
[back to top]

static extend( props ) (deprecated)

Sets up the constructor using the supplied init method
or uses the init of the parent object
Parameters

name
Type
Required
Description

props
Object
yes
An object of properties

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1350
[back to top]

getChild()
Returns a child component with the provided name
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 305
[back to top]

getChildById()
Returns a child component with the provided ID
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 295
[back to top]

static getComponent( name )
Gets a component by name
Parameters

name
Type
Required
Description

name
String
yes
Name of the component to get

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1331
[back to top]

hasClass( classToCheck )
Check if a component's element has a CSS class name
Parameters

name
Type
Required
Description

classToCheck
String
yes
Classname to check

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 881
[back to top]

hide()
Hide the component element if currently showing
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 944
[back to top]

id()

Get the component's ID
    var id = myComponent.id();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 256
[back to top]

initChildren()

Add and initialize default child components from options
    // 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
      }
    });
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.
    var myComp = new MyComponent(player, {
      children: [
        'button',
        {
          name: 'button',
          someOtherOption: true
        },
        {
          name: 'button',
          someOtherOption: false
        }
      ]
    });

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 455
[back to top]

name()

Get the component's name. The name is often used to reference the component.
    var name = myComponent.name();

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 269
[back to top]

off( first, second, [third] )

Remove an event listener from this component's element
    myComponent.off('eventType', myFunc);
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 off to remove listeners that were added to other
elements or components using myComponent.on(otherComponent....
In this case both the event type and listener function are REQUIRED.
    myComponent.off(otherElement, 'eventType', myFunc);
    myComponent.off(otherComponent, 'eventType', myFunc);

Parameters

name
Type
Required
Description

first
String|Component
yes
The event type or other component

second
function|String
yes
The listener function or event type

third
function
no
The listener for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 680
[back to top]

on( first, second, third )

Add an event listener to this component's element
    var myFunc = function(){
      var myComponent = this;
      // Do something when the event is fired
    };

    myComponent.on('eventType', myFunc);
The context of myFunc will be myComponent unless previously bound.
Alternatively, you can add a listener to another element or component.
    myComponent.on(otherElement, 'eventName', myFunc);
    myComponent.on(otherComponent, 'eventName', myFunc);
The benefit of using this over VjsEvents.on(otherElement, 'eventName', myFunc)
and otherComponent.on('eventName', myFunc) 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.
NOTE: 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 myComponent.trigger(el, 'dispose') on it to clean up
references to it and allow the browser to garbage collect it.

Parameters

name
Type
Required
Description

first
String|Component
yes
The event type or other component

second
function|String
yes
The event handler or event type

third
function
yes
The event handler

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 605
[back to top]

one( first, second, [third] )

Add an event listener to be triggered only once and then removed
    myComponent.one('eventName', myFunc);
Alternatively you can add a listener to another element or component
that will be triggered only once.
    myComponent.one(otherElement, 'eventName', myFunc);
    myComponent.one(otherComponent, 'eventName', myFunc);

Parameters

name
Type
Required
Description

first
String|Component
yes
The event type or other component

second
function|String
yes
The listener function or event type

third
function
no
The listener function for other component

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 728
[back to top]

options( obj )

Deep merge of options objects
Whenever a property is an object on both options objects
the two properties will be merged using mergeOptions.
    Parent.prototype.options_ = {
      optionSet: {
        'childOne': { 'foo': 'bar', 'asdf': 'fdsa' },
        'childTwo': {},
        'childThree': {}
      }
    }
    newOptions = {
      optionSet: {
        'childOne': { 'foo': 'baz', 'abc': '123' }
        'childTwo': null,
        'childFour': {}
      }
    }

    this.options(newOptions);
RESULT
    {
      optionSet: {
        'childOne': { 'foo': 'baz', 'asdf': 'fdsa', 'abc': '123' },
        'childTwo': null, // Disabled. Won't be initialized.
        'childThree': {},
        'childFour': {}
      }
    }

Parameters

name
Type
Required
Description

obj
Object
yes
Object of new option values

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145
[back to top]

player()
Return the component's player
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 135
[back to top]

ready( fn, sync )
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.
Parameters

name
Type
Required
Description

fn
function
yes
Ready listener

sync
Boolean
yes
Exec the listener synchronously if component is ready

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 787
[back to top]

static registerComponent( name, comp )
Registers a component
Parameters

name
Type
Required
Description

name
String
yes
Name of the component to register

comp
Object
yes
The component to register

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1314
[back to top]

removeChild( component )
Remove a child component from this component's list of children, and the
child component's element from this component's element
Parameters

name
Type
Required
Description

component
Component
yes
Component to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 415
[back to top]

removeClass( classToRemove )
Remove a CSS class name from the component's element
Parameters

name
Type
Required
Description

classToRemove
String
yes
Classname to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 904
[back to top]

setInterval( fn, interval )
Creates an interval and sets up disposal automatically.
Parameters

name
Type
Required
Description

fn
function
yes
The function to run every N seconds.

interval
Number
yes
Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1271
[back to top]

setTimeout( fn, timeout )
Creates timeout and sets up disposal automatically.
Parameters

name
Type
Required
Description

fn
function
yes
The function to run after the timeout.

timeout
Number
yes
Number of ms to delay before executing specified function.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 1227
[back to top]

show()
Show the component element if hidden
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 933
[back to top]

toggleClass( classToToggle, [predicate] )
Add or remove a CSS class name from the component's element
Parameters

name
Type
Required
Description

classToToggle
String

predicate
Boolean|function
no
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.

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 916
[back to top]

trigger( event, [hash] )

Trigger an event on an element
    myComponent.trigger('eventName');
    myComponent.trigger({'type':'eventName'});
    myComponent.trigger('eventName', {data: 'some data'});
    myComponent.trigger({'type':'eventName'}, {data: 'some data'});

Parameters

name
Type
Required
Description

event
Event|Object|String
yes
A string (the type) or an event object with a type attribute

hash
Object
no
data hash to pass along with the event

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768
[back to top]

triggerReady()
Trigger the ready listeners
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814
[back to top]

Events

ended
Fired when video playback ends
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2801
[back to top]

error
Fired when an error occurs
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2815
[back to top]

loadeddata
Fired when the player has downloaded data at the current playback position
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2771
[back to top]

loadedmetadata
Fired when the player has initial duration and dimension information
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2764
[back to top]

timeupdate
Fired when the current playback position has changed *
During playback this is fired every 15-250 milliseconds, depending on the
playback technology in use.
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2792
[back to top]

useractive
Fired when the user is active, e.g. moves the mouse over the player
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2778
[back to top]

userinactive
Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2785
[back to top]

volumechange
Fired when the volume changes
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2808
[back to top]