VideoJS 4.0 插件:如何正确地向 controlBar 添加项目? [英] VideoJS 4.0 Plugin: How to properly add items to the controlBar?
问题描述
我正在研究 videojs 插件的新 API:https://github.com/videojs/video.js/blob/master/docs/plugins.md.com/videojs/video.js/blob/master/docs/plugins.md
I'm looking at the new API for videojs plugins: https://github.com/videojs/video.js/blob/master/docs/plugins.md
是否有适当的方法将项目添加到控制栏?我希望添加推特"、喜欢"和其他各种按钮.
Is there a proper way to add items to the control bar? I'm looking to add 'tweet', 'like' and other assorted buttons.
到目前为止，我已经尝试完成此操作，但无济于事.
I've hackishly attempted to accomplish this to no avail thus far.
我确实查看了新的插件示例.这些都不修改控制栏.
I did look over the new plugin samples. None of these modify the control bar.
谢谢！
推荐答案
在我看来，代码库目前处于一些动荡之中，也许很快就会有一个更加连贯的插件模式——但在同时 - 如果您还没有发现如何向控制栏添加元素，我将提供一个简单的示例.
It looks to me like the codebase is in a bit of upheaval at the moment, and maybe there will be a more coherent plugin pattern presented soon - but in the meantime - in case you haven't discovered how to add elements to the control bar, I'll present a trivial example.
我要做的就是向 videojs 核心对象添加一个组件，并告诉控制栏将该组件作为其子项之一包含在内.
All I'm going to do is add a component to the videojs core object, and tell the control bar to include that component as one of its children.
我最喜欢的视频 js 方面之一是从 FontAwesome 借来的图标库.此示例将使用那里的 icon-twitter 字形，但您可以随意使用自定义 css/html 来满足您的需求.
One of my favorite aspects of video js is the icon library borrowed from FontAwesome. This example will use the icon-twitter glyph from there, but feel free to use custom css/html to suit your needs.
<!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>
您显然可以尝试添加的组件类型、样式和功能，但这至少应该告诉您如何开始.
You can obviously play with the type of component you add, the style, and the functionality of it, but that should at least show you how to get started.
这篇关于VideoJS 4.0 插件:如何正确地向 controlBar 添加项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
