Write plugin for VideoJS 5

Question

When I trying to use the newest version of videojs 5, the following code is no longer worked. I am trying to write a videojs plugin, but videojs 5 use ecmascript 6, which is new to me. Any helps are appreciated.

   videojs.SharingButton = videojs.Button.extend({
    /** @constructor */
    init: function(player, options){
        videojs.Button.call(this, player, options);
        this.player = player;
    }
});

videojs.SharingButton.prototype.createEl = function(tagName,options) {
    return videojs.Component.prototype.createEl(tagName,{
        className: this.buildCSSClass(),
        innerHTML: '',
        role: 'button',
        'aria-live': 'polite', // let the screen reader user know that the text of the button may change
        tabIndex: 0
    });
}

videojs.SharingButton.prototype.buttonText = 'Share Video';

videojs.SharingButton.prototype.options_ = {};

videojs.SharingButton.prototype.buildCSSClass = function(){
    return 'vjs-sharing-control ';
};

Answer 1

Hi i had the same problem, Replace this Code

videojs.SharingButton = videojs.Button.extend({

by

var SharingButton = videojs.getComponent('Button');
videojs.SharingButton = videojs.extend(SharingButton , {...});
videojs.registerComponent('SharingButton', SharingButton);

var myButton = myPlayer.addChild('SharingButton');

If you want to add a Component that is not a direct child of the player element you will have to climb the child elements and add the Component. Like:

parentComponent = myPlayer.getChild('component1').getChild('component2')...
parentComponent.addChild('SharingButton')

Beware that the player components have to start lowercase like e.g. controlBar.

Find the component tree in this link.

A lot of changes has being made as version 5.0 is built (see this link), and unfortunately most videojs plugins didn't make an update of their codes! one of theme is Social button sharing