javascript - 添加自定义 Video.js 控制栏按钮

Question

我已经在 video.js 上工作了一天，所以在谈到这些东西时我是一个真正的新手今天我只是想添加一个按钮来在两个视频之间切换。我在 jQuery 中快速简单地完成了它。但我宁愿用 javascript 来做，以便更好地理解 video.js 作为一个整体。

到目前为止完成:
1.我已经从 github 下载了最新版本的 video.js。
2.播放器工作得很好。
3.通读指南。
4.尝试了他们的示例代码。

他们的按钮创建代码:

 var myButton = video.controlBar.addChild('MyButton', {
        text: 'Press Me',
        children: {
        buttonChildExample: {
        buttonChildOption: true
       }
      }
     });

控制台错误:Uncaught TypeError: undefined is not a function

所以没有定义 addChild() 这很奇怪，因为它在他们的文档/api 中。

有谁知道如何将按钮添加到他们的控制栏？ 任何帮助将不胜感激，如果您需要更多信息，请告诉我。谢谢。

更新:
1) 如文档所示，我已将上述代码包装在 videojs.ready() 中。但仍然无济于事。

2) component = new window['videojs'][componentClass](this.player_ || this, options);
在video.dev.js(第1655行)中抛出错误“uncaught TypeError: undefined is not a函数”

3) 在控制台中评估新窗口 ['videojs'] 给了我错误“TypeError: The element or ID Supplied is not valid. (videojs).

再次感谢您在 adavanced 中的帮助。

Answer 1

undefined 是因为 MyButton 不是 vjs.Component。围绕这个的文档有点不清楚，我花了一段时间才明白发生了什么。

The documentation指出第一个参数是“要添加的子类的类名或实例”——它指的是 JavaScript 类而不是 CSS 类。添加按钮的正确方法如下:

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

myButton.addClass("html-classname");

这会将以下内容添加到您的控制栏:

<div class="vjs-control html-classname" aria-live="polite" tabindex="0">
  <div class='vjs-control-content">
    <span class="vjs-control-text">Press me</span>
  </div>
</div>