Question

如果点击视频的任何部分，我需要播放和暂停视频播放器，所以我实现了类似的内容：

$（“＃promoPlayer”）。点击（function（）{

$("#promoPlayer").click(function() {

    if(this.paused){

        this.play();

    } else {

        this.pause();

    }

});

...但现在视频的控件不会暂停/播放。

你可以在这里看到它（http://175.107.134.113:8080/）。该视频是顶部主旋转木马上的第二张幻灯片。

我怀疑我现在从上面的代码中得到2个onclick事件，在实际的暂停/播放按钮上得到第二个。

我不明白实际的视频控件是如何工作的，因为当我检查元素时，我只看到一个标签。如果我可以区分控件，那么也许我现在可能已经找到了解决方案。

任何人都知道我应该怎么做，或者我的解决方案还可以。如果我的解决方案没问题，我如何拦截控件上的点击，以便我只有一个点击事件来暂停/播放？

如果您查看媒体元素主页，他们有一个很大的播放按钮，完成了mouseOver，但我看不出他们是如何做到的？别人可以帮忙吗？

Answer 1

浏览器本机播放器的控件不是单独的DOM元素，所以我不相信有一种识别它们的方法。

我的建议是创建一个不可见的div，它覆盖了玩家而不是控件，并将你的逻辑绑定到那个。

Answer 2

好的，我是个白痴。我没有初始化MediaElement播放器：

$(document).ready(function(){
    $("#promoPlayer").mediaelementplayer({
        features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
        // Hide controls when playing and mouse is not over the video
        alwaysShowControls: false

    });
});

这就是我认为的MediaElement，实际上只是我浏览器对标签的原生支持......

正如预期的那样，MediaElement当然会为您提供点击整个视频帧并让视频免费开始的功能......

Answer 3

玩家应该已经在点击时播放/暂停，但如果你想附加事件，最好在成功处理程序中这样做：

$(document).ready(function(){
    $("#promoPlayer").mediaelementplayer({
        success: function(media, domElement, player) {
            $('#somebutton').on('click', function() {
                  media.play();
            });
        }
    });
 });

mediaelement.js单击控件上的播放/暂停不起作用

3 个答案: