Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to setup Video.js with JavaScript?
In this tutorial, we're going to learn how to set up video.us using JavaScript. We'll also have a look at a few examples for better understanding.
First of all, Video-js is a very popular and easy-to-use modern web video player that has been built up on HTML5 and it provides better features and functionality for a web video player. It supports a variety of video playback formats - both the standard HTML5 formats also and the modern formats like Youtube, Vimeo, and Flash also. On top of that - it works with almost all the display sizes like Desktops, mobiles, etc.
Now, let's see, how to set up Video.js in your project using javascript.
Installing Video.js
Video.js is officially available to use through CDN and npm (node package manager). We're going to have a look at each of the methods.
Installing via CDN
The most convenient method to include video js in your local project is to use the free CDN URL.
Use the following CDN URL to include Video.js −
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
The above code fetches the video.js from the CDN URL enclosed in the <href> tag. Now let's move on to install video.js using the node package manager.
Installing via NPM
To install video.js in your project using the node package manager, use the command mentioned below in the project directory −
npm install --save-dev video.js
This command is going to install the latest version of video.js and will save it as a dependency in the "package.json".
Now that we've learned about the two methods for installing videos, let's learn about using video.js in the next section of this article.
Creating a Player
A key strength of Video.js is that it decorates a conventional <video> element while further enhancing its APIs and methods.
Video.js supports the standard <video> element tag and all its attributes like controls, autoplay, etc., and also provides some unique video-js only options.
Now, we're going to create a video player which plays an mp4 video file using the <video> tag and <video-js> tag.
Example
Consider the HTML Code shown below.
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/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="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" /> </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
In the above example, you can observe that −
We're including video-js using the CDN URL in the <head> tag and using the <script> tag.
We've used the <video> tag with class="video-js", which tells the browser that we want to use the video-js.
We've also used control, preload, height, and width options - which are standard HTML5 settings available for a video tag.
The mp4 video file has been linked in the <source> tag. This is going to be the video that we want to create a player for. If the format of the video file is mp4 then "type" inside <source> tag has "video/mp4".
We can also take advantage of the <video-js> tag straightaway, in place of the <video> tag. It is a recommended method to use video.js because it also allows you to access all the options references only for video.js.
Example
Consider the following updated code using the <video-js> tag for creating a web player −
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/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="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" /> </video> <video-js id="my-video" controls preload="auto" width="640" height="264" data-setup='{}'> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" /> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
In the above code example, we've both the <video> tag with class as <video-js> and <video-js> simultaneously. However, when you will execute both the codes in your browser, you'll notice no difference between the two.
Now, since we've learned about creating a basic video player, now we're going to see the setup methods while loading a video.
Automatic Setup
You will also notice we've used data-setup='{ }' with the <video> tags in the above examples.
Video.js will the video elements, which have the attribute data-setup={ } as soon as a webpage finishes loading to a create video player. 'data-setup' is used to pass config or options to a video player. Note that the value of data-setup has to be in single quotes '{ }' because a JSON option is expected for the same.
A basic example of how to use data-setup attribute with video.js −
<video class="video-js" data-setup='{}'>
<source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" />
</video>
So, in the above excerpt, we've used <video> tag with class video-js followed by data-setup='{ }'. This will make sure that our video gets rendered as soon as the webpage is loaded.
But this method might be a little problematic as on modern web browsers, the <video> elements might be created on runtime and they do not exist when a when page is loaded. Using the data-setup='{ }' method will not be able to handle those cases.
To ensure that our video gets loaded in every scenario, we need to do the manual setup.
Manual Setup
Since automatic setup is not always possible with modern web browsers, we need to do a manual setup by calling the <video-js> function in our code.
To call the <video-js> function, we need to provide a string matching the video's id.
Manual Setup Example
In the following piece of code, a <video> tag has been used to create a video player with the <video-js> class. The <video> also has an 'id' with the value 'my-videoplayer'. In the <script> tag, we've initialized a video.js function that is pointing to the same id used in the <video> tag i.e 'my-video-player'.
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video-player" class="video-js" data-setup='{}'> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" /> </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> const player = videojs('my-video-player'); </script> </body> </html>
By using this approach, we're making sure that the video gets loaded in every case whether it is loaded with the webpage or not.
Video.js also accepts a DOM Element if using an 'id' is not feasible with the <video> tag.
Manual Setup Example (Using DOM Selector)
In this example, we've called the video-js function inside the <script> using the '.video-js' class which has been set to the <video> tag.
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <video id="my-video-player" controls class="video-js" datasetup='{}'> <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" /> </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> const player = videojs(document.querySelector('.video-js')); </script> </body> </html>
Note − To run the above code, you will need to update the "src" value Inside the <source> tag, with the path of your "mp4" or "webm" files.
Conclusion
In this article, we understood how to install video.js using JavaScript by using CDN and NPM. After that, we had a look at the two methods of creating a video player using the video-js library. In the final section of the article, we saw the setup methods to initialize the video-js function with the help of examples.
975 Views
