如何在Video JS中创建海关按钮 [英] How to create customs button in video js

问题描述

我想在视频js中创建自定义按钮，我尝试了很多事情，并在应用时进行了大量搜索，但没有发现任何结果，我认为我的代码有误.

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.

我已成功在视频js上设置了播放器.

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>

这是我的 codeOpen小提琴，请纠正其中的错误.

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

推荐答案

创建新按钮的方式有效.该按钮将被添加到控制栏(您可以在开发人员工具中看到)，但是该按钮不可见.

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.

这是创建新按钮的更可靠的方法.您可以在onclick函数中做任何您想做的事情.

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

这是更新的 codepen

这篇关于如何在Video JS中创建海关按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！