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

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

这里是我的测试代码：

<!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>

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

问题是，当我点击默认控制栏（左下角）上的暂停/播放按钮时，虽然视频暂停/播放，但日志不显示（我认为该事件会暂停/播放）。

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

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

谢谢。

斯蒂芬

来源

2017-02-23 user282648

鼠标事件其实不是默认控制栏上可见。你必须做出自己的控制。但是，你为什么试图检查它？如果您想知道视频何时暂停，那么会有暂停事件。此按钮不是您的用户暂停视频的唯一方式（空格键，点击视频中间...） – Kaiido

我的完整代码处理了您的问题。这是一个贸易展览触摸屏演示的客户请求。当演示文稿空闲时，它会回到主屏幕。空闲时事件设置一个计时器。我很欣赏这些信息，如果测试证明这是一个问题，我会推动删除它。 – user282648

你加入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);

来源

2017-02-23 21:30:17 Canolyb1

谢谢！这工作完美！ – user282648

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

回答

相关问题