我只需检测不会触发任何操作的点击。见下面的例子。
<video id="video" width="320" height="240" src="http://vjs.zencdn.net/v/oceans.mp4" controls>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
var video = document.getElementById("video");
video.onclick = function(){
alert("This click is useless");
};
在这种情况下，当用户点击视频时，他会收到一条警告消息。但问题是，当用户点击播放按钮，暂停按钮或音量控制时，我不希望显示警报消息。我希望它仅在用户点击视频而不是任何按钮时显示。此外我需要打开一个弹出窗口，因此，我不能使用setTimeout或类似的东西，以便浏览器不阻止弹出窗口。
我知道我可以读取坐标并计算是否有按钮，但我更喜欢其他解决方案。
答案 0 :(得分：3)
我问了一个与这个问题非常相似的问题。（How to prevent event bubbling when clicking on HTML5 video controls in Firefox）
我知道在不同浏览器中始终如一地执行此操作的唯一方法是在视频上进行叠加，然后对该叠加层进行自定义控制。 有几个原因。例如＆＃39;无用的＆＃39;点击次数取决于浏览器：
但是如果你不关心Firefox那么这个例子对你有用，但只适用于Chrome，Safari和IE：http://jsfiddle.net/me2loveit2/cSTGM/40/
<a href="javascript: alert('Nothing');">
<video ...
</video>
</a>
答案 1 :(得分：1)
在此示例中我使用setTimeout让.paused，.volume和.muted更新之前我将它们与上一个状态进行比较（在变量中） ）。
var video = document.getElementById("video");
var isPaused = video.paused;
var lastVolume = video.volume;
var isMute = video.muted;
video.onclick = function(){
setTimeout(function() {
// if the user did not change: Play/Pause && Volume && mute
if(isPaused == video.paused && lastVolume == video.volume && isMute == video.muted) {
alert("This click is useless");
} else {
// if the user did change, update to current status
isPaused = video.paused;
lastVolume = video.volume;
isMute = video.muted;
}
}, 100);
}
演示：http://jsfiddle.net/SdNL5/22/
注意：如果用户点击音量控制并且未进行更改，则会将其视为“无用”点击。
答案 2 :(得分：0)
我知道您已经检查了答案，但请注意您仍然可以隐藏默认视频控件并使用自定义控件进行播放。
如果你不想/有时间花在它上面，你可以使用一些javascript lib，如videojs
通过这种方式，您可以通过跨浏览器方式分别对按钮和视频进行完全控制。