How to Customize HTML5 Video Player Controls with VideoJS?

Video.JSHTML5Web Development

In this tutorial, we’re going to learn how to customize HTML5 video player controls of a video player created using video.js. With the help of the Video.js library, we can configure each and every aspect of a video player without much hassle. Everything from the video player controls to the buttons and even to the progress bars and volume sliders can be controlled in video.js.

Furthermore, we have access to a large number of pre-built video player themes created by the video.js community. In this essay, we'll look at both alternatives.

First, let's start by changing the color of our video player controls.

How to customize Video.js player Skins?

When we include the Video.js CSS file (video-js.min.css) in our code or project, the default Video.js skin is imported, which means we may modify the appearance of a Video.js player simply by utilizing the cascading capability of CSS to override styles of video player controls.

Changing the Color of Video Player Controls

In this part of the tutorial, we’re going to play with the vjs CSS Classes to change the color of our video player controls to blue by overriding the default colors of video.js controls. This is also the recommended way to customize the video player controls of video.js.

Let’s add a class named ‘vjs-blue-theme’ to our video element, which we are going to use to override the styles later. Consider the below code snippet for the same.

<video class="video-js vjs-blue-theme'">
   // other code
</video>

Now that we’ve added a new class to our video element, let’s start by changing the progress bar of our video player to blue color.

Consider the below code snippet to be added in the <style> tag.

/* Change color of progress bar */
.vjs-blue-theme .vjs-play-progress {
   background: #0000ff;
}

In the above code snippet, we’ve overridden the default colors of the progress bar of the video player using background CSS property.

Example

The complete working example will look something like this −

<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> <style> /* Change colour of progress bar */ .vjs-blue-theme .vjs-play-progress { background: #0000ff; } </style> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-blue-theme" controls preload="auto" fluid="true" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type='video/mp4' /> </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>

On execution, the above code will create a video player in the web browser. The progress bar control of the video player will have a background color of blue. So, you can override various video.js components and customize the video player controls to as per your liking.

Note − Make sure to update the path of the mp4 video file with your video file to make the code work.

In the above example, we changed the color of the progress bar of the video player. Similarly, we can also configure the volume level and the slider bar.

Example

Consider the following example for customizing the color of video player controls to blue −

<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> <style> .vjs-blue-theme .vjs-volume-level, .vjs-blue-theme .vjs-play-progress, .vjs-blue-theme .vjs-slider-bar { background: #0000ff; } </style> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-blue-theme" controls preload="auto" fluid="true" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type='video/mp4' /> </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player = videojs('my-video'); </script> </body> </html>

When we execute the above code, a video player with the video player controls as blue will be created.

In the examples above, we’ve used the class attribute for customizing the video plate controls. But the same can also be done programmatically with the help of ‘addClass’ of the video.js player.

Example

Consider the following example to customize the HTML5 video player control in video.js programmatically.

<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> <style> .vjs-blue-theme .vjs-volume-level, .vjs-blue-theme .vjs-play-progress, .vjs-blue-theme .vjs-slider-bar { background: #0000ff; } </style> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" fluid="true" poster="my_video_poster.jpg" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/video1.mp4" type='video/mp4' /> </video> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player = videojs('my-video'); player.addClass('vjs-blue-theme'); </script> </body> </html>

You can notice that in the above example, we’ve added the ‘vjs-blue-theme’ on the video player reference using the addClass method. When you execute the above code, you’ll notice no difference between this example and the previous example. Because these are just the two methods of adding a class to our video player.

Now that, we’ve understood how to create a custom skin in video.js, let’s have a look at using some of the pre-built themes shared by video.js.

So, customizing HTML5 video player controls using video.js is very simple and can be done using any of the methods shown above. Apart from the classes used above, there are many such classes to control each and every aspect of the video player like controlBar, controlText, big-play-button, etc. You can explore the other classes on the official documentation of video.js.

Conclusion

In this tutorial, we had a look at how to customize video player controls with video.js. First, we understood how to change the color of the progress bar to blue using the video.js classes and the method to use it in our project. In the later part of the article, we saw some more classes to customize the video player controls, with the help of working examples.

raja
Updated on 03-Oct-2022 14:00:36

Advertisements