Javascript html5 视频 add/remove class 在特定时间

Question

在纯 JS 中（没有 jQuery）。

给出的是 html 5 个视频：

    <video>
      <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
    </video>

还有一些 links

    <a href="#" class="menu">Person 1</a>
    <a href="#" class="menu">Person 2</a>
    <a href="#" class="menu">Person 3</a>

如果视频通过特定点（并从所有其他点移除活动），我如何将 "active" 添加到某个 href。

例如：视频秒过3

    <a href="#" class="menu active">Person 1</a>
    <a href="#" class="menu">Person 2</a>
    <a href="#" class="menu">Person 3</a>

…如果视频通过第 6 秒，将活动从 "Person 2" 添加到 link，依此类推。

谢谢！

Answer 1

您可以使用timeupdate事件

document.getElementsByTagName('video')[0].addEventListener('timeupdate', function () {
   console.log(this.currentTime);

   if (this.currentTime >= 3) {
       // add class to first item
   }

   if (this.currentTime >= 6) {
      // add class to second item
   }

}, false);

Javascript html5 视频 add/remove class 在特定时间

Javascript html5 Video add/remove class on certain time

javascript

html5-video