How to create customs button in video js

Question

I want to create custom button in video js i have tried so many things and search alot when i am applying i found no result i think i have some mistake in my code.

i have setup my player on video js successfully.

This my code which i am trying to add custom button.

<script>
$(document).ready(function(){
   var player = videojs('video1');    
   var myButton = player.controlBar.addChild('button', {
            text: "Press me",
            // other options
          });

   myButton.addClass("html-classname");
});
</script>

and i also tried this code to add button in player from video js component documentation.

<script>
    $(document).ready(function(){
       var player = videojs('video1');    
       var button = player.addChild('button');
       button.el();
    });
</script>

This is my codeOpen fiddle please correct in it what's i am doing wrong.

Answer 1

The way you're creating a new button is working. The button is getting added to the control bar (which you can see in developer tools) but is not visible.

Here is more robust way of creating new buttons. You can do whatever you want in onclick function.

function newButtonToggle () {

    videojs.newButton = videojs.Button.extend({
       init: function(player, options){
        videojs.Button.call(this, player, options);
        this.on('click', this.onClick);
       }
    });

    videojs.newButton.prototype.onClick = function() {
        //Add click routine here..
    };

     //Creating New Button
    var createNewButton = function() {
        var props = {
            className: 'vjs-new-button vjs-control',
            innerHTML: '<div class="vjs-control-content">' + ('New') + '</div>',
            role: 'button',
            'aria-live': 'polite', 
            tabIndex: 0
            };
        return videojs.Component.prototype.createEl(null, props);
    };

    //Adding the newly created button to Control Bar

    videojs.plugin('newButton', function() {
        var options = { 'el' : createNewButton() };
        newButton = new videojs.newButton(this, options);
        this.controlBar.el().appendChild(newButton.el());
    });

    //Now setting up Player
    var vid = videojs("sampleVideo", {
        plugins : { newButton : {} }
    });           
}

newButtonToggle();

Here is the updated codepen