Video js custom button

by kenmasu

HTML

<script src="video.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
    <source type="video/mp4" src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4">
        <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm">
</video>

CSS

.vjs-control.vjs-custom-button {
    background-color:red;
}

JavaScript

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

    videojs.Btn.prototype.onClick = function () {
        alert("Click on my custom button!");
    };

    var createCustomButton = function () {
        var props = {
            className: 'vjs-custom-button vjs-control',
            innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text"><input type="button">my button</button></span></div>',
            role: 'button',
                'aria-live': 'polite',
            tabIndex: 0
        };
        return videojs.Component.prototype.createEl(null, props);
    };

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

    var vid = videojs("example_video_1", {
        plugins: {
            myBtn: {}
        }
    });