如何跟踪HTML5视频控件事件？

Question

我正在尝试跟踪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>

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

问题是，当我单击默认控制栏上的“暂停/播放”按钮（左下方）时，尽管视频暂停/播放，但日志不会显示（我假设事件确实触发了，因为它暂停/播放了）。

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

在我的实际代码中，取决于视频是暂停还是播放，将调用（或终止）计时器功能。

谢谢。

斯蒂芬

Answer 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);

如何跟踪HTML5视频控件事件？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-23 21:30:17

如何跟踪HTML5视频控件事件？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-23 21:30:17

解决方案1
0 已采纳 2017-02-23 21:30:17