Player

Add a remote text track

Add a text track In addition to the W3C settings we allow adding additional info through options. http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack

Get/Set the aspect ratio

Get or set the autoplay attribute.

Get a TimeRange object with the times of the video that have been downloaded If you just want the percent of the video that's been downloaded, use bufferedPercent.

    // 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;

Get the ending time of the last buffered time range This is used in the progress bar to encapsulate all time ranges.

Get the percent (as a decimal) of the video that's been downloaded

    var howMuchIsDownloaded = myPlayer.bufferedPercent();

0 means none, 1 means all. (This method isn't in the HTML5 spec, but it's very convenient)

Check whether the player can play a given mimetype

Get or set whether or not the controls are showing.

Create the component's DOM element

Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4 Can be used in conjuction with currentType to assist in rebuilding the current source object.

Get or set the current time (in seconds)

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

Get the current source type e.g. video/mp4 This can allow you rebuild the current source object so that you could load the same source and tech later

Get/set dimension for player

Destroys the video player and does any necessary cleanup

    myPlayer.dispose();

This is especially helpful if you are dynamically adding and removing videos to/from the DOM.

Get the length in time of the video in seconds

    var lengthOfVideo = myPlayer.duration();

NOTE: The video must have started loading before the duration can be known, and in the case of Flash, may not be known until the video starts playing.

Returns whether or not the player is in the "ended" state.

When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us.

Set or get the current MediaError

Return the video to its normal size after having been in full screen mode

    myPlayer.exitFullscreen();

Exit full window

Add/remove the vjs-fluid class

Check for call to either exit full window or full screen on ESC key

Get object for cached values.

Gets tag settings

Get/set player height

player's constructor function

Check if the player is in fullscreen mode

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

NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official property and instead document.fullscreenElement is used. But isFullscreen is still a valuable property for internal player workings.

The player's language code NOTE: The language should be set in the player options if you want the the controls to be built with a specific language. Changing the lanugage later will not update controls text.

Get the player's language dictionary Merge every time, because a newly added plugin might call videojs.addLanguage() at any time Languages specified directly in the player options have precedence

Begin loading the src data.

Get or set the loop attribute on the video element.

Get the current muted state, or turn mute on or off

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

Returns the current state of network activity for the element, from the codes in the list below.

• NETWORK_EMPTY (numeric value 0) The element has not yet been initialised. All attributes are in their initial states.
• NETWORK_IDLE (numeric value 1) The element's resource selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
• NETWORK_LOADING (numeric value 2) The user agent is actively trying to download data.
• NETWORK_NO_SOURCE (numeric value 3) The element's resource selection algorithm is active, but it has not yet found a resource to use.

Pause the video playback

    myPlayer.pause();

Check if the player is paused

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

start media playback

    myPlayer.play();

Gets or sets the current playback rate. A playback rate of 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.

Get or set the poster image source url

EXAMPLE:

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

Get or set the preload attribute

Returns a value that expresses the current state of the element with respect to rendering the current playback position, from the codes in the list below.

• HAVE_NOTHING (numeric value 0) No information regarding the media resource is available.
• HAVE_METADATA (numeric value 1) Enough of the resource has been obtained that the duration of the resource is available.
• HAVE_CURRENT_DATA (numeric value 2) Data for the immediate current playback position is available.
• HAVE_FUTURE_DATA (numeric value 3) Data for the immediate current playback position is available, as well as enough data for the user agent to advance the current playback position in the direction of playback.
• HAVE_ENOUGH_DATA (numeric value 4) The user agent estimates that enough data is available for playback to proceed uninterrupted.

Calculates how much time is left.

    var timeLeft = myPlayer.remainingTime();

Not a native video element function, but useful

Get an array of remote html track elements

Get an array of remote text tracks

Remove a remote text track

Report user activity

Increase the size of the video to full screen

    myPlayer.requestFullscreen();

In some browsers, full screen is not supported natively, so it enters "full window mode", where the video fills the browser window. In browsers and devices that support native full screen, sometimes the browser's default controls will be shown, and not the Video.js custom skin. This includes most mobile devices (iOS, Android) and older versions of Safari.

Reset the player. Loads the first tech in the techOrder, and calls reset on the tech`.

Returns whether or not the user is "scrubbing". Scrubbing is when the user has clicked the progress bar handle and is dragging it along the progress bar.

Returns the TimeRanges of the media that are currently available for seeking to.

Returns whether or not the player is in the "seeking" state.

Select source based on tech-order or source-order Uses source-order selection if options.sourceOrder is truthy. Otherwise, defaults to tech-order selection

The source function updates the video source There are three types of variables you can pass as the argument. URL String: A URL to the the video file. Use this method if you are sure the current playback technology (HTML5/Flash) can support the source you provide. Currently only MP4 files can be used in both HTML5 and Flash.

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

*Source Object (or element): * A javascript object containing information about the source file. Use this method if you want the player to determine if it can support the file using the type information.

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

*Array of Source Objects: * To provide multiple versions of the source so that it can be played using HTML5 across browsers you can use an array of source objects. Video.js will detect which version is supported and load that file.

    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" }
    ]);

Check to see if fullscreen is supported

Return a reference to the current tech. It will only return a reference to the tech if given an object with the IWillNotUseThisInPlugins property on it. This is try and prevent misuse of techs by plugins.

Get an array of associated text tracks. captions, subtitles, chapters, descriptions http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks

Converts track info to JSON

Update styles of the player element (height, width and aspect ratio)

Get/set if user is active

Get video height

Get video width

Get or set the current volume of the media

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

0 is off (muted), 1.0 is all the way up, 0.5 is half way.

Get/set player width

Finds a single DOM element matching selector within the component's contentEl or another custom context.

Finds a all DOM elements matching selector within the component's contentEl or another custom context.

Adds a child component inside this component

    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
      }
    });

Add a CSS class name to the component's element

Allows sub components to stack CSS class names

Get an array of all child components

    var kids = myComponent.children();

Clears an interval and removes the associated dispose listener

Clears a timeout and removes the associated dispose listener

Return the component's DOM element where children are inserted. Will either be the same as el() or a new element defined in createEl().

Set both width and height at the same time

Get the component's DOM element

    var domEl = myComponent.el();

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.

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

Returns a child component with the provided name

Returns a child component with the provided ID

Gets a component by name

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

Hide the component element if currently showing

Get the component's ID

    var id = myComponent.id();

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
        }
      ]
    });

Get the component's name. The name is often used to reference the component.

    var name = myComponent.name();

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);

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.

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);

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': {}
      }
    }

Return the component's player

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.

Registers a component

Remove a child component from this component's list of children, and the child component's element from this component's element

Remove a CSS class name from the component's element

Creates an interval and sets up disposal automatically.

Creates timeout and sets up disposal automatically.

Show the component element if hidden

Add or remove a CSS class name from the component's element

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'});

Trigger the ready listeners

Fired when video playback ends

Fired when an error occurs

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

Fired when the player has initial duration and dimension information

Fired when the current playback position has changed * During playback this is fired every 15-250 milliseconds, depending on the playback technology in use.

Fired when the user is active, e.g. moves the mouse over the player

Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction

Fired when the volume changes