我在看的videojs插件的新API： https://github.com/videojs/video.js/blob/master/docs/plugins.md
是否有项添加到控制条正确的方法是什么？ 我期待加入“推特”，“喜欢”和其他杂七杂八的按钮。
我hackishly试图迄今完成这个无济于事。
我也期待在新的插件样本。 这些都不修改控制杆。
谢谢！
Answer 1:
它看起来对我来说，代码库是目前有点动荡，也许会有一声呈现一个更加一致的插件模式 - 但在此期间 - 如果你还没有发现如何将元素添加到控制条，我将介绍一个简单的例子。
所有我要做的就是添加一个组件到videojs核心对象，并告诉控制条，包括该设备作为它的一个子。
我最喜欢的视频JS的方面是借来的图标库FontAwesome 。 这个例子将使用的图标，叽叽喳喳字形从那里，但随意使用自定义的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>
你可以用你添加成分的种类，样式，和它的功能发挥明显，但至少应该告诉你如何开始。
Answer 2:
我只是想有点更新添加到这个问题。 您现在可以使用addChild上的Video.js大多数组件。 我下面更新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>
Answer 3:
好像现在的VideoJS社区适用于近期的4.0版本的插件的缺乏 - 因为我需要一个按钮不同的充视频质量我会很快潜入这间改变。
对于一个快速的介绍：你可以与这个文档连接插件VideoJS 4.0： https://github.com/videojs/video.js/blob/master/docs/plugins.md
正如我需要一些研究发现，wiki页面，我想我应该分享。
Answer 4:
我一直在寻找这个问题，以及和发现这一点： https://github.com/jDavidnet/video-js-plugins我无法得到它的工作，但如果你我可以计算你得到相当多，你所需要的。 当你这样做，请与我分享？
Answer 5:
建立在b.kelly的代码，您还可以通过删除不需要的按钮扩展功能，例如下面的代码将删除一些较常见的按钮
var vid = videojs("example_video_1", {
plugins : { tweet : {} },
children: {
controlBar: {
children: {
volumeControl: false,
muteToggle: false,
playToggle: false,
}
}
}
});
文章来源: VideoJS 4.0 Plugin: How to properly add items to the controlBar?
