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

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

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

name | Type | Required | Description
--- | --- | --- | ---
tag | Element | yes | The original video tag used for configuring options
options | Object | no | Object of option names and values
ready | function | no | Ready callback function

## Methods

### addRemoteTextTrack( options )

Add a remote text track

#### Parameters

name | Type | Required | Description
--- | --- | --- | ---
options | Object | yes | Options 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

name | Type | Required | Description
--- | --- | --- | ---
kind | String | yes | Captions, subtitles, chapters, descriptions, or metadata
label | String | no | Optional label
language | String | no | Optional 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

name | Type | Required | Description
--- | --- | --- | ---
ratio | String | no | Aspect 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

name | Type | Required | Description
--- | --- | --- | ---
value | Boolean | yes | Boolean 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

name | Type | Required | Description
--- | --- | --- | ---
type | String | yes | The 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

name | Type | Required | Description
--- | --- | --- | ---
bool | Boolean | yes | Set 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

name | Type | Required | Description
--- | --- | --- | ---
seconds | Number|String | yes | The time to seek to

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

name | Type | Required | Description
--- | --- | --- | ---
dimension | String | yes | Either width or height
value | Number | no | Value 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

name | Type | Required | Description
--- | --- | --- | ---
seconds | Number | yes | Duration 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

name | Type | Required | Description
--- | --- | --- | ---
err | * | yes | A 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

name | Type | Required | Description
--- | --- | --- | ---
bool | Boolean | yes | Value 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

name | Type | Required | Description
--- | --- | --- | ---
event | String | yes | Event 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

name | Type | Required | Description
--- | --- | --- | ---
tag | Element | yes | The 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

name | Type | Required | Description
--- | --- | --- | ---
value | Number | no | Value 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

name | Type | Required | Description
--- | --- | --- | ---
tag | Element | yes | The original video tag used for configuring options
options | Object | no | Player options
ready | function | no | Ready 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

name | Type | Required | Description
--- | --- | --- | ---
isFS | Boolean | no | Update 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

name | Type | Required | Description
--- | --- | --- | ---
code | String | yes | The 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

name | Type | Required | Description
--- | --- | --- | ---
value | Boolean | yes | Boolean 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

name | Type | Required | Description
--- | --- | --- | ---
muted | Boolean | no | True 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

name | Type | Required | Description
--- | --- | --- | ---
rate | Number | yes | New 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

name | Type | Required | Description
--- | --- | --- | ---
src | String | no | Poster 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

name | Type | Required | Description
--- | --- | --- | ---
value | Boolean | yes | Boolean 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

name | Type | Required | Description
--- | --- | --- | ---
track | Object | yes | Remote 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

name | Type | Required | Description
--- | --- | --- | ---
event | Object | yes | Event 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

name | Type | Required | Description
--- | --- | --- | ---
isScrubbing | Boolean | yes | True/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

name | Type | Required | Description
--- | --- | --- | ---
sources | Array | yes | The 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

name | Type | Required | Description
--- | --- | --- | ---
source | String|Object|Array | yes | The source URL, object, or array of sources

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

name | Type | Required | Description
--- | --- | --- | ---
undefined | Object

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

name | Type | Required | Description
--- | --- | --- | ---
bool | Boolean | yes | Value 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

name | Type | Required | Description
--- | --- | --- | ---
percentAsDecimal | Number | yes | The 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

name | Type | Required | Description
--- | --- | --- | ---
value | Number | no | Value 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

name | Type | Required | Description
--- | --- | --- | ---
selector | String | yes | A valid CSS selector, which will be passed to `querySelector`.
context | Element|String | no | 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`.

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

name | Type | Required | Description
--- | --- | --- | ---
selector | String | yes | A valid CSS selector, which will be passed to `querySelectorAll`.
context | Element|String | no | 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`.

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

#### 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]