Back to Video Js

Player

docs/legacy-docs/api/player.html

8.23.948.3 KB
Original Source

This documentation is for an outdated version of Video.js. See documentation for the current release.

API Index

Player Methods

Class Methods

Inherited Methods from Component

Player Events

Class Events

Player

An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.

var myPlayer = videojs('example_video_1');

In the following example, the data-setup attribute tells the Video.js library to create a player instance when the library is ready.

Video

After an instance has been created it can be accessed globally using Video('example_video_1').

DEFINED IN: player.js line number: 41

EXTENDS: component.js

Constructor

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

Parameters

nameTypeRequiredDescription
tagElementyesThe original video tag used for configuring options
optionsObjectnoObject of option names and values
readyfunctionnoReady callback function

Methods

addRemoteTextTrack( options )

Add a remote text track

Parameters

nameTypeRequiredDescription
optionsObjectyesOptions for remote text track

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2520

[back to top]

addTextTrack( kind, [label], [language] )

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

Parameters

nameTypeRequiredDescription
kindStringyesCaptions, subtitles, chapters, descriptions, or metadata
labelStringnoOptional label
languageStringnoOptional language

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2506

[back to top]

aspectRatio( [ratio] )

Get/Set the aspect ratio

Parameters

nameTypeRequiredDescription
ratioStringnoAspect ratio for player

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 385

[back to top]

autoplay( value )

Get or set the autoplay attribute.

Parameters

nameTypeRequiredDescription
valueBooleanyesBoolean to determine if video should autoplay

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1980

[back to top]

buffered()

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;

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1386

[back to top]

bufferedEnd()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1429

[back to top]

bufferedPercent()

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)

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1414

[back to top]

canPlayType( type )

Check whether the player can play a given mimetype

Parameters

nameTypeRequiredDescription
typeStringyesThe mimetype to check

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1680

[back to top]

controls( bool )

Get or set whether or not the controls are showing.

Parameters

nameTypeRequiredDescription
boolBooleanyesSet controls to showing or not

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2073

[back to top]

createEl()

Create the component's DOM element

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 241

[back to top]

currentSrc()

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.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1940

[back to top]

currentTime( seconds )

Get or set the current time (in seconds)

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

Parameters

nameTypeRequiredDescription
secondsNumberStringyes

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1296

[back to top]

currentType()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1951

[back to top]

dimension( dimension, [value] )

Get/set dimension for player

Parameters

nameTypeRequiredDescription
dimensionStringyesEither width or height
valueNumbernoValue for dimension

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 332

[back to top]

dispose()

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.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 212

[back to top]

duration( seconds )

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.

Parameters

nameTypeRequiredDescription
secondsNumberyesDuration when setting

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1327

[back to top]

ended()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2204

[back to top]

enterFullWindow()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1621

[back to top]

error( err )

Set or get the current MediaError

Parameters

nameTypeRequiredDescription
err*yesA MediaError or a String/Number to be turned into a MediaError

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2163

[back to top]

exitFullscreen()

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

myPlayer.exitFullscreen();

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1595

[back to top]

exitFullWindow()

Exit full window

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1660

[back to top]

fluid( bool )

Add/remove the vjs-fluid class

Parameters

nameTypeRequiredDescription
boolBooleanyesValue of true adds the class, value of false removes the class

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 365

[back to top]

fullWindowOnEscKey( event )

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

Parameters

nameTypeRequiredDescription
eventStringyesEvent to check for key press

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1644

[back to top]

getCache()

Get object for cached values.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1156

[back to top]

static getTagSettings( tag )

Gets tag settings

Parameters

nameTypeRequiredDescription
tagElementyesThe player tag

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2657

[back to top]

height( [value] )

Get/set player height

Parameters

nameTypeRequiredDescription
valueNumbernoValue for height

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 321

[back to top]

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

player's constructor function

Parameters

nameTypeRequiredDescription
tagElementyesThe original video tag used for configuring options
optionsObjectnoPlayer options
readyfunctionnoReady callback function

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 62

[back to top]

isFullscreen( [isFS] )

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.

Parameters

nameTypeRequiredDescription
isFSBooleannoUpdate the player's fullscreen state

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1514

[back to top]

language( code )

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.

Parameters

nameTypeRequiredDescription
codeStringyesThe locale string

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2569

[back to top]

languages()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2589

[back to top]

load()

Begin loading the src data.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1916

[back to top]

loop( value )

Get or set the loop attribute on the video element.

Parameters

nameTypeRequiredDescription
valueBooleanyesBoolean to determine if video should loop

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1997

[back to top]

muted( [muted] )

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

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

Parameters

nameTypeRequiredDescription
mutedBooleannoTrue to mute, false to unmute

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1480

[back to top]

networkState()

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.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2414

[back to top]

pause()

Pause the video playback

myPlayer.pause();

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1242

[back to top]

paused()

Check if the player is paused

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1256

[back to top]

play()

start media playback

myPlayer.play();

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1228

[back to top]

playbackRate( rate )

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.

Parameters

nameTypeRequiredDescription
rateNumberyesNew playback rate to set.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2372

[back to top]

poster( [src] )

Get or set the poster image source url

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

Parameters

nameTypeRequiredDescription
srcStringnoPoster image source URL

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2014

[back to top]

preload( value )

Get or set the preload attribute

Parameters

nameTypeRequiredDescription
valueBooleanyesBoolean to determine if preload should be used

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1963

[back to top]

readyState()

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.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2438

[back to top]

remainingTime()

Calculates how much time is left.

var timeLeft = myPlayer.remainingTime();

Not a native video element function, but useful

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1368

[back to top]

remoteTextTrackEls()

Get an array of remote html track elements

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2496

[back to top]

remoteTextTracks()

Get an array of remote text tracks

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2486

[back to top]

removeRemoteTextTrack( track )

Remove a remote text track

Parameters

nameTypeRequiredDescription
trackObjectyesRemote text track to remove

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2530

[back to top]

reportUserActivity( event )

Report user activity

Parameters

nameTypeRequiredDescription
eventObjectyesEvent object

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2229

[back to top]

requestFullscreen()

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.

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1539

[back to top]

reset()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1927

[back to top]

scrubbing( isScrubbing )

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.

Parameters

nameTypeRequiredDescription
isScrubbingBooleanyesTrue/false the user is scrubbing

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1271

[back to top]

seekable()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2220

[back to top]

seeking()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2212

[back to top]

selectSource( sources )

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

Parameters

nameTypeRequiredDescription
sourcesArrayyesThe sources for a media asset

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1720

[back to top]

src( source )

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

Parameters

nameTypeRequiredDescription
sourceStringObjectArray

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1792

[back to top]

supportsFullScreen()

Check to see if fullscreen is supported

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1504

[back to top]

tech( )

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.

Parameters

nameTypeRequiredDescription
undefinedObject

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 616

[back to top]

textTracks()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2473

[back to top]

toJSON()

Converts track info to JSON

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2601

[back to top]

updateStyleEl_()

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

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 410

[back to top]

userActive( bool )

Get/set if user is active

Parameters

nameTypeRequiredDescription
boolBooleanyesValue when setting

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2239

[back to top]

videoHeight()

Get video height

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2550

[back to top]

videoWidth()

Get video width

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2540

[back to top]

volume( percentAsDecimal )

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.

Parameters

nameTypeRequiredDescription
percentAsDecimalNumberyesThe new volume as a decimal percent

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1448

[back to top]

width( [value] )

Get/set player width

Parameters

nameTypeRequiredDescription
valueNumbernoValue for width

Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 310

[back to top]

$( selector, [context] )

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

Parameters

nameTypeRequiredDescription
selectorStringyesA valid CSS selector, which will be passed to querySelector.
contextElementStringno

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841

[back to top]

$$( selector, [context] )

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

Parameters

nameTypeRequiredDescription
selectorStringyesA valid CSS selector, which will be passed to querySelectorAll.
contextElementStringno

Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861

[back to top]

addChild( child, [options] )

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
      }
    });ParametersnameTypeRequiredDescriptionchildString|ComponentyesThe class name or instance of a child to addoptionsObjectnoOptions, 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 elementParametersnameTypeRequiredDescriptionclassToAddStringyesClassname to addDefined 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 namesDefined 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 listenerParametersnameTypeRequiredDescriptionintervalIdNumberyesThe id of the interval to clearDefined 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 listenerParametersnameTypeRequiredDescriptiontimeoutIdNumberyesThe id of the timeout to clearDefined 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 timeParametersnameTypeRequiredDescriptionwidthNumber|StringyesWidth of playerheightNumber|StringyesHeight of playerDefined 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 objectParametersnameTypeRequiredDescriptionpropsObjectyesAn object of propertiesDefined 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 nameDefined 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 IDDefined 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 nameParametersnameTypeRequiredDescriptionnameStringyesName of the component to getDefined 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 nameParametersnameTypeRequiredDescriptionclassToCheckStringyesClassname to checkDefined 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 showingDefined 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);ParametersnameTypeRequiredDescriptionfirstString|ComponentyesThe event type or other componentsecondfunction|StringyesThe listener function or event typethirdfunctionnoThe listener for other componentDefined 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.ParametersnameTypeRequiredDescriptionfirstString|ComponentyesThe event type or other componentsecondfunction|StringyesThe event handler or event typethirdfunctionyesThe event handlerDefined 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);ParametersnameTypeRequiredDescriptionfirstString|ComponentyesThe event type or other componentsecondfunction|StringyesThe listener function or event typethirdfunctionnoThe listener function for other componentDefined 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': {}
      }
    }ParametersnameTypeRequiredDescriptionobjObjectyesObject of new option valuesDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 145[back to top]player()Return the component's playerDefined 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.ParametersnameTypeRequiredDescriptionfnfunctionyesReady listenersyncBooleanyesExec the listener synchronously if component is readyDefined 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 componentParametersnameTypeRequiredDescriptionnameStringyesName of the component to registercompObjectyesThe component to registerDefined 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 elementParametersnameTypeRequiredDescriptioncomponentComponentyesComponent to removeDefined 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 elementParametersnameTypeRequiredDescriptionclassToRemoveStringyesClassname to removeDefined 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.ParametersnameTypeRequiredDescriptionfnfunctionyesThe function to run every N seconds.intervalNumberyesNumber 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.ParametersnameTypeRequiredDescriptionfnfunctionyesThe function to run after the timeout.timeoutNumberyesNumber 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 hiddenDefined 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 elementParametersnameTypeRequiredDescriptionclassToToggleStringpredicateBoolean|functionnoCan 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'});ParametersnameTypeRequiredDescriptioneventEvent|Object|StringyesA string (the type) or an event object with a type attributehashObjectnodata hash to pass along with the eventDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 768[back to top]triggerReady()Trigger the ready listenersDefined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 814[back to top]EventsendedFired when video playback endsDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2801[back to top]errorFired when an error occursDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2815[back to top]loadeddataFired when the player has downloaded data at the current playback positionDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2771[back to top]loadedmetadataFired when the player has initial duration and dimension informationDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2764[back to top]timeupdateFired 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]useractiveFired when the user is active, e.g. moves the mouse over the playerDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2778[back to top]userinactiveFired when the user is inactive, e.g. a short delay after the last mouse move or control interactionDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2785[back to top]volumechangeFired when the volume changesDefined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2808[back to top]