我正在查看 videojs 插件的新 API:https://github.com/videojs/video.js/blob/master/docs/plugins.md
是否有将项目添加到控制栏的正确方法？我希望添加“推特”、“喜欢”和其他各种按钮。
到目前为止，我一直试图完成这项工作，但无济于事。
我确实查看了新的插件示例。这些都不修改控制栏。
谢谢!
最佳答案
在我看来，代码库目前有点困惑，也许很快就会有一个更连贯的插件模式 - 但与此同时 - 如果你还没有发现如何向控制栏添加元素，我将举一个简单的例子。
我要做的就是向 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 - VideoJS 4.0 插件 : How to properly add items to the controlBar?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16550897/