Adding Custom buttons and/or Controls to Video.js

Video.JSHTML5Web Development

In this tutorial, we'll have a look at how to create a custom button and add it to our video player created using video.js.

Adding a custom button to a video player allows you to have more control and flexibility over the player. With the help of a button, complex functionalities could be added to the video player, which is further going to enhance the user experience of a person interacting with the video player. For example, adding a button that shows the stats of the video or a button that lets you show a popup on the screen, etc.

So, there can be multiple use cases for a custom button. Now let's start creating our own button and add it to the video player in the next section of the article.

Adding a Custom Button

We're going to create a custom button in the control bar of our video player, that will give an alert with the text "Hello" in the browser when clicked.

For creating a button, we're going to use the option references available to video.js specifically. The exact reference which will be used in this part of the article is 'controlBar'.

'controlBar' allows you to create and add various elements to your player by providing multiple methods like getChild or addChild.

Example

Now, let's create a video player and use 'controlBar' method to add a button to it. Consider the below code for the same.

<html> <head> <!-- Importing Video.js CSS using URL --> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="550" height="350" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <!-- Imported Video.js using CDN URL --> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> <script> var player = videojs('my-video'), var myButton = player.controlBar.addChild('button', {}); </script> </body> </html>

In the above code snippet, we've done the following −

  • First, in body, we've create a <video> element with class="video.js vjs-defaultskin" and 'id' as 'my-video'. This id will be later used in the <script> tag to reference the player.

  • Inside, the <source> tag, path to an mp4 video has been included. Please make sure to update the the video path to your video file.

  • In the <script> tag, initially, we've referenced video.js to create a player for the video which has 'id' as 'my-video'.

  • Next, we've used the 'addChild' option of 'controlBar' to add a new element to our video player's control bar.

var myButton = player.controlBar.addChild('button', {});
  • Further, In the 'addChild' we've passed two params - the first one being the string 'button' which is referencing that we need to create a button and then in the second param, the options to that button have been passed.

But, after executing the code, you'll notice that nothing has been added to our video player and our newly added button can't be seen in the control bar.

Actually, the problem is that we've created the button element but we've not added it to the HTML Dom.

To do the same, we've to get the buttons DOM element and add the inner HTML with the function of our newly created button. Consider the below code for the following −

// getting the buttons DOM Component and
// saving it to 'myButtonDom' variable
var myButtonDom = myButton.el();

// now setting the innerhtml of our button to the DOM
myButtonDom.innerHTML = ' < span > 😁 < /span>';

// setting the onClick method of our button to the DOM
myButtonDom.onclick = function () { alert('Hello') };

In the above piece of code, first we've fetched the DOM component of our button, i.e., myButton and saved it as myButtonDom.

Next, innerHTML has been added to the dom component of the button. We've used a smiling emoji hex code (😁) for the button icon in the <span> tags.

Finally, in the last line of code, we've set a function to be executed on the onClick method of our button. The function pops an alert with the text hello in the browser on our button click.

So, the complete example for creating and adding a button to the control bar will be as follows −

<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 vjs-default-skin" controls preload="auto" width="550" height="400" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> <script> var player = videojs('my-video'); var myButton = player.controlBar.addChild('button', {}); var myButtonDom = myButton.el(); myButtonDom.innerHTML = ' < span > 😁 < /span>'; myButtonDom.onclick = function () { alert('Hello') }; </script> </body> </html>

Now, you'll notice that the custom button has been added at the end of the control bar. We can also change the position of your button on the control bar.

For example, if we need to place our button before the full-screen toggle button, then we can do so by getting the index of a full-screen button and passing it to the addChild option reference.

Consider the below code for adding our button before the full-screen toggle button −

// Getting the FullScreenToggle Button component
var fullscreen = player.controlBar.getChild("FullscreenToggle");

// Getting the index of the FullScreenToggle Button component
var index = player.controlBar.children().indexOf(fullscreen);

// Passing the index as a parameter to the addChild
// method while adding our button
var myButton = player.controlBar.addChild("button", {}, index);

In this code snippet, first we've fetched the full-screen toggle button component using the 'getChild' method of the 'controlBar' option reference. Next, we've stored the index of the full-screen toggle button component using the 'indexof' method. And finally, we've passed that index, while adding our button in the 'addChild' method.

Example

So, the complete example would look something like this.

<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 vjs-default-skin" controls preload="auto" width="550" height="400" poster="sample.png" data-setup="{}" > <source src="https://www.tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <script src="https://www.tutorialspoint.com/videos/video1.mp4"></script> <script> var player = videojs('my-video'); var myButton = player.controlBar.addChild('button', {}); var fullscreen = player.controlBar.getChild("FullscreenToggle") var index = player.controlBar.children().indexOf(fullscreen) var myButton = player.controlBar.addChild("button", {}, index); var myButtonDom = myButton.el(); myButtonDom.innerHTML = ' < span > 😁 < /span>'; myButtonDom.onclick = function () { alert('Hello') }; </script> </body> </html>

If you execute the above example, you'll observer the video player will have an emoji button in the control bar on the left of the full screen toggle button. On the click of the emoji button, an alert with the text 'hello' will be shown in the browser.

Conclusion

In this tutorial, we learned how we can create a new custom button for our video player control bar. We first saw how to add a button to the control bar with the help of an example. A lot of video.js option reference methods were also explained in the example. Later, we understood how can we change the position of the button in the control bar with another example.

raja
Updated on 03-Oct-2022 09:59:04

Advertisements