docs/legacy-docs/api/player.html
This documentation is for an outdated version of Video.js. See documentation for the current release.
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
Player( tag,[options],[ready] )
| 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 |
Add a remote text track
| 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
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
| 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
Get/Set the aspect ratio
| 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
Get or set the autoplay attribute.
| 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
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
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
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
Check whether the player can play a given mimetype
| 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
Get or set whether or not the controls are showing.
| 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
Create the component's DOM element
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 241
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
Get or set the current time (in seconds)
// get
var whereYouAt = myPlayer.currentTime();
// set
myPlayer.currentTime(120); // 2 minutes into the video
| name | Type | Required | Description |
|---|---|---|---|
| seconds | Number | String | yes |
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1296
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
Get/set dimension for player
| 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
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
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.
| 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
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
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
Set or get the current MediaError
| 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
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
Exit full window
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1660
Add/remove the vjs-fluid class
| 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
Check for call to either exit full window or full screen on ESC key
| 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
Get object for cached values.
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1156
Gets tag settings
| 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
Get/set player height
| 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
player's constructor function
| 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
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.
| 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
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.
| 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
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
Begin loading the src data.
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1916
Get or set the loop attribute on the video element.
| 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
Get the current muted state, or turn mute on or off
// get
var isVolumeMuted = myPlayer.muted();
// set
myPlayer.muted(true); // mute the volume
| 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
Returns the current state of network activity for the element, from the codes in the list below.
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2414
Pause the video playback
myPlayer.pause();
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1242
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
start media playback
myPlayer.play();
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1228
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.
| 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
Get or set the poster image source url
// get
var currentPoster = myPlayer.poster();
// set
myPlayer.poster('http://example.com/myImage.jpg');
| 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
Get or set the preload attribute
| 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
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.
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2438
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
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
Get an array of remote text tracks
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2486
Remove a remote text track
| 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
Report user activity
| 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
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
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
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.
| 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
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
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
Select source based on tech-order or source-order Uses source-order selection if options.sourceOrder is truthy. Otherwise, defaults to tech-order selection
| 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
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" }
]);
| name | Type | Required | Description |
|---|---|---|---|
| source | String | Object | Array |
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1792
Check to see if fullscreen is supported
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 1504
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.
| name | Type | Required | Description |
|---|---|---|---|
| undefined | Object |
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 616
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
Converts track info to JSON
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2601
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
Get/set if user is active
| 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
Get video height
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2550
Get video width
Defined in https://github.com/videojs/video.js/blob/master/src/js/player.js line number: 2540
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.
| 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
Get/set player width
| 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
Finds a single DOM element matching selector within the component's contentEl or another custom context.
| name | Type | Required | Description |
|---|---|---|---|
| selector | String | yes | A valid CSS selector, which will be passed to querySelector. |
| context | Element | String | no |
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 841
Finds a all DOM elements matching selector within the component's contentEl or another custom context.
| name | Type | Required | Description |
|---|---|---|---|
| selector | String | yes | A valid CSS selector, which will be passed to querySelectorAll. |
| context | Element | String | no |
Defined in https://github.com/videojs/video.js/blob/master/src/js/component.js line number: 861
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]