如何在视频js中创建海关按钮

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中创建海关按钮

How to create customs button in video js

jquery

video.js