1

如果单击视频的任何部分，我需要播放和暂停视频播放器，因此我实现了以下功能：

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

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

    if(this.paused){

        this.play();

    } else {

        this.pause();

    }

});

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

你可以在这里看到它的实际效果（http://175.107.134.113:8080/）。该视频是顶部主轮播的第二张幻灯片。

我怀疑我现在收到了 2 个 onclick 事件，一个来自我上面的代码，另一个来自实际的暂停/播放按钮。

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

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

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

4

3 回答 3

0

浏览器原生播放器的控件不是单独的 DOM 元素，所以我不相信有办法识别它们。

我的建议是创建一个不可见的 div 覆盖播放器但不覆盖控件，并将您的逻辑绑定到它。

于 2012-07-05T12:37:18.447 回答
0

好吧，我是个白痴。我没有初始化 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 当然可以为您提供诸如能够单击整个视频帧并免费开始视频的功能...

于 2012-07-10T09:14:08.353 回答
0

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

$(document).ready(function(){
    $("#promoPlayer").mediaelementplayer({
        success: function(media, domElement, player) {
            $('#somebutton').on('click', function() {
                  media.play();
            });
        }
    });
 });
于 2012-07-10T20:17:59.623 回答