首页 文章

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

提问于
浏览 次
6

我一直在为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中 .

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

UPDATE:
1）我已将上述代码包装在videojs.ready（）中，如文档所示 . 但仍无济于事 .

2）component = new window ['videojs'] [componentClass]（this.player_ || this，options）;
在video.dev.js（第1655行）抛出错误"uncaught TypeError: undefined is not a function"

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

再次感谢你在adavanced的帮助 .

javascript video video.js

3 回答

  • 8

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

    利润！

    回复于
  • 12

    （这个答案与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组件框架并不是非常复杂，可以在几天内通过一些患者源代码钻取来掌握 .

    回复于
  • 0

    undefined 来自 MyButton 不是 vjs.Component 的事实 . 围绕这个的文档有点不清楚，我花了一段时间来了解发生了什么 .

    The documentation声明第一个参数是"class name or instance of a child to add" - 它指的是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>
    回复于

相关问题