添加自定义 Video.js 控制栏按钮 [英] Adding Custom Video.js Control Bar buttons

问题描述

我已经在 video.js 上工作了一天，所以当涉及到这些东西时，我是一个真正的新手今天我只想添加一个可以在两个视频之间切换的按钮.我在 jQuery 中快速轻松地做到了.但我更愿意用 javascript 来更好地理解 video.js 作为一个整体.

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

他们的按钮创建代码:

 var myButton = video.controlBar.addChild('MyButton', {文字:'按我'，孩子们: {按钮子示例:{buttonChildOption: 真}}});

来自控制台的错误: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 (line 1655) 中抛出错误uncaught TypeError: undefined is not a function"

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

再次感谢您在高级方面的帮助.

解决方案

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

文档声明第一个参数是要添加的子项的类名或实例" - 它指的是 JavaScript 类而不是 CSS 类.添加按钮的正确方法如下:

var myButton = video.controlBar.addChild('button', {文字:按我"，//其他选项});myButton.addClass("html-classname");

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

<div class='vjs-control-content"><span class="vjs-control-text">按我</span>

I've been working on video.js for like a day so I'm a real newbie when it comes to this stuff Today I just wanted to add a button that will switch between two videos. I did it in jQuery quick and easy. But I would rather do it in javascript to better understand video.js as a whole.

Done so far:
1. I have downloaded the most recent version of video.js from github.
2. Player is working great.
3. Read through the guides.
4. Tried their example code.

Their Code for button creation:

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

Error from console : Uncaught TypeError: undefined is not a function

So no addChild() is defined which is odd because its in their docs/api.

Does anyone know how to add buttons to their controlbar ? Any help would be appreciated and if you need any more info let me know. Thanks.

UPDATE:
1) I have wrapped the above code in a videojs.ready() as the documentation suggests. But still to no avail.

2) component = new window['videojs'][componentClass](this.player_ || this, options);
in video.dev.js (line 1655) throws the error "uncaught TypeError: undefined is not a function"

3) Evaluating new window['videojs'] in console gave me the error " TypeError: The element or ID Supplied is not valid. (videojs).

Again thanks for your help in adavanced.

解决方案

The undefined is coming from the fact that MyButton is not a vjs.Component. The documentation around this is a little unclear and it took me a while to understand what is going on.

The documentation states that the first argument is the "class name or instance of a child to add" - it's referring to a JavaScript class rather than a CSS class. The correct way to add a button is as follows:

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

myButton.addClass("html-classname");

This will add the following to your controlbar:

<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>

这篇关于添加自定义 Video.js 控制栏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！