These guides cover a range of topics for users of Video.js
Table of Contents
- Q: What is Video.js?
- Q: How do I install Video.js?
- Q: Is Video.js on bower?
- Q: What do Video.js version numbers mean?
- Q: How can I troubleshoot playback issues?
- Q: A video does not play in a specific browser. Why?
- Q: Why does the entire video download before playback? Why does the video load for a long time?
- Q: I see an error thrown that mentions vdata12345. What is that?
- Q: I think I found a bug with Video.js or I want to add a feature. What should I do?
- Q: What is a reduced test case?
- Q: What media formats does Video.js support?
- Q: How does Video.js choose which source to use?
- Q: How do I autoplay a video?
- Q: How can I play RTMP video in Video.js?
- Q: How can I hide the links to my video/subtitles/audio/tracks?
- Q: Can I turn off Video.js logging?
- Q: What is a plugin?
- Q: How do I make a plugin for Video.js?
- Q: How do I add a button to Video.js?
- Q: Where can I find a list of Video.js plugins?
- Q: How can I get my plugin listed on the website?
- Q: Where can I find a list of Video.js skins?
- Q: Does Video.js work as an audio only player?
- Q: Does Video.js support audio tracks?
- Q: Does Video.js support video tracks?
- Q: Does Video.js support text tracks (captions, subtitles, etc)?
- Q: Does Video.js support HLS (HTTP Live streaming) video?
- Q: Does Video.js support MPEG DASH video?
- Q: Does Video.js support live video?
- Q: Can Video.js play YouTube videos?
- Q: Can Video.js play Vimeo videos?
- Q: Does Video.js support DRM video?
- Q: Does Video.js have any support for advertisement integrations?
- Q: Can Video.js be required in node.js?
- Q: Does Video.js work with webpack?
- Q: Does Video.js work with react?
- Q: Can the big play button be centered?
- Q: Can the big play button be shown when paused?
- Q: Why is the picture-in-picture button different in Firefox?
Video.js is an extendable framework/library around the native video element. It does the following:
- Offers a plugin API so that different types of video can be handed to the native video element (e.g. HLS, HTML5 video, etc).
- Unifies the native video API across browsers (polyfilling support for features if necessary)
- Offers an extendable and themable UI
- Ensures accessibility for keyboard and screen reader users
- Has a set of core plugins that offer support for additional video formats:
- HLS and DASH are supported natively.
- videojs-contrib-dash can be used for more complete DASH support
- Supports DRM video via a core plugin:
- Is extensible with lots of plugins offering support for all kinds of features. See the plugin list on videojs.com
Currently Video.js can be installed using npm, serving a release file from a GitHub tag, or even using a CDN hosted version. For information on doing any of those see the setup guide.
Versions prior to Video.js 6 support bower, however, as of Video.js 6, bower is no longer officially supported. Please see issue #4012 for more information.
Video.js follows semver which means that the API should not change out from under a user unless there is a major version increase.
When seeking help about a playback issue the problem is often specific to the video file used, the way the video is hosted or the browser, so make sure to include all of that information and a reduced test case.
A reduced test case is an example of the problem that you are facing in isolation. Think of it as example page that reproduces the issue in the least amount of possible code.
It's important to add a reduced case. Even if the problem seems obvious it may not be to others. Having a example to refer to also makes the difference between somebody being able to take a look and immediately see what's wrong, and needing to take time to recreate what they think you are describing.
This depends on the formats supported by the browser's HTML5 video element, and the playback techs/plugins made available to Video.js. For more information on media formats see the troubleshooting guide.
When an array of sources is available, Video.js test each source in the order given. For each source, each tech in the
techOrder will be checked to see if it can play it whether directly or via source handler (such as videojs-http-streaming). The first match will be chosen.
Due to recent changes in autoplay behavior we no longer recommend using the
video element. It's still supported by Video.js but, many browsers, including Chrome, are changing their
autoplay attribute behavior.
Instead we recommend using the
autoplay option rather than the
autoplay attribute, for more information on using that.
see the autoplay option in the Video.js options guide.
For more information on the autoplay changes see our blog post.
Most mobile devices have blocked autoplaying videos until recently. For mobile devices that don't support autoplaying, autoplay isn't supported by Video.js. For those devices that support autoplaying, like iOS10 and Chrome for Android 53+, you must mute the video or have a video without audio tracks to be able to play it.
We do not recommend doing this manually using attributes on the
video element. Instead, you should pass the
autoplay option with a value of
'muted'. See the previous link for more information
on using that option.
NOTE: At this point, the autoplay attribute and option are NOT a guarantee that your video will autoplay.
It is no longer possible to play RTMP as it requires Flash, and Flash has reached end of life. No browser supports it.
It's impossible to hide the network requests a browser makes and difficult to sufficiently obfuscate URLs in the source. Techniques such as token authentication may help but are outside of the scope of Video.js.
For content that must be highly secure videojs-contrib-eme adds DRM support.
Yes! This can be achieved by adding the following code after including Video.js, but before creating any player(s):
For more information, including which logging levels are available, check out the debugging guide.
A plugin is a group of reusable functionality that can be re-used by others. For instance a plugin could add a button to Video.js that makes the video replay 10 times in a row before it stops playback for good. If such a plugin existed and was published users could include it on their page to share that functionality.
See the plugin guide for information on making a plugin for Video.js.
See the components guide for an example of adding a button to Video.js.
A list of plugins published to npm with the
videojs-plugin keyword is maintained on videojs.com.
Add the 'videojs-plugin' keyword to your array in package.json and publish your package to npm. If you use the plugin generator this will be done automatically for you. See the plugins guide for more information.
See the Video.js GitHub wiki.
Yes! It can be used to play audio only files in a
Yes! See the audio tracks guide for information on using audio tracks.
Alternate video tracks support is in development. See video tracks guide for more information on using video tracks.
Yes! See the text tracks guide for information on using text tracks.
Video.js supports HLS. It will play using native support if the HTML5 element supports HLS (e.g. Safari, iOS, legacy Edge, or Chrome for Android). On other browsers, it will play using our playback engine videojs-http-streaming.
Note that for non-native playback of HLS it is essential that the server hosting the video sets CORS headers.
Video.js provides support for some DASH streams with our playback engine videojs-http-streaming.
Alternatively, videojs-contrib-dash package can be used.
Like HLS, DASH streams require CORS headers.
Yes! Common formats for live are HLS or DASH. In the past RTMP was commonly used for live, but it is no longer possible to play in any browser.
There is an official plugin that adds support, videojs-youtube.
There is an official plugin that adds support, videojs-vimeo.
There is an official plugin that adds support, videojs-contrib-eme.
There is an official plugin that adds core advertising support, videojs-contrib-ads. Further plugins build on this which handle the communication with the ad server and display of the ad, for instance Google's IMA plugin.
Yes! Video.js is published on NPM.
Yes! See the Webpack and Video.js configuration guide.
Yes! See ReactJS integration example.
The default skin offsets the button to not obscure the poster image, but just add a
vjs-big-play-centered class to the player to have it centred.
vjs-show-big-play-button-on-pause class to the player to display the button when paused.
Firefox does not support the HTML video Picture-in-Picture (PIP) API, so it is not possible to have a custom button in the Video.js controls. Firefox has its own overlay PIP button, and its own logic for whether to display it.