Question

我尝试了各种在网上找到的代码片段，但我无法使用它们来处理当前版本的VideoJS（即版本7）。我对javascript编程非常陌生，并且该文档未提供有关如何实现此功能的示例代码。这里有一个Codepen可用于尝试自定义播放器：https://codepen.io/heff/pen/EarCt这是向VideoJS播放器文档添加有关向播放器添加按钮的链接：https://docs.videojs.com/button

我尝试从各种网页插入代码，并尝试在StackExchange上进行5-6个不同的讨论，但没有一个使按钮显示在视频进度条旁边。

我只是想创建一个带有文本“退出课程”的按钮，该按钮将显示在视频进度栏的右侧，并且在按下时将执行javascript功能。

熟悉VideoJS的人可以看一下上面的Codepen链接，看看他们是否可以向播放器添加这样的按钮吗？谢谢！

我需要向此问题添加一些代码，因此这是我在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
                            }));

Answer 1

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);
}

这与我在S3 video player插件S3MediaVault中使用的代码相同。

我使用文本（“ 30 <<”和“ >> 30”）的原因是因为在播放器中，颜色都是可自定义的。因此，如果我使用图标图像进行后退和前进，那么每次有人自定义播放器颜色（包括控制栏中的所有文本）时，我都无法更改图标的颜色。

Answer 2

我已经用source code 7.4.1测试了this snippet，并且工作正常。我使用video.js的取消图标代替了文本，以节省控制栏上的空间。试试看：

<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>

如何在VideoJS Player v.7的控制栏中添加自定义文本按钮？

2 个答案: