Brightcove Player v5.22.2

Class: Player

Player

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

After an instance has been created it can be accessed globally in two ways:

  1. By calling videojs('example_video_1');
  2. By using it directly via videojs.players.example_video_1;

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

Create an instance of this class.

Parameters:
Name Type Argument Description
tag Element

The original video DOM element used for configuring options.
options Object <optional>

Object of option names and values.
ready Component~ReadyCallback <optional>

Ready callback function.
Source:
player.js

Extends

Members

<static> players :Object

Global player list

Type:
  • Object
Source:
player.js

Methods

<static> getTagSettings(tag)

Gets tag settings

Parameters:
Name Type Description
tag Element

The player tag
Source:
player.js
Returns:

An object containing all of the settings for a player tag

Type
Object

$(selector [, context])

Find a single DOM element matching a selector. This can be within the Components contentEl() or another custom context.

Parameters:
Name Type Argument Default Description
selector string

A valid CSS selector, which will be passed to querySelector.
context Element | string <optional>
 this.contentEl()

A DOM element within which to query. Can also be a selector string in which case the first matching element will get used as context. If missing this.contentEl() gets used. If this.contentEl() returns nothing it falls back to document.
Inherited From:
Source:
component.js
See:
Returns:

the dom element that was found, or null

Type
Element | null

$$(selector [, context])

Finds all DOM element matching a selector. This can be within the Components contentEl() or another custom context.

Parameters:
Name Type Argument Default Description
selector string

A valid CSS selector, which will be passed to querySelectorAll.
context Element | string <optional>
 this.contentEl()

A DOM element within which to query. Can also be a selector string in which case the first matching element will get used as context. If missing this.contentEl() gets used. If this.contentEl() returns nothing it falls back to document.
Inherited From:
Source:
component.js
See:
Returns:

a list of dom elements that were found

Type
NodeList

addChild(child [, options] [, index])

Add a child Component inside the current Component.

Parameters:
Name Type Argument Default Description
child string | Component

The name or instance of a child to add.
options Object <optional>
 {}

The key/value store of options that will get passed to children of the child.
index number <optional>
 this.children_.length

The index to attempt to add a child into.
Inherited From:
Source:
component.js
Returns:

The Component that gets added as a child. When using a string the Component will get created by this process.

Type
Component

addClass(classToAdd)

Add a CSS class name to the Components element.

Parameters:
Name Type Description
classToAdd string

CSS class name to add
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

addRemoteTextTrack(options [, manualCleanup])

Create a remote TextTrack and an HTMLTrackElement. It will automatically removed from the video element whenever the source changes, unless manualCleanup is set to false.

Parameters:
Name Type Argument Default Description
options Object

Options to pass to HTMLTrackElement during creation. See HTMLTrackElement for object properties that you should use.
manualCleanup boolean <optional>
 true

if set to false, the TextTrack will be
Deprecated:
  • The default value of the "manualCleanup" parameter will default to "false" in upcoming versions of Video.js
Source:
player.js
Returns:

the HTMLTrackElement that was created and added to the HTMLTrackElementList and the remote TextTrackList

Type
HTMLTrackElement

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

A helper method for adding a TextTrack to our TextTrackList.

In addition to the W3C settings we allow adding additional info through options.

Parameters:
Name Type Argument Description
kind string <optional>

the kind of TextTrack you are adding
label string <optional>

the label to give the TextTrack label
language string <optional>

the language to set on the TextTrack
Source:
player.js
See:
Returns:

the TextTrack that was added or undefined if there is no tech

Type
TextTrack | undefined

aspectRatio( [ratio])

A getter/setter for the Player's aspect ratio.

Parameters:
Name Type Argument Description
ratio string <optional>

The value to set the `Player's aspect ratio to.
Source:
player.js
Returns:
  • The current aspect ratio of the Player when getting.
      - undefined when setting
Type
string | undefined

audioTracks()

Get the AudioTrackList

Source:
player.js
See:
Returns:

the current audio track list

Type
AudioTrackList

autoplay( [value])

Get or set the autoplay attribute.

Parameters:
Name Type Argument Description
value boolean <optional>
  • true means that we should autoplay
     - false maens that we should not autoplay
Source:
player.js
Returns:
  • the current value of autoplay
      - the player when setting
Type
string | Player

blur()

Remove the focus from this component

Inherited From:
Source:
component.js

buffered()

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

Source:
player.js
See:
Returns:

A mock TimeRange object (following HTML spec)

Type
TimeRange

bufferedEnd()

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

Source:
player.js
Returns:

The end of the last buffered time range

Type
number

bufferedPercent()

Get the percent (as a decimal) of the video that's been downloaded. This method is not a part of the native HTML video API.

Source:
player.js
Returns:

A decimal between 0 and 1 representing the percent that is bufferred 0 being 0% and 1 being 100%

Type
number

<abstract> buildCSSClass()

Builds the default DOM class name. Should be overriden by sub-components.

Inherited From:
Source:
component.js
Returns:

The DOM class name for this object.

Type
string

canPlayType(type)

Check whether the player can play a given mimetype

Parameters:
Name Type Description
type string

The mimetype to check
Source:
player.js
See:
Returns:

'probably', 'maybe', or '' (empty string)

Type
string

children()

Get an array of all child components

Inherited From:
Source:
component.js
Returns:

The children

Type
Array

clearInterval(intervalId)

Clears an interval that gets created via window.setInterval or Component#setInterval. If you set an inteval via Component#setInterval use this function instead of window.clearInterval. If you don't your dispose listener will not get cleaned up until Component#dispose!

Parameters:
Name Type Description
intervalId number

The id of the interval to clear. The return value of Component#setInterval or window.setInterval.
Inherited From:
Source:
component.js
See:
Returns:

Returns the interval id that was cleared.

Type
number

clearTimeout(timeoutId)

Clears a timeout that gets created via window.setTimeout or Component#setTimeout. If you set a timeout via Component#setTimeout use this function instead of window.clearTimout. If you don't your dispose listener will not get cleaned up until Component#dispose!

Parameters:
Name Type Description
timeoutId number

The id of the timeout to clear. The return value of Component#setTimeout or window.setTimeout.
Inherited From:
Source:
component.js
See:
Returns:

Returns the timeout id that was cleared.

Type
number

contentEl()

Return the Components DOM element. This is where children get inserted. This will usually be the the same as the element returned in Component#el.

Inherited From:
Source:
component.js
Returns:

The content element for this Component.

Type
Element

controls( [bool])

Get or set whether or not the controls are showing.

Parameters:
Name Type Argument Description
bool boolean <optional>
  • true to turn controls on
     - false to turn controls off
Source:
player.js
Fires:
Returns:
  • the current value of controls when getting
      - the player when setting
Type
boolean | Player

createEl()

Create the Player's DOM element.

Overrides:
Source:
player.js
Returns:

The DOM element that gets created.

Type
Element

createModal(content [, options])

Creates a simple modal dialog (an instance of the ModalDialog component) that immediately overlays the player with arbitrary content and removes itself when closed.

Parameters:
Name Type Argument Description
content string | function | Element | Array | null

Same as ModalDialog#content's param of the same name. The most straight-forward usage is to provide a string or DOM element.
options Object <optional>

Extra options which will be passed on to the ModalDialog.
Source:
player.js
Returns:

the ModalDialog that was created

Type
ModalDialog

currentDimension(widthOrHeight)

Get the width or the height of the Component elements computed style. Uses window.getComputedStyle.

Parameters:
Name Type Description
widthOrHeight string

A string containing 'width' or 'height'. Whichever one you want to get.
Inherited From:
Source:
component.js
Returns:

The dimension that gets asked for or 0 if nothing was set for that dimension.

Type
number

currentDimensions()

Get an object that contains width and height values of the Components computed style.

Inherited From:
Source:
component.js
Returns:

The dimensions of the components element

Type
Component~DimensionObject

currentHeight()

Get the height of the Components computed style. Uses window.getComputedStyle.

Inherited From:
Source:
component.js
Returns:

height The height of the Components computed style.

Type
number

currentSource()

Returns the current source object.

Source:
player.js
Returns:

The current source object

Type
Tech~SourceObject

currentSources()

Returns all of the current source objects.

Source:
player.js
Returns:

The current source objects

Type
Array.<Tech~SourceObject>

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.

Source:
player.js
Returns:

The current source

Type
string

currentTime( [seconds])

Get or set the current time (in seconds)

Parameters:
Name Type Argument Description
seconds number | string <optional>

The time to seek to in seconds
Source:
player.js
Returns:
  • the current time in seconds when getting
      - a reference to the current player object when setting
Type
Player | number

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

Source:
player.js
Returns:

The source MIME type

Type
string

currentWidth()

Get the width of the Components computed style. Uses window.getComputedStyle.

Inherited From:
Source:
component.js
Returns:

width The width of the Components computed style.

Type
number

dimension(dimension [, value])

A getter/setter for the Player's width & height.

Parameters:
Name Type Argument Description
dimension string

This string can be:

   - 'width'
   - 'height'
value number <optional>

Value for dimension specified in the first argument.
Overrides:
Source:
player.js
Returns:
  • Returns itself when setting; method can be chained.
      - The dimension arguments value when getting (width/height).
Type
Player | number

dimensions(width, height)

Set both the width and height of the Component element at the same time.

Parameters:
Name Type Description
width number | string

Width to set the Components element to.
height number | string

Height to set the Components element to.
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

dispose()

Destroys the video player and does any necessary cleanup.

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

Overrides:
Source:
player.js
Fires:

duration( [seconds])

Normally gets the length in time of the video in seconds; in all but the rarest use cases an argument will NOT be passed to the method

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 Argument Description
seconds number <optional>

The duration of the video to set in seconds
Source:
player.js
Fires:
Returns:
  • The duration of the video in seconds when getting
      - A reference to the player that called this function
    when setting
Type
number | Player

el()

Get the Components DOM element

Inherited From:
Source:
component.js
Returns:

The DOM element for this Component.

Type
Element

enableTouchActivity()

This function reports user activity whenever touch events happen. This can get turned off by any sub-components that wants touch events to act another way.

Report user touch activity when touch events occur. User activity gets used to determine when controls should show/hide. It is 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 as touchstart and touchend toggle player controls. So touch events can't help us at the player level either.

User activity gets 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. Furthermore a touchmove event and anything other than a tap, should not turn controls back on.

Inherited From:
Source:
component.js
Listens to Events:
  • Component#event:touchstart
  • Component#event:touchmove
  • Component#event:touchend
  • Component#event:touchcancel

ended()

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

Source:
player.js
Returns:

True if the player is in the ended state, false if not.

Type
Boolean

enterFullWindow()

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

Source:
player.js
Fires:

error( [err])

Set or get the current MediaError

Parameters:
Name Type Argument Description
err MediaError | string | number <optional>

A MediaError or a string/number to be turned into a MediaError
Source:
player.js
Fires:
Returns:
  • The current MediaError when getting (or null)
      - The player when setting
Type
MediaError | null | Player

exitFullscreen()

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

Source:
player.js
Fires:
Returns:

A reference to the current player

Type
Player

exitFullWindow()

Exit full window

Source:
player.js
Fires:

flexNotSupported_()

Determine wether or not flexbox is supported

Source:
player.js
Returns:
  • true if flexbox is supported
      - false if flexbox is not supported
Type
boolean

fluid( [bool])

A getter/setter/toggler for the vjs-fluid className on the Player.

Parameters:
Name Type Argument Description
bool boolean <optional>
  • A value of true adds the class.
     - A value of false removes the class.
 - No value will toggle the fluid class.
Source:
player.js
Returns:
  • The value of fluid when getting.
      - `undefined` when setting.
Type
boolean | undefined

focus()

Set the focus to this component

Inherited From:
Source:
component.js

fullWindowOnEscKey(event)

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

Parameters:
Name Type Description
event string

Event to check for key press
Source:
player.js

getAttribute(attribute)

Get the value of an attribute on the Components element.

Parameters:
Name Type Description
attribute string

Name of the attribute to get the value from.
Inherited From:
Source:
component.js
See:
Returns:
  • The value of the attribute that was asked for.
      - Can be an empty string on some browsers if the attribute does not exist
    or has no value
  - Most browsers will return null if the attibute does not exist or has
    no value.
Type
string | null

getCache()

Get object for cached values.

Source:
player.js
Returns:

get the current object cache

Type
Object

getChild(name)

Returns the child Component with the given name.

Parameters:
Name Type Description
name string

The name of the child Component to get.
Inherited From:
Source:
component.js
Returns:

The child Component with the given name or undefined.

Type
Component | undefined

getChildById(id)

Returns the child Component with the given id.

Parameters:
Name Type Description
id string

The id of the child Component to get.
Inherited From:
Source:
component.js
Returns:

The child Component with the given id or undefined.

Type
Component | undefined

getVideoPlaybackQuality()

Gets available media playback quality metrics as specified by the W3C's Media Playback Quality API.

Source:
player.js
See:
Returns:

An object with supported media playback quality metrics or undefined if there is no tech or the tech does not support it.

Type
Object | undefined

hasClass(classToCheck)

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

Parameters:
Name Type Description
classToCheck string

CSS class name to check.
Inherited From:
Source:
component.js
Returns:
  • True if the Component has the class.
      - False if the `Component` does not have the class`
Type
boolean

hasStarted(hasStarted)

Add/remove the vjs-has-started class

Parameters:
Name Type Description
hasStarted boolean
  • true: adds the class
     - false: remove the class
Source:
player.js
Fires:
Returns:

the boolean value of hasStarted

Type
boolean

height( [value])

A getter/setter for the Player's height.

Parameters:
Name Type Argument Description
value number <optional>

The value to set the `Player's heigth to.
Overrides:
Source:
player.js
Returns:

The current heigth of the Player.

Type
number

hide()

Hide the Components element if it is currently showing by adding the 'vjs-hidden` class name to it.

Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

id()

Get this Components ID

Inherited From:
Source:
component.js
Returns:

The id of this Component

Type
string

initChildren()

Add and initialize default child Components based upon options.

Inherited From:
Source:
component.js

isAudio(bool)

Gets or sets the audio flag

Parameters:
Name Type Description
bool boolean
  • true signals that this is an audio player
     - false signals that this is not an audio player
Source:
player.js
Returns:
  • the current value of isAudio when getting
      - the player if setting
Type
Player | boolean

isFullscreen( [isFS])

Check if the player is in fullscreen mode or tell the player that it is or is not in fullscreen mode.

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 Argument Description
isFS boolean <optional>

Set the players current fullscreen state
Source:
player.js
Returns:
  • true if fullscreen is on and getting
      - false if fullscreen is off and getting
  - A reference to the current player when setting
Type
boolean | Player

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 Argument Description
code string <optional>

the language code to set the player to
Source:
player.js
Returns:
  • The current language code when getting
      - A reference to the player when setting
Type
string | Player

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

Source:
player.js
Returns:

An array of of supported languages

Type
Array

load()

Begin loading the src data.

Source:
player.js
Returns:

A reference to the player

Type
Player

localize(string)

Localize a string given the string in english.

Parameters:
Name Type Description
string string

The string to localize.
Inherited From:
Source:
component.js
Returns:

The localized string or if no localization exists the english string.

Type
string

loop( [value])

Get or set the loop attribute on the video element.

Parameters:
Name Type Argument Description
value boolean <optional>
  • true means that we should loop the video
     - false means that we should not loop the video
Source:
player.js
Returns:
  • the current value of loop when getting
      - the player when setting
Type
string | Player

muted( [muted])

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

Parameters:
Name Type Argument Description
muted boolean <optional>
  • true to mute
     - false to unmute
Source:
player.js
Returns:
  • true if mute is on and getting
      - false if mute is off and getting
  - A reference to the current player when setting
Type
boolean | Player

name()

Get the Components name. The name gets used to reference the Component and is set during registration.

Inherited From:
Source:
component.js
Returns:

The name of this Component.

Type
string

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.
Source:
player.js
See:
Returns:

the current network activity state

Type
number

off( [first] [, second] [, third])

Remove an event listener from this Components element. If the second argument is exluded all listeners for the type passed in as the first argument will be removed.

Parameters:
Name Type Argument Description
first string | Component | Array.<string> <optional>

The event name, and array of event names, or another Component.
second EventTarget~EventListener | string | Array.<string> <optional>

The listener function, an event name, or an Array of events names.
third EventTarget~EventListener <optional>

The event handler if first is a Component and second is an event name or an Array of event names.
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

on( [first] [, second] [, third])

Add an event listener to this Components element.

The benefit of using this over the following:

  • VjsEvents.on(otherElement, 'eventName', myFunc)

  • otherComponent.on('eventName', myFunc)

  • Is that the listeners will get cleaned up when either component gets disposed.

  • It will also bind myComponent as the context of myFunc.

    NOTE: If you remove the element from the DOM that has used on you need to

     clean up references using: `myComponent.trigger(el, 'dispose')`
 This will also allow the browser to garbage collect it. In special
 cases such as with `window` and `document`, which are both permanent,
 this is not necessary.
Parameters:
Name Type Argument Description
first string | Component | Array.<string> <optional>

The event name, and array of event names, or another Component.
second EventTarget~EventListener | string | Array.<string> <optional>

The listener function, an event name, or an Array of events names.
third EventTarget~EventListener <optional>

The event handler if first is a Component and second is an event name or an Array of event names.
Inherited From:
Source:
component.js
Listens to Events:
Returns:

Returns itself; method can be chained.

Type
Component

one( [first] [, second] [, third])

Add an event listener that gets triggered only once and then gets removed.

Parameters:
Name Type Argument Description
first string | Component | Array.<string> <optional>

The event name, and array of event names, or another Component.
second EventTarget~EventListener | string | Array.<string> <optional>

The listener function, an event name, or an Array of events names.
third EventTarget~EventListener <optional>

The event handler if first is a Component and second is an event name or an Array of event names.
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

options(obj)

Deep merge of options objects with new options.

Note: When both obj and options contain properties whose values are objects. The two properties get merged using module:mergeOptions

Parameters:
Name Type Description
obj Object

The object that contains new options.
Inherited From:
Deprecated:
  • since version 5
Source:
component.js
Returns:

A new object of this.options_ and obj merged together.

Type
Object

pause()

Pause the video playback

Source:
player.js
Returns:

A reference to the player object this function was called on

Type
Player

paused()

Check if the player is paused or has yet to play

Source:
player.js
Returns:
  • false: if the media is currently playing
      - true: if media is not currently playing
Type
boolean

play()

start media playback

Source:
player.js
Returns:

A reference to the player object this function was called on

Type
Player

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 Argument Description
rate number <optional>

New playback rate to set.
Source:
player.js
See:
Returns:
  • The current playback rate when getting or 1.0
      - the player when setting
Type
number | Player

player()

Return the Player that the Component has attached to.

Inherited From:
Source:
component.js
Returns:

The player that this Component has attached to.

Type
Player

playsinline( [value])

Set or unset the playsinline attribute. Playsinline tells the browser that non-fullscreen playback is preferred.

Parameters:
Name Type Argument Description
value boolean <optional>
  • true means that we should try to play inline by default
     - false means that we should use the browser's default playback mode,
   which in most cases is inline. iOS Safari is a notable exception
   and plays fullscreen by default.
Source:
player.js
See:
Returns:
  • the current value of playsinline
      - the player when setting
Type
string | Player

poster( [src])

Get or set the poster image source url

Parameters:
Name Type Argument Description
src string <optional>

Poster image source URL
Source:
player.js
Fires:
Returns:
  • the current value of poster when getting
      - the player when setting
Type
string | Player

preload( [value])

Get or set the preload attribute

Parameters:
Name Type Argument Description
value boolean <optional>
  • true means that we should preload
     - false maens that we should not preload
Source:
player.js
Returns:
  • the preload attribute value when getting
      - the player when setting
Type
string | Player

ready(fn [, sync])

Bind a listener to the component's ready state. If the ready event has already happened it will trigger the function immediately.

Parameters:
Name Type Argument Default Description
fn Component~ReadyCallback

A function to call when ready is triggered.
sync boolean <optional>
 false

Execute the listener synchronously if Component is ready.
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

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.
Source:
player.js
See:
Returns:

the current playback rendering state

Type
number

remainingTime()

Calculates how much time is left in the video. Not part of the native video API.

Source:
player.js
Returns:

The time remaining in seconds

Type
number

remoteTextTrackEls()

Get the "remote" HTMLTrackElementList. This gives the user all of the DOM elements that match up with the remote TextTrackList.

Source:
player.js
Returns:

The current remote text track list elements or undefined if we don't have a tech

Type
HTMLTrackElementList

remoteTextTracks()

Get the "remote" TextTrackList. Remote Text Tracks are tracks that were added to the HTML video element and can be removed, whereas normal texttracks cannot be removed.

Source:
player.js
Returns:

The current remote text track list or undefined if we don't have a tech

Type
TextTrackList | undefined

removeAttribute(attribute)

Remove an attribute from the Components element.

Parameters:
Name Type Description
attribute string

Name of the attribute to remove.
Inherited From:
Source:
component.js
See:
Returns:

Returns itself; method can be chained.

Type
Component

removeChild(component)

Remove a child Component from this Components list of children. Also removes the child Components element from this Components element.

Parameters:
Name Type Description
component Component

The child Component to remove.
Inherited From:
Source:
component.js

removeClass(classToRemove)

Remove a CSS class name from the Components element.

Parameters:
Name Type Description
classToRemove string

CSS class name to remove
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

removeRemoteTextTrack(track)

Remove a remote TextTrack from the respective TextTrackList and HTMLTrackElementList.

Parameters:
Name Type Description
track Object

Remote TextTrack to remove
Source:
player.js
Returns:

does not return anything

Type
undefined

reportUserActivity(event)

Report user activity

Parameters:
Name Type Description
event Object

Event object
Source:
player.js

requestFullscreen()

Increase the size of the video to full screen 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.

Source:
player.js
Fires:
Returns:

A reference to the current player

Type
Player

reset()

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

Source:
player.js
Returns:

A reference to the player

Type
Player

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 Argument Description
isScrubbing boolean <optional>

wether the user is or is not scrubbing
Source:
player.js
Returns:

A instance of the player that called this function when setting, and the value of scrubbing when getting

Type
boolean | Player

seekable()

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

Source:
player.js
Returns:

the seekable intervals of the media timeline

Type
TimeRanges

seeking()

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

Source:
player.js
Returns:

True if the player is in the seeking state, false if not.

Type
Boolean

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 Description
sources Array

The sources for a media asset
Source:
player.js
Returns:

Object of source and tech order or false

Type
Object | boolean

setAttribute(attribute, value)

Set the value of an attribute on the Component's element

Parameters:
Name Type Description
attribute string

Name of the attribute to set.
value string

Value to set the attribute to.
Inherited From:
Source:
component.js
See:
Returns:

Returns itself; method can be chained.

Type
Component

setInterval(fn, interval)

Creates a function that gets run every x milliseconds. This function is a wrapper around window.setInterval. There are a few reasons to use this one instead though.

  1. It gets cleared via Component#clearInterval when Component#dispose gets called.
  2. The function callback will be a Component~GenericCallback
Parameters:
Name Type Description
fn Component~GenericCallback

The function to run every x seconds.
interval number

Execute the specified function every x milliseconds.
Inherited From:
Source:
component.js
See:
Listens to Events:
Returns:

Returns an id that can be used to identify the interval. It can also be be used in Component#clearInterval to clear the interval.

Type
number

setTimeout(fn, timeout)

Creates a function that runs after an x millisecond timeout. This function is a wrapper around window.setTimeout. There are a few reasons to use this one instead though:

  1. It gets cleared via Component#clearTimeout when Component#dispose gets called.
  2. The function callback will gets turned into a Component~GenericCallback

Note: You can use window.clearTimeout on the id returned by this function. This will cause its dispose listener not to get cleaned up! Please use Component#clearTimeout or Component#dispose.

Parameters:
Name Type Description
fn Component~GenericCallback

The function that will be run after timeout.
timeout number

Timeout in milliseconds to delay before executing the specified function.
Inherited From:
Source:
component.js
See:
Listens to Events:
Returns:

Returns a timeout ID that gets used to identify the timeout. It can also get used in Component#clearTimeout to clear the timeout that was set.

Type
number

show()

Show the Components element if it is hidden by removing the 'vjs-hidden' class name from it.

Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

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.

Parameters:
Name Type Argument Description
source Tech~SourceObject | Array.<Tech~SourceObject> <optional>

One SourceObject or an array of SourceObjects
Source:
player.js
Returns:
  • The current video source when getting
      - The player when setting
Type
string | Player

supportsFullScreen()

Check if current tech can support native fullscreen (e.g. with built in controls like iOS, so not our flash swf)

Source:
player.js
Returns:

if native fullscreen is supported

Type
boolean

tech(safety)

Return a reference to the current Tech, but only if given an object with the IWillNotUseThisInPlugins property having a true value. This is try and prevent misuse of techs by plugins.

Parameters:
Name Type Description
safety Object

An object that must contain {IWillNotUseThisInPlugins: true}

Properties
Name Type Description
IWillNotUseThisInPlugins boolean

Must be set to true or else this function will throw an error.
Source:
player.js
Returns:

The Tech

Type
Tech

textTracks()

Get the TextTrackList

Text tracks are tracks of timed text events.

  • Captions: text displayed over the video
          for the hearing impaired
  • Subtitles: text displayed over the video for
           those who don't understand language in the video
  • Chapters: text displayed in a menu allowing the user to jump
          to particular points (chapters) in the video
  • Descriptions: (not yet implemented) audio descriptions that are read back to
              the user by a screen reading device
Source:
player.js
See:
Returns:

The current TextTrackList or undefined if or undefined if we don't have a tech

Type
TextTrackList | undefined

toggleClass(classToToggle [, predicate])

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

Parameters:
Name Type Argument Description
classToToggle string

The class to add or remove based on (@link Component#hasClass}
predicate boolean | Dom~predicate <optional>

An Dom~predicate function or a boolean
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

toJSON()

returns a JavaScript object reperesenting the current track information. DOES not return it as JSON

Source:
player.js
Returns:

Object representing the current of track info

Type
Object

trigger(event [, hash])

Trigger an event on an element.

Parameters:
Name Type Argument Description
event EventTarget~Event | Object | string

The event name, and Event, or an event-like object with a type attribute set to the event name.
hash Object <optional>

Data hash to pass along with the event
Inherited From:
Source:
component.js
Returns:

Returns itself; method can be chained.

Type
Component

triggerReady()

Trigger all the ready listeners for this Component.

Inherited From:
Source:
component.js
Fires:

userActive( [bool])

Get/set if user is active

Parameters:
Name Type Argument Description
bool boolean <optional>
  • true if the user is active
     - false if the user is inactive
Source:
player.js
Fires:
Returns:
  • the current value of userActive when getting
      - the player when setting
Type
boolean | Player

usingNativeControls( [bool])

Toggle native controls on/off. Native controls are the controls built into devices (e.g. default iPhone controls), Flash, or other techs (e.g. Vimeo Controls) This should only be set by the current tech, because only the tech knows if it can support native controls

Parameters:
Name Type Argument Description
bool boolean <optional>
  • true to turn native controls on
     - false to turn native controls off
Source:
player.js
Fires:
Returns:
  • the current value of native controls when getting
      - the player when setting
Type
boolean | Player

videoHeight()

Get video height

Source:
player.js
Returns:

current video height

Type
number

videoTracks()

Get the VideoTrackList

Source:
player.js
See:
Returns:

the current video track list

Type
VideoTrackList

videoWidth()

Get video width

Source:
player.js
Returns:

current video width

Type
number

volume( [percentAsDecimal])

Get or set the current volume of the media

Parameters:
Name Type Argument Description
percentAsDecimal number <optional>

The new volume as a decimal percent:

    - 0 is muted/0%/off
    - 1.0 is 100%/full
    - 0.5 is half volume or 50%
Source:
player.js
Returns:

a reference to the calling player when setting and the current volume as a percent when getting

Type
Player | number

width( [value])

A getter/setter for the Player's width.

Parameters:
Name Type Argument Description
value number <optional>

The value to set the `Player's width to.
Overrides:
Source:
player.js
Returns:

The current width of the Player.

Type
number

Events

abort

Fires when the loading of an audio/video is aborted.

Type: EventTarget~Event
Source:
player.js

canplay

The media has a readyState of HAVE_FUTURE_DATA or greater.

Type: EventTarget~Event
Source:
player.js

canplaythrough

The media has a readyState of HAVE_ENOUGH_DATA or greater. This means that the entire media file can be played without buffering.

Type: EventTarget~Event
Source:
player.js

controlsdisabled

Type: EventTarget~Event
Source:
player.js

controlsenabled

Type: EventTarget~Event
Source:
player.js

dispose

Called when the player is being disposed of.

Type: EventTarget~Event
Overrides:
Source:
player.js

durationchange

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

emptied

Fires when the current playlist is empty.

Type: EventTarget~Event
Source:
player.js

ended

Fired when the end of the media resource is reached (currentTime == duration)

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

enterFullWindow

Type: EventTarget~Event
Source:
player.js

error

Type: EventTarget~Event
Source:
player.js

exitFullWindow

Type: EventTarget~Event
Source:
player.js

firstplay

Fired the first time a video is played. Not part of the HLS spec, and this is probably not the best implementation yet, so use sparingly. If you don't have a reason to prevent playback, use myPlayer.one('play'); instead.

Type: EventTarget~Event
Source:
player.js

fullscreenchange

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

fullscreenchange

Fired when going in and out of fullscreen.

Type: EventTarget~Event
Source:
player.js

fullscreenchange

Type: EventTarget~Event
Source:
player.js

fullscreenchange

Type: EventTarget~Event
Source:
player.js

loadeddata

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

Type: EventTarget~Event
Source:
player.js

loadedmetadata

Fired when the player has initial duration and dimension information

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

loadedmetadata

Fires when the browser has loaded meta data for the audio/video.

Type: EventTarget~Event
Source:
player.js

loadstart

Fired when the user agent begins looking for media data

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

pause

Fired whenever the media has been paused

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

play

Triggered whenever an Tech#play event happens. Indicates that playback has started or resumed.

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

playing

The media is no longer blocked from playback, and has started playing.

Type: EventTarget~Event
Source:
player.js

posterchange

This event fires when the poster image is changed on the player.

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

progress

Fired while the user agent is downloading media data.

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

ready

Triggered when a Component is ready.

Type: EventTarget~Event
Inherited From:
Source:
component.js

resize

Triggered when a component is resized.

Type: EventTarget~Event
Inherited From:
Source:
component.js

seeked

Fired when the player has finished jumping to a new time

Type: EventTarget~Event
Source:
player.js

seeking

Fired whenever the player is jumping to a new time

Type: EventTarget~Event
Source:
player.js

stalled

Fires when the browser is trying to get media data, but data is not available.

Type: EventTarget~Event
Source:
player.js

suspend

Fires when the browser is intentionally not getting media data.

Type: EventTarget~Event
Source:
player.js

tap

Triggered when a Component is tapped.

Type: EventTarget~Event
Inherited From:
Source:
component.js

textdata

Fires when we get a textdata event from tech

Type: EventTarget~Event
Source:
player.js

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.

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

useractive

Type: EventTarget~Event
Source:
player.js

userinactive

Type: EventTarget~Event
Source:
player.js

usingcustomcontrols

player is using the custom HTML controls

Type: EventTarget~Event
Source:
player.js

usingnativecontrols

player is using the native device controls

Type: EventTarget~Event
Source:
player.js

volumechange

Fired when the volume changes

Type: EventTarget~Event
Source:
player.js
Listeners of This Event:

waiting

A readyState change on the DOM element has caused playback to stop.

Type: EventTarget~Event
Source:
player.js