CODEWITHSUNDEEP
javascriptvideo.js
michaelanderson
michaelanderson

Reputation: 71

How do I add a custom text button to the control bar of the VideoJS Player v.7?

I have tried various snippets of code that I've found online, but I can't get any of them to work with the current version of VideoJS, which is version 7. I'm very new to javascript programming, and the documentation does not give example code on how to implement this. There is a codepen here that can be used to experiment with customizing the player: https://codepen.io/heff/pen/EarCt This is the link to the VideoJS player documentation on adding a button to the player: https://docs.videojs.com/button

I've tried inserting code from various web page and 5-6 different discussions I found on StackExchange, but none of them make a button appear next to the video progress bar.

I'm simply trying to create a button with the text "Exit Course" that will appear to the right of the video progress bar, and that will execute a javascript function when pressed.

Could someone familiar with VideoJS please take a look at the codepen link above to see if they can add such a button to the player? Thank you!

I'm required to add some code to this question, so here is one piece of code that I tried on codepen:

var setup = {
                  'techOrder' : ['html5', 'flash'],
                  'controls' : true,
                  'preload' : 'auto',
                  'children':{
                      'controlBar': {
                          'children': {
                              'playbackSpeedPopoverMenu': {},
                              'selectBitrateControlButton': {src:videosrc},
                              'verticalVolumeMenuButton': {},
                              'volumeControl': false,
                              'muteToggle':false,
                              'liveDisplay':false,
                          }
                      }
                  };
var player = new vjs.Player(vjs.el("id_of_my_video_element_note_that_theres_no_poundsign"),
                            setup,
                            function() {
                               //this is your ready function
                            }));

Upvotes: 5

Views: 7412

Answers (2)

Ravi Jayagopal
Ravi Jayagopal

Reputation: 934

var player = videojs('video');

var skipBehindButton = player.controlBar.addChild("button");
var skipBehindButtonDom = skipBehindButton.el();
skipBehindButtonDom.innerHTML = "30<<";
skipBehindButton.addClass("buttonClass");
    
skipBehindButtonDom.onclick = function(){
    skipS3MV(-30);
}  

var skipAheadButton = player.controlBar.addChild("button");
var skipAheadButtonDom = skipAheadButton.el();
skipAheadButtonDom.innerHTML = ">>30";
skipAheadButton.addClass("buttonClass");
    
skipAheadButtonDom.onclick = function(){
    skipS3MV(30);
}  

function skipS3MV(skipBy) {
    player.currentTime(player.currentTime() + skipBy);
}

enter image description here

The reason I've used text ("30<<" and ">>30") is because in my player, the colors are all customizable. So if I used an icon image for skip-back and skip-forward, then I wouldn't be able to change the color of the icon every time someone customizes the player colors (which includes the all the text in the control bar).

Upvotes: 4

MartinW
MartinW

Reputation: 5041

I've tested this snippet with 7.4.1 and it works fine. I used video.js's cancel icon instead of text to save space on the control bar. Give it a try:

<script>
  var player = videojs('my-player');
  var button = videojs.getComponent('Button');
  var closeButton = videojs.extend(button, {
    constructor: function() {
      button.apply(this, arguments);
      this.controlText("Exit Course");
      this.addClass('vjs-icon-cancel');
    },
    handleClick: function() {
      this.player().dispose();
    }
  });
  videojs.registerComponent('closeButton', closeButton);
  player.getChild('controlBar').addChild('closeButton', {});
</script>

Upvotes: 5

Related Questions