我已经在 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
}
}
});
来自控制台的错误：未捕获类型错误：未定义不是函数
所以没有定义 addChild() ，这很奇怪，因为它在他们的 docs/api 中。
有人知道如何向控制栏添加按钮吗？ 任何帮助将不胜感激，如果您需要更多信息，请告诉我。谢谢。
更新：
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).再次感谢您的帮助。
undefinedMyButtonvjs.Component文档指出第一个参数是“要添加的子级的类名或实例”——它指的是 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>
从 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);
利润！
（此答案与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} 的原因是因为对象文字中包含的任何内容都将作为选项参数注入到组件 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 存储库获取最新代码，这将使您更轻松地在 IDE 中查找各种源。 ui 组件框架并不是非常复杂，通过一些耐心的源代码钻研可以在几天内掌握。
我在这里尝试了两个最佳答案，它们都有效，但没有解决其他问题，例如按钮不显示文本或图标以及缺少标题。
这是我的解决方案：
const customInvertFilterButton: videojs.Button = this.video.controlBar.addChild('button')
customInvertFilterButton.addClass('vjs-custom-invert-filter-button')
customInvertFilterButton.addClass('vjs-icon-spinner')
customInvertFilterButton.setAttribute('title', 'Invert')
customInvertFilterButton.on('click', () => {
this.invertFilter = !this.invertFilter
customInvertFilterButton.setAttribute('title', this.invertFilter ? 'Uninvert' : 'Invert')
})
这里，vjs-icon-spinner类是一个vjs图标。他们所有的图标都在这里：
https://videojs.github.io/font
或者，要了解有关其图标的更多信息，请查看此内容（我发现它不太有用）：
https://github.com/videojs/font
最后，图标渲染得太小。您可以使用此 SCSS 调整它们的大小和外观：
.vjs-custom-invert-filter-button {
cursor: pointer;
&.vjs-icon-spinner:before {
font-size: 1.8em;
line-height: 1.67;
}
}
更多图标的可选附加信息
VJS 图标集是 Material 图标集的子集。
可以使用任何材质图标，如下所示：
// https://github.com/google/material-design-icons/tree/master/font
// https://google.github.io/material-design-icons/#setup-method-2-self-hosting
@font-face {
font-family: 'VJS Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(/assets/fonts/vjs-mat-icons/MaterialIcons-Regular.ttf) format('truetype');
}
.vjs-material-icons {
font-family: 'VJS Material Icons', sans-serif;
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size but also suggests 18px, 24px, 36px, 48px */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
上述字体文件可以从https://github.com/google/material-design-icons/tree/master/font
下载然后使用任何材质图标：
// https://fonts.google.com/icons
.vjs-custom-brightness-down-button {
cursor: pointer;
&.vjs-icon-brightness-down {
font-family: 'VJS Material Icons', serif;
font-weight: normal;
font-style: normal;
&:before {
content: "\e1ad"; // this relates to a specific icon
font-size: 1.4em;
line-height: 1.67;
}
}
}
请注意，CSS 内容属性中看到的 unicode 代码可以从 https://fonts.google.com/icons
获取最后，.ts：
private initCustomBrightnessDownButton() {
const customBrightnessDownButton: videojs.Button = this.video.controlBar.addChild('button')
customBrightnessDownButton.addClass('vjs-custom-brightness-down-button')
customBrightnessDownButton.addClass('vjs-material-icons')
customBrightnessDownButton.addClass('vjs-icon-brightness-down')
customBrightnessDownButton.setAttribute('title', 'Brightness -')
customBrightnessDownButton.on('click', () => {
this.brightness = this.brightness > 10 ? this.brightness - 10 : this.brightness
})
}