我正在使用以下代码向 HTML5 视频添加点击播放功能：
$('video').click(function() {
if ($(this).get(0).paused) {
$(this).get(0).play();
}
else {
$(this).get(0).pause();
}
});
除了会干扰浏览器的原生控件外，它工作正常：也就是说，当用户单击暂停/播放按钮时，它会捕获，立即反转他们的选择并使暂停/播放按钮无效。
有没有办法在 DOM 中选择 just 视频部分，或者如果失败了，有一种方法可以捕获对视频容器的 controls 部分的点击，所以当用户按下暂停/播放按钮时，我可以忽略/反转点击播放功能吗？
【问题讨论】：
您可以在捕捉点击事件的视频顶部添加一个图层。然后在播放视频时隐藏该图层。
（简化的）标记：
<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;
}
【讨论】：
z-index 值：否则，它会出现在视频容器下方。
position: relative 或z-index 混淆）。
我知道这是一个老问题，但我遇到了同样的问题并找到了其他解决方案！ 点击播放视频，点击暂停。但作为原始海报，我遇到了控件问题。像这样解决了 jquery 的问题：
$("video").click(function (e) {
if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
{
if(this.paused)
this.play();
else
this.pause();
}
});
我检查点击中的偏移量，如果它超出了控件，我的播放/暂停功能不会做任何事情。
【讨论】：
您可以尝试 event.stopPropagation 看看是否有效。虽然我认为这会阻止本机控件工作，或者根本不做任何事情。
$('video').click(function(event) {
event.stopPropagation();
if ($(this).get(0).paused) {
$(this).get(0).play();
}
else {
$(this).get(0).pause();
}
});
如果浏览器认为本机控件和视频都是同一个元素的一部分（我相信他们确实如此），那么您可能就不走运了。 jQuery 的 event.target 不允许您区分单击视频和单击控件之间的区别。
所以我认为你最好的选择是build your own controls（旧教程，仍然很简单）。或者要求浏览器开发人员在启用控件时单击视频播放/暂停。似乎默认情况下应该这样做。
【讨论】：
event.stopPropagation() 在这种情况下什么也没做。
这里有很好的答案。谢谢你的这些。这是我想出的使控件可点击的技巧，所有 jQuery。
$('#video_player').click(function(e){
var y = e.pageY - this.offsetTop;
//Subtract how much control space you need in y-pixels.
if(y < $(this).height() - 40)
{
//$(this).get(0).play();
//... what else?
}
});
【讨论】：
Torsten Walter's solution 工作得很好，它是一个相当优雅的问题解决方案，它可能是处理它的最佳方法，即使它不处理点击暂停。然而，他的解决方案让我想到了一个 hacky 方法来做到这一点，我想出了这个：
<div id="container">
<div id="videocover"> </div>
<video id="myvideo" />
</div>
$('#videocover').click(function(event) {
var video = $('#myvideo')[0];
if (video.paused) {
video.play();
}
else {
video.pause();
}
return false;
});
#container {
position: relative;
}
#videocover {
position: absolute;
z-index: 1;
height: 290px; /* Change to size of video container - 25pxish */
top: 0;
right: 0;
bottom: 0;
left;
}
基本上，它始终保持可点击的封面以处理点击播放/点击暂停功能，但确保封面不与视频底部的控件重叠。
这当然是一个拼凑，因为它：
但我想我会把它放在那里。
【讨论】：