javascript - 播放/暂停视频 onclick firefox

Question

我希望视频在您点击时播放/暂停。默认情况下，Firefox 具有此行为。 Chrome 没有。我想到的简单解决方案是使用 jQuery 设置点击事件。

var video = $('#myVideo');
var videoDomObj = video.get(0);
//click event for the video itself
video.on('click', function(e){
    //when video is clicked it should be paused when playing and vise versa
    if (videoDomObj.paused){
        videoDomObj.play();
    } else{
        videoDomObj.pause();
    }
});

jsfiddle

这将适用于 IE 和 Chrome。但是，这会导致 Firefox 发生冲突，因为它会在之后立即调用默认事件并且根本不会播放视频。 e.preventDefault() 修复了这个问题，但会破坏 Firefox 中的所有其他控件。当他们仍然工作时，他们将播放/暂停视频。对此有简单的解决方案吗？

Answer 1

事实上，原始代码就像一个魅力:

document.getElementById('myVideo').onclick = function(e) {
    e.preventDefault();
    if (this.paused){
        this.play();
    } else{
        this.pause();
    }
}

jQuery 等价物应该是:

jQuery('#myVideo').on('click', function(e) {
    e.preventDefault();
    if (this.paused){
        this.play();
    } else{
        this.pause();
    }
});

但正如您所说，这会破坏视频控件，对此最理想且最简单的解决方案可能是选择父元素(或添加容器，如果需要的话):

var video = document.getElementById('myVideo');
video.parentElement.onclick = function(e) {
    if (video.paused){
        video.play();
    } else{
        video.pause();
    }
}

jQuery:

var $video = jQuery('#myVideo'), video = $video.get(0);
$video.parent().on('click', function(e) {
    if (video.paused){
        video.play();
    } else{
        video.pause();
    }
});