Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to setup Video.js with JavaScript?
In this tutorial, we're going to learn how to set up Video.js using JavaScript. We'll also have a look at a few examples for better understanding.
Video.js is a popular and easy-to-use modern web video player built on HTML5. It provides enhanced features and functionality for web video players, supporting various video formats including standard HTML5 formats and modern formats like YouTube, Vimeo, and Flash. It works seamlessly across all display sizes including desktops and mobile devices.
Installing Video.js
Video.js is officially available through CDN and npm (node package manager). Let's look at both installation methods.
Installing via CDN
The most convenient method to include Video.js in your project is using the free CDN URL.
Include the following CDN links in your HTML:
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
Installing via NPM
To install Video.js in your project using npm, run this command in your project directory:
npm install video.js
This installs the latest version of Video.js and saves it as a dependency in your package.json file.
Creating a Basic Video Player
Video.js enhances the standard HTML5 <video> element with additional APIs and methods while maintaining compatibility with all standard video attributes like controls, autoplay, etc.
Using Standard Video Tag
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="360"
data-setup='{}'>
<source src="/videos/sample.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript.
</p>
</video>
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
</body>
</html>
Key elements in the above code:
- The CSS and JavaScript files are included via CDN
- The <video> tag has class="video-js" to enable Video.js functionality
- Standard HTML5 attributes like controls, preload, width, and height are used
- The data-setup='{}' attribute enables automatic initialization
Automatic Setup
Video.js automatically initializes video elements with the data-setup attribute when the page loads. The data-setup attribute accepts JSON configuration options.
<video class="video-js" data-setup='{"fluid": true, "responsive": true}'>
<source src="/videos/sample.mp4" type="video/mp4">
</video>
However, automatic setup may not work for video elements created dynamically after page load. For such cases, manual setup is recommended.
Manual Setup
Manual setup gives you more control over player initialization and is essential for dynamically created video elements.
Using Element ID
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
</head>
<body>
<video
id="my-video-player"
class="video-js"
controls
width="640"
height="360">
<source src="/videos/sample.mp4" type="video/mp4">
</video>
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script>
// Initialize player manually
const player = videojs('my-video-player', {
controls: true,
fluid: true,
responsive: true
});
</script>
</body>
</html>
Using DOM Selector
You can also initialize Video.js using DOM element selectors:
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
</head>
<body>
<video class="video-js" controls>
<source src="/videos/sample.mp4" type="video/mp4">
</video>
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script>
// Initialize using DOM selector
const player = videojs(document.querySelector('.video-js'), {
width: 640,
height: 360,
controls: true
});
</script>
</body>
</html>
Configuration Options
Video.js offers numerous configuration options to customize player behavior:
const player = videojs('my-video', {
controls: true,
fluid: true,
responsive: true,
autoplay: false,
preload: 'auto',
playbackRates: [0.5, 1, 1.5, 2],
poster: '/images/video-poster.jpg'
});
Common Use Cases
| Setup Method | Best For | Pros | Cons |
|---|---|---|---|
| Automatic (data-setup) | Static content | Simple, no JavaScript required | Limited for dynamic content |
| Manual (videojs()) | Dynamic content, complex setups | Full control, works with dynamic elements | Requires JavaScript knowledge |
Conclusion
Video.js provides flexible setup options through both automatic and manual initialization methods. Use automatic setup for simple static videos and manual setup for dynamic content or when you need more control over player configuration.
2K+ Views
