VideoJS 5 plugin add button

Question

I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).

I just want to add a button next to the big play button... Can someone help me?

Thanks...

PS: I'm using it in angularJS but I guess this can not a problem

Answer 1

This is how you can add download button to the end of control bar without any plugins or other complicated code:

var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
    constructor: function () {
        vjsButtonComponent.apply(this, arguments);
    },
    handleClick: function () {
        document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
    },
    buildCSSClass: function () {
        return 'vjs-control vjs-download-button';
    },
    createControlTextEl: function (button) {
        return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
    }
}));

videojs(
    'player-id',
    {fluid: true},
    function () {
        this.getChild('controlBar').addChild('DownloadButton', {});
    }
);

I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.

How it works:

1. We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
2. In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
3. buildCSSClass - set button classes ('vjs-control' is must have!)
4. createControlTextEl - adds content to the button (in this case - an icon and title for it)
5. handleClick - does something when user presses this button
6. After player was initialized we're adding 'DownloadButton' to 'controlBar'

Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar

Answer 2

This is how I created a simple button plugin for videojs 5:

(function() {
var vsComponent = videojs.getComponent('Button');

// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
    constructor: function() {
        vsComponent.call(this, videojs, null);
    }
});

// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';

// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};

// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
    // Add our className to the returned className
    return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};

// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
    // Add specific click actions here.
    console.log('clicked');
};

videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
    return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};

var pluginFn = function(options) {
    var SampleButton  = new videojs.SampleButton(this, options);
    this.addChild(SampleButton);

    return SampleButton;
};

videojs.plugin('sampleButton', pluginFn);
})();

You can use it this way:

var properties = { "plugins": { "muteBtn": {} } }

var player = videojs('really-cool-video', properties , function() { //do something cool here });

Or this way:

player.sampleButton()