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

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

迄今为止已完成：
一,。我已经从github下载了最新版本的video.js。
二,。这名球员工作得很好。
三,。通读这些指南。
四,。尝试了他们的示例代码

他们创建按钮的代码：

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

控制台错误：未捕获类型错误：未定义不是函数

因此没有定义addChild（），这很奇怪，因为它在它们的文档/api中

有人知道如何在控制栏中添加按钮吗？ 任何帮助都将不胜感激，如果您需要更多信息，请告诉我。谢谢

更新：
1） 如文档所示，我已将上述代码包装在videojs.ready（）中。但还是无济于事

2） component=新窗口['videojs'][componentClass]（this.player 124; | this，options）
在video.dev.js（第1655行）中抛出错误“UncaughtTypeError:undefined不是函数”

3） 在console中评估新窗口['videojs']时出现错误“

TypeError:提供的元素或ID无效。（videojs）。

---

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

未定义的

源于
MyButton
不是
vjs.Component
这一事实。关于这一点的文档有点不清楚，我花了一段时间才理解到底发生了什么

声明第一个参数是“要添加的子类名称或实例”-它指的是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>


（此答案与videojs 4.9.1相关）

要将自定义按钮添加到videojs的控制栏，您需要创建一个vjs组件，并将其添加到播放器设置选项中控制栏的子项中。下面是一个设置，我在其中向控制栏添加了3个自定义组件（PlayeBackSpeedPooverMenu，选择BitrateControlButton和verticalVolumeMenuButton）：

controlbar组件声明为“selectBitrateControlButton”：{src:videosrc}的原因是，对象文本中包含的任何内容都将作为选项参数注入components init（）函数。这在使用videojs.dev.js文件而不是闭包编译的cdn版本时非常有效（这完全是另一回事）以下是一些定义出现在控制栏上的vjs组件的示例：



我完全推荐从git hub上的videojs git repo获取最新代码，这将使您更容易在IDE中查找各种源代码。ui组件框架并不十分复杂，可以在几天内通过一些耐心的源代码演练来掌握。
从v5开始：

var videoJsButtonClass = videojs.getComponent('Button');
var concreteButtonClass = videojs.extend(videoJsButtonClass, {

  // The `init()` method will also work for constructor logic here, but it is 
  // deprecated. If you provide an `init()` method, it will override the
  // `constructor()` method!
  constructor: function() {
    videoJsButtonClass.call(this, videojsInstance);
  }, // notice the comma

  handleClick: function(){
    // Do your stuff
  }
});

var concreteButtonInstance = videojsInstance.controlBar.addChild(new concreteButtonClass());
    concreteButtonInstance.addClass("vjs-" + name);

利润！
我的建议是设置一个示例，这样人们会更容易回答。检查一下，我写了关于这个确切的主题->你能更详细地描述一下吗？如何将此按钮添加到
控制栏
？如何分配
单击
事件处理程序？谢谢。仅供参考，你完全可以深入按钮DOM并附加到“click”事件，但这不会捕获跨框架的“invoke”之类的内容。只需使用那里的内联覆盖以避开“危险区域”，谢谢，非常有用-如果VideoJS能够进行适当的文档记录就好了！v5变更列表中有更多详细信息：。
var videoJsButtonClass = videojs.getComponent('Button');
var concreteButtonClass = videojs.extend(videoJsButtonClass, {

  // The `init()` method will also work for constructor logic here, but it is 
  // deprecated. If you provide an `init()` method, it will override the
  // `constructor()` method!
  constructor: function() {
    videoJsButtonClass.call(this, videojsInstance);
  }, // notice the comma

  handleClick: function(){
    // Do your stuff
  }
});

var concreteButtonInstance = videojsInstance.controlBar.addChild(new concreteButtonClass());
    concreteButtonInstance.addClass("vjs-" + name);