Video.js Options Reference

Video.js Options Reference

Standard <video> Element Options

Each of these options is also available as a standard <video> element attribute; so, they can be defined in all three manners outlined in the setup guide. Typically, defaults are not listed as this is left to browser vendors.

autoplay

Type: boolean|string NOTE: At this point, the autoplay attribute and option are NOT a guarantee that your video will autoplay. NOTE2: If there is an attribute on the media element the option will be ignored. NOTE3: You cannot pass a string value in the attribute, you must pass it in the videojs options

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

• a boolean value of false: the same as having no attribute on the video element, won't autoplay
• a boolean value of true: the same as having attribute on the video element, will use browsers autoplay
• a string value of 'muted': will mute the video element and then manually call play() on loadstart. This is likely to work.
• a string value of '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');

More info on autoplay support and changes:

• See our blog post: https://blog.videojs.com/autoplay-best-practices-with-video-js/

controls

Type: boolean

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 autoplay attribute or through the Player API.

height

Type: string|number

Sets the display height of the video player in pixels.

loop

Type: boolean

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

muted

Type: boolean

Will silence any audio by default.

poster

Type: string

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.

preload

Type: string

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

'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 'true'.

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.

src

Type: string

The source URL to a video source to embed.

width

Type: string|number

Sets the display width of the video player in pixels.

Video.js-specific Options

<