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

我一直在为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
       }
      }
     });

控制台出错：未捕获TypeError：undefined不是函数

所以没有定义addChild(),这是奇怪的,因为它在他们的docs / api中.

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

更新：
1)我已将上述代码包装在videojs.ready()中,如文档所示.但仍无济于事.
2)component = new window [‘videojs’] [componentClass](this.player_ || this,options);在video.dev.js(第1655行)中抛出错误“未捕获TypeError：undefined不是函数”
3)在控制台中评估新窗口[‘videojs’]给了我错误“TypeError：提供的元素或ID无效.(videojs).

再次感谢你在adavanced的帮助.

解决方法

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>

原文地址：https://www.jb51.cc/js/156255.html