添加自定义Video.js控件栏按钮
我在video.js上工作已经有一天了，所以我是一个真正的新手，今天我只想在两个视频之间添加一个按钮。我用jQuery快速而简单地做到了这一点。但我更愿意在javascript中这样做，以便更好地理解整个video.js。
迄今已完成：
- 我已经从github下载了最新版本的video.js。
- 球员做得很好。
- 仔细阅读指南。
- 尝试了他们的示例代码。
他们的按钮创建代码：
var myButton = video.controlBar.addChild('MyButton', {
text: 'Press Me',
children: {
buttonChildExample: {
buttonChildOption: true
}
}
});来自控制台的错误:未定义的TypeError:未定义不是一个函数
因此没有定义addChild()，这是奇怪的，因为它在它们的docs/api中。
有人知道如何在他们的控制棒上添加按钮吗？任何帮助将不胜感激，如果你需要更多的信息，让我知道。谢谢。
更新：
1)如文档所示，我已经将上述代码包装在videojs.ready()中。但还是没有用。
( 2) component =新窗口‘’videojs‘(this.player_欧元/此，选项)；
在video.dev.js (第1655行)中，抛出错误“未定义的TypeError:未定义的函数”
3)在控制台中对新窗口‘视频in’进行评估时，出现了“TypeError: The element or ID Supplied is not valid. (videojs).”错误
再次感谢你在adavanced的帮助。
回答 4
Stack Overflow用户
发布于 2014-03-13 15:09:27
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>Stack Overflow用户
发布于 2015-10-12 20:36:07
从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);利润！
Stack Overflow用户
发布于 2014-10-31 06:46:53
(本答复与视频4.9.1有关)
要将自定义按钮添加到视频vjs的控制栏中，需要创建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: literal }的原因是，对象文字中包含的任何内容都将作为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集线器上的视频on git repo获取最新的代码，这将使在您的IDE中查找各种源变得更容易。ui组件框架并不是非常复杂，可以在几天内通过一些耐心的源代码演练来掌握。
https://stackoverflow.com/questions/20984161
复制相似问题
腾讯云开发者
