Security News
NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
By Sarah Gooding - Nov 19, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
What is video.js?
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.
What are video.js's main functionalities?
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>Other packages similar to video.js
plyr
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
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
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.
Please Note!
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 - HTML5 Video Player 
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.
Quick start
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.
Contributing
Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the contributing guide.
Building your own Video.js from source
To build your own custom version read the section on contributing code and "Building your own copy" in the contributing guide.
License
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 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.
Package last updated on 22 May 2015
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.
Related posts
Security News
Research
Malicious npm Package Exploits WhatsApp Authentication with Remote Kill Switch for File Destruction
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
By Kush Pandya - Nov 15, 2024
Security News
PyPI Introduces Digital Attestations to Strengthen Python Package Security
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
By Sarah Gooding - Nov 15, 2024