video.js - VideoJS 4.0 Plugin: How to properly add items to the controlBar? -
i'm looking @ new api videojs plugins: https://github.com/videojs/video.js/blob/master/docs/plugins.md
is there proper way add items control bar? i'm looking add 'tweet', 'like' , other assorted buttons.
i've hackishly attempted accomplish no avail far.
i did on new plugin samples. none of these modify control bar.
thanks!
it looks me codebase in bit of upheaval @ moment, , maybe there more coherent plugin pattern presented - in meantime - in case haven't discovered how add elements control bar, i'll present trivial example.
all i'm going add component videojs core object, , tell control bar include component 1 of children.
one of favorite aspects of video js icon library borrowed fontawesome. example use icon-twitter glyph there, feel free use custom css/html suit 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> <!-- 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 we're not doing in prototype.createel() because // won't called component.init (due 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 screen reader user know text of 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 play type of component add, style, , functionality of it, should @ least show how started.
Comments
Post a Comment