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>

和一些链接

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

如果视频通过特定点（并从所有其他点移除活动状态），我如何将“活动”添加到某个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添加活动链接从“人2”等等。

谢谢！

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视频在特定时间添加/删除课程

1 个答案: