Javascript 如何跟踪HTML5视频控制事件？_Javascript_Html_Google Chrome_Video_Safari

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

javascript html google-chrome video safari

Javascript 如何跟踪HTML5视频控制事件？,javascript,html,google-chrome,video,safari,Javascript,Html,Google Chrome,Video,Safari,我试图跟踪HTML5视频的事件，特别是默认控制栏上的暂停/播放（对于非移动Chrome和Safari）以下是我的测试代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Video Test</title> </head> <body> <video id="video" wi

我试图跟踪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>


视频测试
var video=document.getElementById（“视频”）；
video.onclick=函数（）{
如果（！this.paused）{
这个。暂停（）；
控制台日志（“暂停”）；
}否则{
这个。play（）；
控制台日志（“播放”）；
}
}

如果我在视频中心切换播放/暂停，事件将正常触发

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

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

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

谢谢

Stephen

添加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);

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