javascript - 如何将自定义文本按钮添加到 VideoJS Player v.7 的控制栏？

Question

我已经尝试了我在网上找到的各种代码片段，但我无法让它们中的任何一个与 VideoJS 的当前版本(版本 7)一起使用。我对 javascript 编程非常陌生，文档确实如此不提供有关如何实现此功能的示例代码。这里有一个codepen，可以用来试验自定义播放器:https://codepen.io/heff/pen/EarCt这是有关向播放器添加按钮的 VideoJS 播放器文档的链接:https://docs.videojs.com/button

我尝试插入来自各种网页的代码和我在 StackExchange 上找到的 5-6 个不同的讨论，但它们都没有在视频进度条旁边显示一个按钮。

我只是想创建一个带有文本“退出类(class)”的按钮，该按钮将显示在视频进度条的右侧，按下时将执行一个 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

我测试过this snippet与 video.js 7.4.1，它工作正常。我使用 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>