如何在不干扰原生控件的情况下为我的HTML5视频添加点击播放? [英] How can I add click-to-play to my HTML5 videos without interfering with native controls?
问题描述
我正在使用以下代码为HTML5视频添加点击播放功能:
I'm using the following code to add click-to-play functionality to HTML5 video:
$('video').click(function() {
if ($(this).get(0).paused) {
$(this).get(0).play();
}
else {
$(this).get(0).pause();
}
});
除了干扰浏览器的本机控件外,它可以正常运行:也就是说,它会在用户捕获时捕获点击暂停/播放按钮,立即反转他们的选择并使暂停/播放按钮无效。
It works okay except that it interferes with the browser's native controls: that is, it captures when a user clicks on the pause/play button, immediately reversing their selection and rendering the pause/play button ineffective.
有没有办法选择只是 DOM中的视频部分,或者失败,一种捕获视频容器的控件部分的点击的方式,这样当用户按下时我可以忽略/反转点击播放功能暂停/播放按钮?
Is there a way to select just the video part in the DOM, or failing that, a way to capture clicks to the controls part of the video container, so that I can ignore/reverse the click-to-play functionality when a user presses the pause/play button?
推荐答案
您可以在捕捉点击事件的视频顶部添加一个图层。然后在播放视频时隐藏该图层。
You could add a layer on top of the video that catches the click event. Then hide that layer while the video is playing.
(简化)标记:
<div id="container">
<div id="videocover"> </div>
<video id="myvideo" />
</div>
剧本:
$("#videocover").click(function() {
var video = $("#myvideo").get(0);
video.play();
$(this).css("visibility", "hidden");
return false;
});
$("#myvideo").bind("pause ended", function() {
$("#videocover").css("visibility", "visible");
});
CSS:
#container {
position: relative;
}
/*
covers the whole container
the video itself will actually stretch
the container to the desired size
*/
#videocover {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
这篇关于如何在不干扰原生控件的情况下为我的HTML5视频添加点击播放?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!