Jekyll One

QuickSearch

The J1 Template support playing video on web pages, the new standard of HTML5 to show videos on webpages natively.

HTML5 Video opens the doors to your way of presenting video content. All modern browsers support the tag <video> for playing videos. Browsers have a built-in multimedia framework already for decoding and displaying video content. No need to use such proprietary software components anymore.

30-60 Minutes to read

The VideoJS library is an Open Source JavaScript framework for building HTML5 based video players on the web. It provides a customizable and extensible platform for embedding and controlling video playback within web applications.

Key features and benefits:

Compatibility

The library is designed to work seamlessly across different web browsers, ensuring that a wide audience can view your videos.

Skins

It is easy to customize the appearance of the video player by changing the player skin and applying CSS styles to match the look and feel of your website or application.

Plugins

The API provides a robust plugin system that allows developers to extend its functionality. Many plugins contributed by the community are available to add features like captions, analytics, or advertising.

Accessibility

The framework is built with accessibility in mind. VideoJS is making it possible to create video players compliant with web accessibility standards, such as providing support for screen readers and keyboard navigation.

Responsiveness

The Player provided can be configured to automatically adapt to different screen sizes and orientations, making it suitable for mobile and desktop devices.

HTML5 video

The framework leverages HTML5 video capabilities, allowing you to play videos without relying on external plugins like Flash.

Streaming

The frameowek can be used to stream video conten. This includes progressive download and adaptive streaming technologies like HTTP Live Streaming (HLS) and Dynamic Adaptive Streaming over HTTP (DASH).

Community and Documentation

The API has an active and supportive community of developers. It also provides extensive documentation and examples to help developers get started and troubleshoot any issues.

VideoJS is a powerful and versatile tool for integrating video playback into web applications and websites, offering a high degree of flexibility and customization. It has gained popularity due to its ease of use and robust feature set, making it a popular choice for developers looking to incorporate video content on the web.

The VideoJS system provides comprehensive documentation on its website, which includes detailed information on the available options and configurations.

HTML5 Video Options

Each of these options on the HTML video element video is also available as a guide for all available attributes for the HTML5 standard HTML5 Video Element. So, they can be defined in all three manners as outlined in the VideoJS Setup Guide.

Typically, defaults are not listed as this is left to browser vendors.

autoplay

Instead of using the autoplay attribute you should pass an autoplay option to the videojs function. The following values are valid:

  • a boolean false value false — the same as having no attribute on the video element, won’t autoplay

  • a boolean true value true — the same as having attribute on the video element, will use browsers autoplay

  • a muted string value of muted — will mute the video element and then manually call play() on loadstart. This is likely to work.

  • a string value play — will call play() on loadstart, similar to browsers autoplay

  • a string value of any — will call play() on loadstart and if the promise is rejected it will mute the video element then call play().

To pass the option:

var player = videojs('my-video', {
  autoplay: 'muted'
});
// or
player.autoplay('muted');

The autoplay attribute and option are not a guarantee that your video will autoplay. Note, if there is an attribute on the media element the option will be ignored.

More info on autoplay support and changes, see the VideoJS blog post at Autoplay Best Practices.

You cannot pass a string value in the attribute, you must pass it in the VideoJS options.

Type Default

boolean|string

NO default

controlBar

The controlBar is the container of all main controls supported by the VideoJS player.

volumePanel.inline

By default the volumePanel (volume control) is shown inline the controlbar. To make the volume bar vertical in the VideoJS player, set inline for the volumePanel set controlBar.volumePanel.inline to false.

Type Default

boolean

false

Example|s:

<video
  id="videojs_id"
  class="video-js vjs-theme-city"
  controls
  width="640" height="360"
  poster="/assets/video/gallery/youtube_poster.jpg"
  data-setup='{
    "techOrder": [
      "youtube", "html5"
    ],
    "sources": [{
      "type": "video/youtube",
      "src": "//youtube.com/watch?v=AeEYQ62t8hA"
    }],
    "controlBar": {
      "volumePanel": {
        "inline": false
      }
    }
  }'
>
</video>
videojs('my-player', {
  controlBar: {
    volumePanel: {
      inline: false
    }
  }
});

remainingTimeDisplay.displayNegative

By default the remaining time display in the controlbar shows as negative time. To not show the negative sign set controlBar.remainingTimeDisplay.displayNegative to false.

Type Default

boolean

NO default

Example|s:

videojs('my-player', {
  controlBar: {
    remainingTimeDisplay: {
      displayNegative: false
    }
  }
});

controls

Determines whether or not the player has controls that the user can interact with. Without controls the only way to start the video playing is with the attribute autoplay autoplay or through the Player API.

Type Default

boolean

NO default

height

Sets the display height of the video player in pixels.

Type Default

number|string

NO default

loop

Causes the video to start over as soon as it ends.

Type Default

boolean

NO default

muted

Silence a video.

Table 1. Values
Type Default

boolean

NO default

Silence video currently played
// replace 'myVideoID' with players' ID
var vjsPlayer = videojs('myVideoID');
// mute video on player 'ready'
vjsPlayer.on('ready', function() {
  vjsPlayer.muted(true);
});
// alternatively, create a function to toggle mute|unmute
function toggleMute() {
  vjsPlayer.muted(player.muted() ? false : true);
}

poster

A URL to an image that displays before the video begins playing. This is often a frame of the video or a custom title screen. As soon as the user hits play the image will go away.

Type Default

string

NO default

preload

Suggests to the browser whether or not the video data should begin downloading as soon as the video element <video> is loaded. Supported values are:

Type Description

auto

Start loading the video immediately (if the browser supports it). Some mobile devices will not preload the video in order to protect their users' bandwidth/data usage.

This is why the value is called auto and not something more conclusive like the rue value true.

Tip: This tends to be the most common and recommended value as it allows the browser to choose the best behavior.

metadata

Load only the meta data of the video, which includes information like the duration and dimensions of the video. Sometimes, the meta data will be loaded by downloading a few frames of video.

none

Don’t preload any data. The browser will wait until the user hits "play" to begin downloading.

Type Default

string

NO default

src

The source URL to a video source to embed.

Type Default

string

NO default

width

Sets the display width of the video player in pixels.

Type Default

string|number

NO default

VideoJS-specific Options

Each option is undefined` by default unless otherwise specified.

aspectRatio

Puts the player in fluid mode and the value is used when calculating the dynamic size of the player. The value should represent a ratio - two numbers separated by a colon (e.g. "16:9" or "4:3").

Alternatively, the vjs- classes vjs-16-9, vjs-9-16, vjs-4-3 or vjs-1-1 can be added to the player.

Type Default

string

NO default

audioOnlyMode

If set audioOnlyMode to true, it asynchronously hides all player components except the control bar, as well as any specific controls that are needed only for video. This option can be set to true or false by calling the audioOnlyMode method audioOnlyMode([true|false]) at runtime. When used as a setter, it returns a Promise. When used as a getter, it returns a Boolean.

Type Default

boolean

false

audioPosterMode

If set audioPosterMode to true, it enables the poster viewer experience by hiding the video element and displaying the poster image persistently. This option can be set to true or false by calling the audioPosterMode method audioPosterMode([true|false]) at runtime.

Type Default

boolean

false

autoSetup

Prevents the player from running the autoSetup for media elements with the data-setup attribute.

This option must be set globally with videojs.options.autoSetup = false in the same tick as videojs source is loaded to take effect.

Type Default

string|boolean

NO default

breakpoints

When used with the responsive option, sets breakpoints that will configure how class names are toggled on the player to adjust the UI based on the player’s dimensions.

By default, the breakpoints are:

Table 2. Default Breakpoints
Class Name Width Range

vjs-layout-tiny

0-210

vjs-layout-x-small

211-320

vjs-layout-small

321-425

vjs-layout-medium

426-768

vjs-layout-large

769-1440

vjs-layout-x-large

1441-2560

vjs-layout-huge

2561+

While the class names cannot be changed, the width ranges can be configured via an object like this:

breakpoints: {
  tiny: 300,
  xsmall: 400,
  small: 500,
  medium: 600,
  large: 700,
  xlarge: 800,
  huge: 900
}
  • The keys of the breakpoints object are derived from the associated class names by removing the vjs-layout- prefix and any - characters.

  • The values of the breakpoints object define the max width for a range.

  • Not all keys need to be defined. You can easily override a single breakpoint by passing an object with one key/value pair! Customized breakpoints will be merged with default breakpoints when the player is created.

When the player’s size changes, the merged breakpoints will be inspected in the size order until a matching breakpoint is found.

That breakpoint’s associated class name will be added as a class to the player. The previous breakpoint’s class will be removed.

See the file sandbox/responsive.html.example for an example of a responsive player using the default breakpoints.

Type Default

object

NO default

VideoJS specific children

This option is inherited from the Component options base class.

Type Default

array|object

NO default

disablePictureInPicture

If disablePictureInPicture is set to true, switching the video element into picture-in-picture is disabled. The default value is false.

This has no effect on Firefox, which implements a proprietary picture-in-picture mode which does not implement the standard picture-in-picture API.

This does not disable the document picture-in-picture mode which allows the player element to put into a PiP window.

Type Default

boolean

NO default

enableDocumentPictureInPicture v8.3.0

If enableDocumentPictureInPicture is set to true, the documentPictureInPicture API will be used for picture-in-picture, if available. Defaults to false, but may default to true when the feature has become established.

Currently this is available in Chrome 111+ as an origin trial.

This is a different picture-in-picture mode than has previously been available, where the entire player element is windowed rather than just the video itself. Since there are scenarios where it would be desirable to allow PiP on the player but not PiP on the video alone (such as ads, overlays), the disablePictureInPicture option only disables the old-style picture-in-picture mode on the video.

Type Default

boolean

NO default

experimentalSvgIcons v8.5.0

If set experimentalSvgIcons to true, the icons used throughout the player from videojs/font will be replaced by SVGs stored in VideoJS. Defaults to false, but may default to true when the feature has become established.

These SVGs were downloaded from Font Awesome and Google’s Material UI.

You can view all of the icons available by renaming sandbox svg-icons example to sandbox/svg-icons.html, building VideoJS with the npm run build command, and opening sandbox/svg-icons.html in your browser of choice.

Icons are expected to be added to a component inside of the player using the setIcon method when customizing the player.

Type Default

boolean

NO default

fluid

When fluid is set to true, the VideoJS player will have a fluid size. In other words, it will scale to fit its container at the video’s intrinsic aspect ratio, or at a specified aspectRatio.

Also, if the video tag <video> element has the class vjs-fluid, this option is automatically set to true.

Type Default

boolean

NO default

fullscreen

The object fullscreen.options can be set to pass in specific fullscreen options. At some point, it will be augmented with element and handler for more functionality.

See the Fullscreen API Spec for more details.

Type Default

object

{options: {navigationUI: 'hide'}

id

If provided, and the element does not already have an id, this value is used as the id of the player element.

Type Default

string

NO default

inactivitytimeout

VideoJS indicates that the user is interacting with the player by way of the classes vjs-user-active and vjs-user-inactive and the event useractive.

The attribute inactivityTimeout determines how many milliseconds of inactivity is required before declaring the user inactive. A value of 0 indicates that there is no inactivityTimeout and the user will never be considered inactive.

Type Default

string|number

NO default

language

A language code matching one of the available languages in the player. This sets the initial language for a player, but it can always be changed.

Learn more about languages in VideoJS.

Type Default

string

browser default or en

languages

Customize which languages are available in a player. The keys of this object will be language codes and the values will be objects with English keys and translated values.

Learn more about languages in VideoJS.

Generally, this option is not needed and it would be better to pass your custom languages to videojs.addLanguage(), so they are available in all players!

Type Default

array|object

NO default

liveui

Allows the player to use the new live ui that includes:

  • A progress bar for seeking within the live window

  • A button that can be clicked to seek to the live edge with a circle indicating if you are at the live edge or not.

Without this option the progress bar will be hidden and in its place will be text that indicates a LIVE playback. There will be no progress control and you will not be able click the text to seek to the live edge.

The attribute liveui will default to true in future versions.

Type Default

boolean

false

liveTracker.trackingThreshold

An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 20s on the seekBar then we do not show the new liveui even with the liveui option set.

Type Default

number

20

liveTracker.liveTolerance

An option for the liveTracker component of the player that controls how far from the seekable end should be considered live playback. By default anything further than 15s from the live seekable edge is considered behind live and everything else is considered live. Any user interaction to seek backwards will ignore this value as a user would expect.

Type Default

number

15

nativeControlsForTouch

Explicitly set a default value for the associated tech option.

Type Default

boolean

NO default

normalizeAutoplay

Specify whether setting autoplay to true and the video element <video autoplay> should be treated the same as autoplay: 'play', i.e. the autoplay attribute should be removed from (or not added to) the video element and play method play() be initiated manually by VideoJS rather than the browser.

Type Default

boolean

NO default

notSupportedMessage

Allows overriding the default message that is displayed when VideoJS cannot play back a media source.

Type Default

string

NO default

noUITitleAttributes

Control whether UI elements have a title attribute. A title attribute is shown on mouse hover, which can be helpful for usability, but has drawbacks for accessibility. Setting the attribute noUITitleAttributes to true prevents the title attribute from being added to UI elements, allowing for more accessible tooltips to be added to controls by a plugin or external framework.

Type Default

boolean

false

playbackRates

An array of numbers strictly greater than 0, where 1 means regular speed (100%), 0.5 means half-speed (50%), 2 means double-speed (200%), etc. If specified, VideoJS displays a control (of the class vjs-playback-rate vjs-playback-rate) allowing the user to choose playback speed from among the array of choices. The choices are presented in the specified order from bottom to top.

For example:

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});
Type Default

array

NO default

plugins

This supports having plugins be initialized automatically with custom options when the player is initialized - rather than requiring you to initialize them manually.

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}
  }
});

The above is roughly equivalent to:

var player = videojs('my-player');
player.foo({bar: true});
player.boo({baz: false});

Although, since the plugins option is an object, the order of initialization is not guaranteed!

See the Plugins Guide for more information on VideoJS plugins.

Type Default

array|object

NO default

preferFullWindow

Setting this to true will change fullscreen behaviour on devices which do not support the HTML5 fullscreen API but do support fullscreen on the video element, i.e. iPhone. Instead of making the video fullscreen, the player will be stretched to fill the browser window.

Type Default

boolean

false

responsive

Setting this option to true will cause the player to customize itself based on responsive breakpoints. Find more on the breakpoints option.

When this option is false (the default), responsive breakpoints will be ignored.

Note this is about the responsiveness of the controls within the player, not responsive sizing of the pplayer itself. For that, see fluid.

Table 3. Breakpoint Defaults
Type Default

boolean

false

restoreEl

If set restoreEl to true, a copy of the placeholder element will be made before the player is initalised. If the player is disposed, the copy is put back into the DOM in the player’s place.

Type Default

boolean|element

false

skipbuttons v8.2.0

If specified, VideoJS displays a control allowing the user to jump forward|backward in a video by a specified number of seconds.

See below skipButtons.forward or skipButtons.backward for more details.

Type Default

array|object

NO default

skipButtons.forward v8.2.0

If specified, VideoJS displays a control allowing the user to jump forward in a video by the specified number of seconds.

The following values are valid: 5 | 10 | 30

videojs('my-player', {
  controlBar: {
    skipButtons: {
      forward: 5
    }
  }
});
Type Default

number

NO default

skipButtons.backward v8.2.0

If specified, VideoJS displays a control allowing the user to jump back in a video by the specified number of seconds.

The following values are valid: 5 | 10 | 30

videojs('my-player', {
  controlBar: {
    skipButtons: {
      backward: 10
    }
  }
});
Type Default

number

NO default

sources

An array of objects that mirror the native video element’s <video> capability to have a series of child source elements <source>. This should be an array of objects with the src and type properties.

For example:

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

Using source elements <source> will have the same effect:

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>
Type Default

array

NO default

suppressNotSupportedError

If set suppressNotSupportedError to true, then the no compatible source error will not be triggered immediately and instead will occur on the first user interaction. This is useful for Google’s mobile friendly test tool, which can’t play video but where you might not want to see an error displayed.

Type Default

boolean

false

techCanOverridePoster

Gives the possibility to techs to override the player’s poster and integrate into the player’s poster life-cycle. This can be useful when multiple techs are used and each has to set their own poster any time a new source is played.

Type Default

boolean

false

techOrder

Defines the order in which VideoJS techs are preferred. By default, this means that the Html5 tech is preferred. Other registered techs will be added after this tech in the order in which they are registered.

Type Default

array

userActions

Configure handlers to call on specific events.

Type Default

array|object

NO default

click

Control click how clicking on the player (tech) operates. If the click action is set to false, clicking is disabled and will no longer cause the player to toggle between paused and playing. If controls are disabled by setting controls to false controls: false, this will not call the handler function.

videojs('my-player', {
  userActions: {
    click: false
  }
});

If the action click is undefined or set to true, clicking is enabled and toggles the player between paused and play. To override the default click handling, set the action click to a function which accepts a click event. In the following example, it will request Full Screen, the same as a the doubleClick event.

function myClickHandler(event) = {
  // `this` is the player in this context
  if (this.isFullscreen()) {
    this.exitFullscreen();
  } else {
    this.requestFullscreen();
  }
};
videojs('my-player', {
  userActions: {
    click: myClickHandler
  }
});
Type Default

boolean|function

false

doubleClick

Control doubleClick how double-clicking on the player/tech operates. If the doubleClick action is set to false, double-clicking is disabled. If undefined or set to true, double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set doubleClick to a function which accepts a dblclick event.

function myDoubleClickHandler(event) = {
  // `this` is the player in this context
  this.pause();
};
videojs('my-player', {
  userActions: {
    doubleClick: myDoubleClickHandler
  }
});
Type Default

boolean|function

false

hotkeys

Control hotkeys how the player-wide hotkeys operate. If the hotkeys actions are set to false, or undefined, hotkeys are disabled. If is set to true or an object — to allow definitions of fullscreenKey — hotkeys are enabled as described below.

To override the default hotkey handling, set hotkeys to a function which accepts a keydown event. If controls are disabled ba setting controls to false controls: false, this will not call the related handler function.

var player = videojs('my-player', {
  userActions: {
      hotkeys: function(event) {
        // `this` is the player in this context
        // `x` key = pause
      if (event.which === 88) {
       this.pause();
      }
      // `y` key = play
      if (event.which === 89) {
       this.play();
     }
   }
 }
});

Default hotkey handling is:

Table 4. Default hotkey handling
Key Action Enabled by

f

toggle fullscreen

only enabled if a Fullscreen button is present in the Control Bar

m

toggle mute

always enabled, even if no Control Bar is present

k

toggle play/pause

always enabled, even if no Control Bar is present

Space

toggle play/pause

always enabled, even if no Control Bar is present

Hotkeys require player focus first. Note that the Space key activates controls such as buttons and menus if that control has keyboard focus. The other hotkeys work regardless of which control in the player has focus.

Type Default

boolean|function|object

false

fullscreenKey

Override the fullscreenKey hotkey definition. If this is set, the function receives the keydown event. If the function returns true, then the fullscreen toggle action is performed.

var player = videojs('my-player', {
  userActions: {
    hotkeys: {
      muteKey: function(event) {
        // disable mute key
      },
      fullscreenKey: function(event) {
        // override fullscreen to trigger when pressing the v key
        return (event.which === 86);
      }
    }
  }
});
Type Default

function

NO default

muteKey

Override the muteKey key definition. If muteKey is set, the function receives the keydown event. If the function returns true, then the mute toggle action is performed.

Type Default

function

NO default

playPauseKey

Override the hotkey playPauseKey definition. If playPauseKey definition is set, the function receives the keydown event. If the function returns true, then the play or pause toggle action is performed.

Type Default

function

NO default

vttjs

Allows overriding the default URL to vtt.js, which may be loaded asynchronously to polyfill support for WebVTT.

This option will be used in the "novtt" build of VideoJS (i.e. video.novtt.js). Otherwise, vtt.js is bundled with VideoJS.

Type Default

string (URL)

NO default

Component Options

The VideoJS player is a component. Like all components, you can define what children it includes, what order they appear in, and what options are passed to them.

This is meant to be a quick reference; so, for more detailed information on components in VideoJS, check out the Components Guide.

Component children

If an Array — which is the default — this is used to determine which children (by component name) and in which order they are created on a player (or other component).

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});

The children options can also be passed as an object. In this case, it is used to provide options for any/all children, including disabling them with false.

// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false
    }
  }
});
Type Default

array|object

NO default

${componentName}

Components can be given custom options via the lower-camel-case variant of the component name (e.g. controlBar for ControlBar). These can be nested in a representation of grandchild relationships. For example, to disable the fullscreen control:

videojs('my-player', {
  controlBar: {
    fullscreenToggle: false
  }
});
Type Default

object

NO default

Tech Options

In VideoJS, a tech is a key component responsible for handling media playback. The tech is an abstraction layer between the player and the underlying technology for playing a video. It allows the framwork to support various video technologies — for example HTML5 video, YouTube Video, Vimeo video, HLS, or DASH. Users of VideoJS does not need to worry about the specific implementation details of each technology.

The J1 Template system provides several plugins that implements Tech plugins to be used for playing videos:

  • YouTube Video platform

  • Dailymotion Video platform

  • Wistia Video platform

  • Vimeo Video platform

A tech for the VideoJS framework typically consists of JavaScript code that provides a common API for controlling and interacting with the video element, regardless of the underlying technology.

This abstraction layer simplifies the process of building and customizing video players, as developers can work with a consistent interface no matter what playback technology — YouTube for example — is being used.

${techName}

For VideoJS, playback technologies can be given as custom options as a part of the options passed to the videojs function or the video HTML element video. They should be passed under the lower-case variant of a tech name like html5.

Example:

<video
  id="videojs_id"
  class="video-js vjs-theme-city"
  controls
  width="640" height="360"
  poster="/assets/video/gallery/youtube_poster.jpg"
  data-setup='{
    "techOrder": [
      "youtube", "html5"
    ],
    "sources": [{
      "type": "video/youtube",
      "src": "//youtube.com/watch?v=AeEYQ62t8hA"
    }],
    "controlBar": {
      "pictureInPictureToggle": false,
      "volumePanel": {
        "inline": false
      }
    }
  }'
>
</video>
Type Default

object

NO default

html5

Tech option for (native) HTML5 videos.

nativeControlsForTouch

The nativeControlsForTouch option is only supported by the Html5 tech. This option can be set to true to force native controls for touch devices.

Type Default

boolean

NO default

nativeAudioTracks

Option nativeAudioTracks cab be set to false to disable native audio track support. Most commonly used with videojs-contrib-hls.

Type Default

boolean

NO default

nativeTextTracks

Set nativeTextTracks to false to force emulation of text tracks instead of native support. The nativeCaptions option also exists, but is simply an alias to nativeTextTracks.

Type Default

boolean

NO default

nativeVideoTracks

If nativeVideoTracks is set to false, native video track support is disabled. Most commonly used with videojs-contrib-hls.

Type Default

boolean

NO default

preloadTextTracks

Can be set to false to delay loading of non-active text tracks until use. This can cause a short delay when switching captions during which there may be missing captions.

The default behavior is to preload all text tracks.

Type Default

boolean

NO default

Player Methods

Available methods to manipulate an already existing player (instance). For the examples below, the instance (variable) used for the player is vjsPlayer.

addRemoteTextTrack(options)

Add a remote text track.

Parameters

name Type Required Description

options

Object

yes

Options for remote text track

addTextTrack(kind, label, language)

Add a text track In addition to the W3C settings we allow adding additional info through options.

Parameters

name Type Required Description

kind

String

yes

Captions, subtitles, chapters, descriptions, or metadata

label

String

no

Optional label

language

String

no

Optional language

aspectRatio(ratio)

Get/Set the aspect ratio.

Parameters

name Type Required Description

ratio

String

no

Aspect ratio for player

autoplay(value)

Get or set the autoplay attribute.

Parameters

name Type Required Description

value

Boolean

yes

Boolean to determine if video should autoplay

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;

bufferedEnd()

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

bufferedPercent()

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

var howMuchIsDownloaded = vjsPlayer.bufferedPercent();

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

canPlayType(type)

Check whether the player can play a given mimetype

Parameters

name Type Required Description

type

String

yes

The mimetype to check

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

createEl()

Create the component’s DOM element.

currentSrc()

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

currentTime(seconds)

Get or set the current time (in seconds).

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

Parameters

name Type Required Description

seconds

Number|String

yes

The time to seek to

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

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

dispose()

Destroys the video player and does any necessary cleanup.

vjsPlayer.dispose();

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

duration(seconds)

Get the length in time of the video in seconds.

var lengthOfVideo = vjsPlayer.duration();

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

ended()

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

enterFullWindow()

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

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

exitFullscreen()

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

vjsPlayer.exitFullscreen();

exitFullWindow()

Exit full window.

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

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

getCache()

Get object for cached values.

static getTagSettings(tag)

Gets tag settings.

Parameters

name Type Required Description

tag

Element

yes

The player tag

height([value])

Get/set player height.

Parameters

name Type Required Description

value

Number

no

Value for height

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

isFullscreen(isFS)

Checks if the player is in fullscreen mode.

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

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

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

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

load()

Begin loading the src data.

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

muted([muted])

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

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

Parameters

name Type Required Description

muted

Boolean

no

True to mute, false to unmute

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.

pause()

Pause the video playback.

vjsPlayer.pause();

paused()

Checks if the player is paused.

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

play()

Start media playback.

vjsPlayer.play();

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.

poster(src)

Get or set the poster image source url.

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

Parameters

name Type Required Description

src

String

no

Poster image source URL

preload(value)

Get or set the preload attribute.

Parameters

name Type Required Description

value

Boolean

yes

Boolean to determine if preload should be used

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.

remainingTime()

Calculates how much time is left.

var timeLeft = vjsPlayer.remainingTime();

Not a native video element function, but useful.

remoteTextTrackEls()

Get an array of remote html track elements.

remoteTextTracks()

Get an array of remote text tracks.

removeRemoteTextTrack(track)

Remove a remote text track.

Parameters

name Type Required Description

track

Object

yes

Remote text track to remove

reportUserActivity(event)

Report user activity.

Parameters

name Type Required Description

event

Object

yes

Event object

requestFullscreen()

Increase the size of the video to full screen.

vjsPlayer.requestFullscreen();

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

reset()

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

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

seekable()

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

seeking()

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

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

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.

vjsPlayer.src("//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.

vjsPlayer.src({ type: "video/mp4", src: "//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.

vjsPlayer.src([
    { type: "video/mp4",  src: "//example.com/path/to/video.mp4" },
    { type: "video/webm", src: "//example.com/path/to/video.webm" },
    { type: "video/ogg",  src: "//example.com/path/to/video.ogv" }
]);

Parameters

name Type Required Description

source

String|Object|Array

yes

The source URL, object, or array of sources

supportsFullScreen()

Check to see if fullscreen is supported.

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

textTracks()

Get an array of associated text tracks. captions, subtitles, chapters, descriptions.

toJSON()

Converts track info to JSON.

updateStyleEl_()

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

userActive(bool)

Get/set if user is active.

Parameters

name Type Required Description

bool

Boolean

yes

Value when setting

videoHeight()

Get video height.

videoWidth()

Get video width.

volume(percentAsDecimal)

Get or set the current volume of the media.

// get
var howLoudIsIt = vjsPlayer.volume();
// set
vjsPlayer.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

width([value])

Get/set player width.

Parameters

name Type Required Description

value

Number

no

Value for width

Player Events

Available events for VideoJS players a listener can be bound to.

ended

Fired when video playback ends.

error

Fired when an error occurs.

loadeddata

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

loadedmetadata

Fired when the player has initial duration and dimension information.

ready

Fired when the player is ready to use.

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.

useractive

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

userinactive

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

volumechange

Fired when the volume changes.