mediaelement.js 在点击控件上播放/暂停不起作用答案

【问题标题】：mediaelement.js play/pause on click controls don't workmediaelement.js 在点击控件上播放/暂停不起作用
【发布时间】：2012-07-05 11:06:43
【问题描述】：

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

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

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

    if(this.paused){

        this.play();

    } else {

        this.pause();

    }

});

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

您可以在此处查看它的运行情况 (http://175.107.134.113:8080/)。该视频是顶部主轮播的第二张幻灯片。

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

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

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

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

【问题讨论】：

标签： html video mediaelement.js mediaelement

【解决方案1】：

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

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

【讨论】：

谢谢，我认为这可能有效，但他们似乎不是在 MediaElement 网站上这样做的，似乎这种东西已经以某种方式内置到 MediaElement 中，因为MediaElementjs 网站上的示例无需任何额外提升即可完成此操作...
你有这个例子的链接吗？

【解决方案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 当然会为您提供诸如能够单击整个视频帧并免费开始视频的功能...

【讨论】：

【解决方案3】：

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

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

【讨论】：