Menu
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.
Thanks!
601
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.
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.
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.
131
I just wanted to add a bit of an update to this question. You can now use addChild on most components in Video.js. I've updated ctangney's code below.
<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>
It seems like right now the VideoJS community lacks of plugins applicable for the recent 4.0 release - as I need a button to change between differnt video qualities I will dive into that soon.
For a quick intro: You can get into connecting plugins to VideoJS 4.0 with this documentation: https://github.com/videojs/video.js/blob/master/docs/plugins.md
As I've needed some research to find that wiki page, I thought I should share it.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
