Javascript html5 视频在特定时间添加/删除类

Javascript html5 Video add/remove class on certain time

本文关键字：添加 删除 定时间 html5 视频 Javascript      更新时间：2023-09-26

In pure JS （no 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"，依此类推。

谢谢！

您可以使用时间更新事件

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);
相关文章：