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 web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over
50,000100,000200,000400,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/6.10/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/6.10/video.min.js"></script>
For the latest version of video.js and URLs to use, check out the Getting Started page on our website.
In the
vjs.zencdn.netCDN-hosted versions of Video.js we include a stripped down Google Analytics pixel that tracks a random sampling (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global before including Video.js via the free CDN:<script>window.HELP_IMPROVE_VIDEOJS = false;</script>Alternatively, you can include Video.js by getting it from npm, downloading from GitHub releases or by including it via unpkg or another JavaScript CDN like CDNjs. These releases do not include Google Analytics tracking at all.
<!-- unpkg --> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.js"></script> <!-- cdnjs --> <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video-js.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.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="http://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 channel!
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.
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 413,097 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
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.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.