我正在查看用于 videojs 插件的新 API：https://github.com/videojs/video.js/blob/master/docs/plugins.md
是否有适当的方法将项目添加到控制栏？我正在寻找添加“tweet”、“like”和其他各种按钮。
到目前为止，我一直在尝试完成此操作，但无济于事。
我确实查看了新的插件示例。这些都不会修改控制栏。
谢谢！
【问题讨论】：
标签： video.js
在我看来，代码库目前有点动荡，也许很快就会出现更连贯的插件模式 - 但与此同时 - 如果你还没有发现如何添加元素到控制栏，我将提供一个简单的示例。
我要做的就是向 videojs 核心对象添加一个组件，并告诉控制栏将该组件作为其子项之一。
我最喜欢视频 js 的一个方面是从 FontAwesome 借来的图标库。此示例将使用那里的 icon-twitter 字形，但您可以随意使用自定义 css/html 来满足您的需求。
<!doctype html>
<html>
<head>
<link href="http://vjs.zencdn.net/4.1.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1.0/video.js"></script>
<!-- For the twitter icon. -->
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<style>
.vjs-control.vjs-tweet-button:before {
font-family: FontAwesome;
content: "\f081";
}
</style>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
<source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm">
</video>
<script>
videojs.Tweet = videojs.Button.extend({
/** @constructor */
init: function(player, options){
videojs.Button.call(this, player, options);
this.on('click', this.onClick);
}
});
videojs.Tweet.prototype.onClick = function() {
alert("TWEET!");
};
// Note that we're not doing this in prototype.createEl() because
// it won't be called by Component.init (due to name obfuscation).
var createTweetButton = function() {
var props = {
className: 'vjs-tweet-button vjs-control',
innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>',
role: 'button',
'aria-live': 'polite', // let the screen reader user know that the text of the button may change
tabIndex: 0
};
return videojs.Component.prototype.createEl(null, props);
};
var tweet;
videojs.plugin('tweet', function() {
var options = { 'el' : createTweetButton() };
tweet = new videojs.Tweet(this, options);
this.controlBar.el().appendChild(tweet.el());
});
var vid = videojs("example_video_1", {
plugins : { tweet : {} }
});
</script>
</body>
</html>
您显然可以使用您添加的组件类型、样式和功能，但这至少应该告诉您如何开始。
【讨论】：
我只是想为这个问题添加一点更新。您现在可以在 Video.js 中的大多数组件上使用 addChild。我在下面更新了 ctangney 的代码。
<script>
/** Tweet Button **/
videojs.Tweet = videojs.Button.extend({
/** @constructor */
init: function(player, options){
videojs.Button.call(this, player, options);
this.on('click', this.onClick);
}
});
videojs.Tweet.prototype.createEl = function() {
var props = {
className: 'vjs-tweet-button vjs-control',
innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">' + ('Tweet') + '</span></div>',
role: 'button',
'aria-live': 'polite', // let the screen reader user know that the text of the button may change
tabIndex: 0
};
return videojs.Button.prototype.createEl(null, props);
};
videojs.Tweet.prototype.onClick = function() {
alert("TWEET!");
};
/** Video.js Plugin Code **/
videojs.plugin('tweet', function( options ) {
options = options || {};
this.controlBar.addChild('tweet', options );
});
/** Set Up Video.js Player **/
var vid = videojs("example_video_1", {
plugins : { tweet : {} }
});
</script>
【讨论】：
现在看来，VideoJS 社区缺少适用于最近 4.0 版本的插件 - 因为我需要一个按钮来在不同的视频质量之间进行切换，我很快就会深入研究。
快速介绍：您可以使用以下文档将插件连接到 VideoJS 4.0：https://github.com/videojs/video.js/blob/master/docs/plugins.md
由于我需要一些研究来找到那个 wiki 页面，所以我想我应该分享它。
【讨论】：
我也在寻找这个，发现这个：https://github.com/jDavidnet/video-js-plugins 我无法让它工作，但如果可以的话，我想你已经得到了你需要的东西。当你这样做时，请与我分享？
【讨论】：
基于 b.kelly 的代码，您还可以通过删除不需要的按钮来扩展功能，例如下面的代码将删除一些更常见的按钮
var vid = videojs("example_video_1", {
plugins : { tweet : {} },
children: {
controlBar: {
children: {
volumeControl: false,
muteToggle: false,
playToggle: false,
}
}
}
});
【讨论】：