I want to make a button which is a link to another page to the video js video player which I am using but nothing seems like working. After adding the button it got added to the control panel of the player but the button is not visible to the user. Also, I want to add a link to that button once it got pressed it should open a new page. I couldn't find good documentation of the same the code which I am trying is posted here.

var player = videojs('my-video');
  var button = player.addChild('button');
  var myButton = player.controlBar.addChild('button', {
      text: "Press me",
      // other options
    });

How to extent this fuction such as onclick events like that. I guess there will be some methods which i can define inside player.controlBar.addChild('button' This itself

I want to make a button which is a link to another page to the video js video player which I am using but nothing seems like working. After adding the button it got added to the control panel of the player but the button is not visible to the user. Also, I want to add a link to that button once it got pressed it should open a new page. I couldn't find good documentation of the same the code which I am trying is posted here.

var player = videojs('my-video');
  var button = player.addChild('button');
  var myButton = player.controlBar.addChild('button', {
      text: "Press me",
      // other options
    });

How to extent this fuction such as onclick events like that. I guess there will be some methods which i can define inside player.controlBar.addChild('button' This itself

• javascript
• video.js

• Possible duplicate of How to create customs button in video js – Devsi Odedra Commented May 22, 2019 at 4:24
• I just want an onclik event and the name on the tool bar how to do that? The answers of the provided links are too lengthy – AdminRoy Commented May 22, 2019 at 4:30

2 Answers 2

Text you pass in your option is available as a controlText and not a display text. ControlText creates a span in you button which is displayed when hovered. This control text is present in all the ponents in video js.

To add a text in videojs here is a simple way.

var player = videojs('my_video_1');

// When you pass text in options it just creates a control text,
// which is displayed as tooltip when hovered on 
// this button viz the span in you div,
var myButton = player.controlBar.addChild("button");

// There are many functions available for button ponent 
// like below mentioned in this docs 
// https://docs.videojs./button. 
// You can set attributes and clasess as well.

// Getting html DOM
var myButtonDom = myButton.el();
// Since now you have the html dom element 
// you can add click events


// Now I am setting the text as you needed.
myButtonDom.innerHTML = "Hello";

myButtonDom.onclick = function(){
  alert("Redirecting");
  window.location.href = "https://www.google."
}  

Instead of setting an inner html you can play around and add any html DOM attribute since at the end it is only a button.

Adding Codepen link for code demonstration https://codepen.io/vaibhav281128/pen/NWawWjr

In case if you want to register your button as a custom ponent https://codepen.io/vaibhav281128/pen/bGoYGPR

My solution in case you also want to control the position of your button:

addButtonToPlayer() {
      let myButton = player.controlBar.addChild('button');
      myButton.controlText('tooltip text');
      player.controlBar
        .el()
        .insertBefore(
          myButton.el(),
          player.controlBar.getChild('fullscreenToggle').el()
        );
      let buttonDom = myButton.el();
      buttonDom.innerHTML = '⬇'; // button text/emoji
      buttonDom.onclick = function() {
        alert('Hey');
      };
    }