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

To pass the option:

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

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

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.

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.

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.

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.

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

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:

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

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.

This option is inherited from the Component options base class.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

Explicitly set a default value for the associated tech option.

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.

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

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.

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:

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

The above is roughly equivalent to:

See the Plugins Guide for more information on VideoJS plugins.

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.

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.

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.

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.

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:

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

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.

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.

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.

Configure handlers to call on specific events.

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.

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

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:

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:

Tech option for (native) HTML5 videos.