如何在视频js中创建自定义按钮

我想在视频 js 中创建自定义按钮，我已经尝试了很多事情，并且在应用时进行了大量搜索，但没有找到结果，我认为我的代码中有一些错误。

我已成功在视频 js 上设置我的播放器。

这是我的代码，我正在尝试添加自定义按钮。

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

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

我还尝试使用此代码在播放器中添加按钮video js 组件文档。

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

这是我的代码笔小提琴请纠正我做错了什么。

您创建新按钮的方式有效。该按钮已添加到控制栏（您可以在开发人员工具中看到），但不可见。

这是创建新按钮的更强大的方法。你可以在里面做任何你想做的事onclick功能。

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();

这是更新的codepen