如何检测 HTML5 视频标签中的“无用”点击？答案

【问题标题】：How to detect 'useless' click in HTML5 video tag?如何检测 HTML5 视频标签中的“无用”点击？
【发布时间】：2014-07-30 20:04:14
【问题描述】：

我只需要检测不触发任何操作的点击。请参见下面的示例。

http://jsfiddle.net/SdNL5/1/

<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 或类似的方法来让浏览器不阻止弹出窗口。

我知道我可以读取坐标并计算是否有按钮，但我更喜欢另一种解决方案。

【问题讨论】：

你能澄清一下吗？您的规范中未指定双击视频并执行操作（全屏，至少在我的浏览器上）
然后我添加到我的任意规范：双击时，第一次单击不执行操作，因此它被认为是“无用”单击。不过，我看不出它有什么不同。
控件的浏览器实现各不相同 - 对视频的一些点击实际上充当控件。那些呢？
在视频视口上放置一个清晰的点击捕捉 div 会更简单、更兼容。对你来说问题是 click() 在 pause() 之前触发，所以如果你希望在上发生事件，你需要一个超时

标签： javascript html html5-video

【解决方案1】：

我问了一个和这个很相似的问题。(How to prevent event bubbling when clicking on HTML5 video controls in Firefox)

我知道在不同浏览器中始终如一地做到这一点的唯一方法是在视频上覆盖一个覆盖层，然后对该覆盖层进行自定义控制。有几个原因。例如，“无用”点击将取决于浏览器：

Firefox 将在点击视频时切换播放/暂停。
IE 会有一个“无用”的点击，但双击会进入全屏。
Chrome 和 Safari 会有“无用”点击

但是，如果您不关心 Firefox，那么这个示例将适用于您，但仅适用于 Chrome、Safari 和 IE：http://jsfiddle.net/me2loveit2/cSTGM/40/

<a href="javascript: alert('Nothing');">
   <video ...
   </video>
</a>

【讨论】：

【解决方案2】：

在此示例中，我使用 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/

注意：如果用户点击音量控制并没有做任何更改，将被视为“无用”点击。

【讨论】：

不幸的是，正如问题中指定的那样， setTimeout 不是一个选项。

【解决方案3】：

我知道您已经检查了答案，但请注意您仍然可以隐藏默认视频控件并使用您的自定义控件来玩。

如果您不想/没有时间自己花时间在上面，您可以使用一些 JavaScript 库，例如 videojs

通过这种方式，您可以以跨浏览器的方式分别完全控制按钮和视频。

【讨论】：