video.js
Advanced tools
Package description
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.
Readme
The master branch is now the development branch for 5.0 and should be considered unstable until the first 5.0 release. If you're looking for the most recent stable release, please refer to the stable branch.
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,000 websites.
Thanks to the awesome folks over at Fastly, there's a free, CDN hosted version of Video.js that anyone can use. Simply add these includes to your document's
<head>:
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
Then, whenever you want to use Video.js you can simply use the <video> element as your normally would, but with an additional data-setup attribute containing any Video.js options. These options
can include any Video.js option plus potential plugin options, just make sure they're valid JSON!
<video id="really-cool-video" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
data-setup='{}'>
<source src="really-cool-video.mp4" type='video/mp4'>
<source src="really-cool-video.webm" type='video/webm'>
<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>
If you don't want to use auto-setup, you can leave off the data-setup attribute and initialize a video element manually.
var player = videojs('really-cool-video', { /* Options */ }, function() {
console.log('Good to go!');
this.play(); // if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
If you're ready to dive in, the documentation is the first place to go for more information. Generally the player API docs are the most pertinent.
Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the contributing guide.
To build your own custom version read the section on contributing code and "Building your own copy" in the contributing guide.
Video.js is licensed under the Apache License, Version 2.0. View the license file
Copyright 2014-2015 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 447,683 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
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.