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
Adding Custom Video.js Control Bar Buttons
Video.js is a well-known online video player javascript library that is used for creating video players in the web browser for a variety of video formats. It supports all contemporary video formats such as YouTube, Vimeo, Flash, and others, as well as all common video playback formats such as mp4, WebM, Flv, and others. Apart from supporting a wide range of formats, video.js also provides a lot of functionality and flexibility to customize the video player as desired.
In this tutorial, we're going to learn how we can customize the video player using video.js by creating and adding new buttons to our video's control bar. Adding a custom button to a video player gives you greater control over it and it can also enhance a user's experience. For example, adding a button to skip the video 30 secs forward or backward can really be handy for a user, etc. As a result, a custom button may have several applications. Now, in the following portion of the tutorial, we'll begin developing our own button and adding it to the video player.
Adding Custom Video.js Control Bar buttons
In this section of the article, we'll be doing the following things −
Adding a Button to the video player control bar
Adding various options to the button - to make it more interactive.
Let's move ahead with adding a button to the video player.
Adding a Button to the Video Player Control Bar
Pre-Requisite − Assuming that you know how to create a basic video player using the video.js library.
For adding a button to a video player control bar, we're going to make use of various option references exposed by video.js like fluid, audioOnlyMode, controlBar. For the purpose of this article, we're going to use the controlBar options specifically. 'controlBar' provides multiple methods like getChild or addChild, which allows us to create and add various elements to your player.
We'll be using the addChild method of controlBar class to add our button. And then we'll add our button to the HTML Dom and set its innerHTML to an icon provided by video-js.
Consider the following JavaScript case for adding a button to the control bar
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
In the above excerpt, we've initialized our video.js player with id as 'my-video' in the 'player' variable. Next, we added the button to the control bar using the addChild method provided by the controlBar option reference. addChild method takes 3 parameters where the first one is the child that needs to be added, the second one is the options for the child being added and the last one is the index of the child on the control bar. Since we've set the index as 0, our button will be added at the start of the control bar. The addChild method returns the component that gets added as a child.
Later, we used 'myButton.el()' which is responsible for actually creating the dom component of our button. '.el()' is another controlBar method that pushes the component created using addChild() to the HTML DOM. Without this, we won't see our button in the control bar.
At last, we've set the innerHTML of our button as an icon. The icon that we've used is vjs-icon-cancel which shows a cross icon as our button. This icon is officially provided by video.js and you can find all the other icons at the following URL:https://videojs.github.io/font/
Example 1
The complete example for creating and adding a button to the control bar will be as follows −
<!DOCTYPE html>
<html>
<head>
<title>Adding Custom Video.js Control Bar buttons</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.2.0/video.min.js"></script>
</script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="https://www.tutorialspoint.com/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4">
</video>
<script>
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
</script>
</body>
</html>
In the above code snippet, we've done the following −
First, in <body> tag we've create a <video> element with class="video.js vjsdefault- skin vjs-big-play-centered" and 'id' as 'my-video'. This id will be later used in the <script> tag to reference the player.
We've also added some standard HTML video options like controls, muted, autoplay, width, height, etc.
Inside the <source> tag, the path to an mp4 video has been included. Please make sure to update the video path to your video file properly.
In the <script> tag, initially, we've referenced video.js to create a player for the video which has 'id' as 'my-video' and then used the controlBar method to create a button and add it to the HTML of our video player.
On executing the above code, a video will play in our web browser, and in the control bar, you will notice that we'll have a cancel or cross button at the first position. So, we've successfully added a button to our control bar.
Now, if you click the button, you'll notice that nothing actually happens on the video player. The reason for that is we've not added any functionality to our custom button. Let's make our button more interactive by adding some properties in the following section of the article.
Adding Options to the Button
We can configure and change each and every aspect of the button that is added to the control bar like changing the control text, closing the video player, increasing the speed of the video, changing the position of the button, etc.
For the purpose of this article, we'll add a control text to the button and a click method.
Control text is the text that is seen when you hover on a button. It is usually the name of the button which communicates to the end user what this button is about. For example, if you hover your mouse on the full-screen button of a video player, it displays a small text mentioning "Fullscreen" which means the video will switch to full-screen mode if you click the button.
A click method is a function that will handle what is going to happen when a user clicks on our button. In this article, we're going to display an alert message with the click of our cancel button.
Let's start by adding a control text to our button. For adding a control text, we will make use of the 'controlText' option on our button component. Consider the below code snippet for the same.
var myButton = player.controlBar.addChild('button', {}, 0);
// Setting control text for the button hover effect
myButton.controlText("My Cancel Button");
After adding this code snippet to example 1, you'll observe that when you hover over the cancel button in the control bar, it now displays a small text stating "My Cancel Button".
Now, let's move ahead and add a click functionality to our newly created button. For that, we're going to use an 'onClick' method on our button's dom element. The code snippet for the same will look something like this −
var myButtonDom = myButton.el();
// Setting the control button click function
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
The addition of above code excerpt in the above example will add the click function to our video player. You'll observe that now when you click the cancel button, an alert will be shown in the web browser showing 'Cancel Button Clicked!'. You can add any type of functionality inside this function which will be executed when someone clicks our button.
Example 2
Adding both of the above snippets to our code example will look something like this
<!DOCTYPE html>
<html>
<head>
<title>Adding Custom Video.js Control Bar buttons</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
muted="true"
preload="auto"
poster="https://www.tutorialspoint.com/videos/sample.png"
width="560"
height="340"
data-setup="{}"
>
<source
src="https://www.tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player
var player = videojs('my-video');
// Adding button to the control bar
var myButton = player.controlBar.addChild('button', {}, 0);
// Create our button's DOM Component
var myButtonDom = myButton.el();
myButtonDom.innerHTML = '<span class="vjs-icon-cancel"></span>';
// Setting control text for the button hover effect
myButton.controlText("My Cancel Button");
// Setting the control button click function
myButtonDom.onclick = function () { alert('Cancel Button Clicked!')};
</script>
</body>
</html>
If you execute the above example, you'll observe the video player will have a Cancel button in the starting of control bar. Our control text, i.e., "My Cancel Button" will be displayed when you hover your mouse over the button and an alert will be shown on the click.
Conclusion
In this tutorial, we learned how to create a new custom button and add it to the control bar of our video player using video.js. We used the controlBar's addChild method to create the button component and then used the ".el()" method to add the button to the HTML DOM. After adding the button, we also customized the control text and enhanced the functionality of the button using the onClick method.
5K+ Views
