Question

我希望视频在您click上播放/暂停。 Firefox默认具有此行为。 Chrome没有。我想出的简单解决方案是使用jQuery设置click事件。

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();
    }
});

但正如你所说打破视频控件，对此最理想的解决方案是选择父元素（或添加容器，如果需要）： / p>

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();
    }
});

Answer 2

我找到的唯一解决方案是检测此特殊情况的浏览器，因为问题只发生在firefox中，并且默认情况下它具有此功能。

<强> jsfiddle

＆＃13;

//jQuery video element
var video = $('#myVideo');
//DOM element for HTML5 media events
var videoDomObj = video.get(0);
//detect if firefox
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

//only bind click event if not firefox to prevent broken controls - firefox pauses/plays videos on click by default anyway
if (!is_firefox){
    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();
        }
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVideo" width="100%" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

＆＃13;

播放/暂停视频onclick firefox

2 个答案: