Question

我想在视频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 component documentation.

的播放器中添加按钮

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

这是我的codeOpen fiddle，请更正我的错误。

Answer 1

另一种方法是创建一个自定义按钮并使用一些代码

来定位它

<强>演示

http://codepen.io/anon/pen/NqMwaG

<强>代码

var elpos = $(".video-js").offset();
var x_pos = elpos.left + 150; // how far the button is to the left on control bar
var y_pos = elpos.top + 234; // height of video player minus some pixes
$(".custom").css({"left": x_pos+"px", "top": y_pos+"px"});

window.onresize = function() {
var elpos = $(".video-js").offset();
var x_pos = elpos.left + 150;
var y_pos = elpos.top + 242;
$(".custom").css({"left": x_pos+"px", "top": y_pos+"px"});
}

<强>的CSS

.custom {
z-index:999999;
position:fixed;
top:0;
left:0;
display:inline-block;
}

对于淡出或按钮，您可以使用单击和鼠标事件。如果你需要适合移动设备，可以添加触摸事件，但是你需要添加一个像hammer.js这样的库。

<强>代码

$(document).on("click", ".vjs-play-control",function(){
setTimeout(function(){ $(".custom").fadeOut(); }, 2500);  
})

$( "#my_video_1, .vjs-control-bar vjs-fade-out" ).mouseover(function() {
$(".custom").fadeIn() 
})

$( "#my_video_1, .vjs-control-bar vjs-fade-out" ).mouseleave(function() {
setTimeout(function(){ $(".custom").fadeOut(); }, 2500); 
})

Answer 2

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

这是创建新按钮的更强大方法。您可以在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

Answer 3

试试这个：

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: {}
    }
});

DEMO

如何在视频js

3 个答案: