Getting Started with VideoJS

Video.JSHTML5Web Development

Video.js is a famous, well-known, and easy-to-use modern web video player. It was created from the ground up with the HTML5 world in mind. It supports a diverse range of video streaming formats such as HTML5 Video, media source extensions as well as other modern video playback formats like Youtube, Vimeo, Flash, and others. It also allows for video playbacks on various platforms like PCs, laptops, and mobile devices.

The project began in the middle of 2010, and the player is now utilized on more than 700,000 websites. Hundreds of contributors, from all over the world, are now working on the project to make it more suited, optimized, and user-friendly.

In this article, we’re going to learn about the features of video.js and how to use them in your project with the assistance of a few examples.

Features of Video.js

Here are a few distinctive and significant characteristics of video.js −

  • Plays All Formats − Video.js can play both the new adaptive video streaming formats like HLS and DASH, as well as standard video file formats like MP4s and WebMs. It also provides a unique user experience for live video streaming.

  • Supported on all Platforms − Videos created with video.js should operate on all platforms where your app is installed. Video.js strives to support every modern browser, including different screen sizes such as desktop, laptop, and mobile phones. To support an older browser, the Video.js player might fall back on outdated technologies such as Flash.

  • Easy to Customize − Video.js is very simple to learn and customize, and you can add complicated features with just a few lines of code to your project.

  • Hundreds of Plugins − You can also utilize hundreds of plugins and skins created by the video.js team to extend the functionality of your video player.

Now that we've covered the basics of video.js, let's get started by adding video.js to your local project.

Adding Video.js to your Project

There are primarily two approaches for including video.js in your project.

Installing via CDN

The simplest way to include video.js is to add the quick and free CDN URL, which anyone may use in their code.

To load videos in your project, you need to use the following CDN link shown below −

<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />

In the preceding code snippet, we’ve used the <href> tag, inside the <link> tag to fetch video.js using the CDN URL.

You just need to add the above snippet in the <script> tag of your HTML Code and you are set to start.

Installing via NPM

Another method to install video.js is by using the node package manager (NPM).

Execute the following command in the project directory −

npm install --save-dev video.js

The above command is going to install video.js in your node project as a dev dependency.

So, those were the two approaches for installing video.js and using it in your project. Now, in the next section, we’re going to work on an example to better understand how it functions.

Creating a Video Player

In this section of the tutorial, we’re going to create a video player using video.js.

Note − In this part, we’ll be referring to video elements only. However, video.js works well with both video and audio elements.

Using <video> tag with class="video-js"

To create a video player, you can use both, either a <video> tag with class="video-js" or directly the <video-js> tag. Let's see how to use the <video> tag with class="video.js" −

<!DOCTYPE html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video class="video-js" id="my-videos" controls width="640" height="264" > <source src="https://www.tutorialspoint.com/videos/video1.mp4" type="video/mp4" id="my-video1" > <source src="https://www.tutorialspoint.com/videos/video2.webm" type="video/webm" id="my-video2" > </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>

In the above example, you can see that we are −

  • Importing video-js using the CDN url in the <head> tag and using the <script> tag.

  • Using the <video> tag with class="video-js". This class tell the browser that we want to use the video-js.

  • Using two <source> tags with path to mp4 file and webm file respectively. 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 is "video/mp4" and if the format of video is webm then the "type" is "video/webm"

  • Note that we’ve also set the height and width of the player in the <video> tag.

Using the <video-js> tag

Now, instead of using the <video> tag, we’re going to use the <video-js> tag directly. It is also the recommended method to use video.js.

Updating the above example with <video-js> tag. Consider the HTML Code shown below −

<!DOCTYPE html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js id="my-videos" controls width="640" height="264" data-setup='{}' > <source src="https://www.tutorialspoint.com/videos/video1.mp4" type="video/mp4" id="my-video1" > <source src="https://www.tutorialspoint.com/videos/video2.webm" type="video/webm" id="my-video2" > </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>

In the above example, we’ve replaced the <video class="video-js"> tag with <video- js> tag. However, when you will run both the codes in your browser, you’ll notice no difference between the two.

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 tutorial, we got a quick overview of video-js and where we can use it. We understood the main key features of video-js. In the second half of the tutorial, we installed video.js on our local machine and created a video player to play mp4 and webm video files using two different methods.

raja
Updated on 03-Oct-2022 10:17:34

Advertisements