video.js
Advanced tools
An HTML5 video player that supports HLS and DASH with a common API and skin.
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and modern streaming formats, as well as YouTube, Vimeo, and even Flash (through plugins). It provides a consistent look and feel across different browsers and devices.
Basic Video Player
This code sets up a basic video player using Video.js. It includes the necessary CSS and JavaScript files from a CDN and initializes a video element with controls.
<html>
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{}'>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>
</html>Customizing the Player
This example demonstrates how to customize the player by applying a theme. The 'vjs-theme-city' class is added to the video element to change its appearance.
<html>
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="my-video" class="video-js vjs-theme-city" controls preload="auto" width="640" height="264" data-setup='{}'>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
</body>
</html>Plugins and Extensions
This example shows how to use the videojs-contrib-ads plugin to add advertisements to your video. The plugin is included via a CDN, and the player is configured to show a pre-roll ad.
<html>
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{}'>
<source src="MY_VIDEO.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-ads@6.6.4/dist/videojs.ads.min.js"></script>
<script>
var player = videojs('my-video');
player.ads();
player.on('readyforpreroll', function() {
player.ads.startLinearAdMode();
player.src('AD_VIDEO.mp4');
player.one('adended', function() {
player.ads.endLinearAdMode();
});
});
</script>
</body>
</html>Plyr is a simple, accessible, and customizable HTML5 media player. It supports modern streaming formats and provides a clean and minimalistic design. Compared to Video.js, Plyr is more lightweight and easier to customize but may lack some advanced features and plugin support.
MediaElement.js is a JavaScript library that provides a consistent HTML5 video and audio player across all browsers. It supports a wide range of media formats and offers a variety of plugins. MediaElement.js is similar to Video.js in terms of functionality but focuses more on providing a unified experience across different media types.
Clappr is an extensible media player for the web. It supports a wide range of media formats and streaming protocols. Clappr is highly customizable and offers a plugin architecture similar to Video.js. However, it is more focused on providing a flexible and modular framework for building custom media players.
Video.js is a full featured, open source video player for all web-based platforms.
Right out of the box, Video.js supports all common media formats used on the web including streaming formats like HLS and DASH. It works on desktops, mobile devices, tablets, and web-based Smart TVs. It can be further extended and customized by a robust ecosystem of plugins.
Video.js was started in the middle of 2010 and is now used on over 50,000 100,000 200,000 400,000 700,000 800,000 websites.
Thanks to the awesome folks over at Fastly, there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's <head>:
<link href="//vjs.zencdn.net/8.19.1/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.19.1/video.min.js"></script>
Alternatively, you can include Video.js by getting it from npm, downloading it from GitHub releases or by including it via unpkg or another JavaScript CDN, like CDNjs.
<!-- unpkg : use the latest version of Video.js -->
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://unpkg.com/video.js@8.19.1/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js@8.19.1/dist/video.min.js"></script>
<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js"></script>
Next, using Video.js is as simple as creating a <video> element, but with an additional data-setup attribute. At a minimum, this attribute must have a value of '{}', but it can include any Video.js options - just make sure it contains valid JSON!
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
When the page loads, Video.js will find this element and automatically setup a player in its place.
If you don't want to use automatic setup, you can leave off the data-setup attribute and initialize a <video> element manually using the videojs function:
var player = videojs('my-player');
The videojs function also accepts an options object and a callback to be invoked when the player is ready:
var options = {};
var player = videojs('my-player', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
If you're ready to dive in, the Getting Started page and documentation are the best places to go for more information. If you get stuck, head over to our Slack!
Video.js is a free and open source library, and we appreciate any help you're willing to give - whether it's fixing bugs, improving documentation, or suggesting new features. Check out the contributing guide for more!
Video.js uses BrowserStack for compatibility testing.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Video.js is licensed under the Apache License, Version 2.0.
Video.js is a registered trademark of Brightcove, Inc.
FAQs
An HTML5 video player that supports HLS and DASH with a common API and skin.
The npm package video.js receives a total of 442,927 weekly downloads. As such, video.js popularity was classified as popular.
We found that video.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 21 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.