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

控制台出错：未捕获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: 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>

Answer 2

从v5开始：

.login {
    -ms-transform: translate(50%, 50%); /* IE 9 */
    -webkit-transform: translate(50%, 50%); /* Chrome, Safari, Opera */
    transform: translate(50%, 50%); /* Default syntax */
}

PROFIT！

Answer 3

（这个答案与videojs 4.9.1相关）

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

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

控制栏组件被声明为'selectBitrateControlButton'的原因：{src：videosrc}是因为对象文字中包含的内容将作为options参数注入到组件init（）函数中。这很适用于videojs.dev.js文件，而不是封闭编译的cdn版本（这是一个完整的'其他故事）这些是定义出现在控制栏上的vjs组件的一些例子：

https://github.com/videojs/video.js/blob/master/src/js/control-bar/play-toggle.js#L8 https://github.com/videojs/video.js/blob/master/src/js/control-bar/fullscreen-toggle.js#L8

我完全建议从git hub上的videojs git repo获取最新代码，这样可以更轻松地查找IDE中的各种源代码。 ui组件框架并不是非常复杂，可以在几天内通过一些患者源代码钻取来掌握。

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

3 个答案: