如何跟踪 HTML5 视频控制事件？答案

【问题标题】：How can I track HTML5 Video Control event?如何跟踪 HTML5 视频控制事件？
【发布时间】：2017-02-23 21:09:16
【问题描述】：

我正在尝试跟踪 HTML5 视频的事件，特别是默认控制栏上的暂停/播放（对于非移动 Chrome 和 Safari）。

这是我的测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Video Test</title>
</head>
<body>
    <video id="video" width="320" height="240" src="http://www.w3schools.com/tags/mov_bbb.mp4" controls>
         <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
    </video>

    <script>
    var video = document.getElementById("video");

    video.onclick = function(){
        if(!this.paused) {
            this.pause();
            console.log("paused");
        } else {
            this.play();
            console.log("playing");
        }
    }
    </script>
</body>
</html>

如果我在视频中心切换播放/暂停，事件触发就好了。

问题是，当我单击默认控制栏（左下角）上的暂停/播放按钮时，虽然视频暂停/播放，但日志不显示（我假设事件确实触发，因为它暂停/播放） .

我还没有找到不显示日志的原因，希望有人指出我正确的方向。

在我的实际代码中，根据视频是暂停还是播放，将调用（或终止）计时器函数。

谢谢。

斯蒂芬

【问题讨论】：

鼠标事件在默认控制栏上实际上是不可见的。您必须制作自己的控件。但是你为什么要检查它？如果您想知道视频何时暂停，则有一个暂停事件。此按钮不是您的用户暂停视频的唯一方式（空格键，单击视频中间...）
我的完整代码解决了您的问题。这是客户对贸易展览触摸屏演示的要求。当演示文稿空闲时，它会返回主屏幕。事件在空闲时设置一个计时器。我很感激这些信息，如果测试证明这是一个问题，我会推动删除它。

标签： javascript html google-chrome video safari

【解决方案1】：

您添加 onclick 事件以暂停和恢复视频，但您没有处理暂停和播放事件。当您从控制栏暂停播放时会触发这些事件。

我会这样做：

var video = document.getElementById("video");

function StartPauseHandler(e) {
    if (e.type === "pause") {
        console.log("paused");
    } else if (e.type === "playing") {
        console.log("playing");
    } else {
        if(!this.paused) {
            this.pause();
        } else {
            this.play();;
        }
    }
}

video.addEventListener("click", StartPauseHandler);
video.addEventListener("pause", StartPauseHandler);
video.addEventListener("playing", StartPauseHandler);

【讨论】：