HTML5 视频 - 如果 currentTime 等于设置时间，则运行事件

Question

我试图在 html5 video 播放时捕捉某些事件。我想在播放期间的 5、10、15、20 和 25 秒标记处触发它们。

下面是我运行的代码：

this.video.addEventListener('timeupdate', (e) => {
  if (e.target.currentTime >= 5) {
    console.log('5 seconds')
  } else if (e.target.currentTime >= 10) {
    console.log('10 seconds')
  }
})

这似乎只适用于第一个if 语句(currentTime >= 5)。它从不运行else if。当我尝试准确并将>= 更改为等于== 的集合时，它甚至根本不运行。

我做错了什么？任何帮助将不胜感激。我也愿意接受其他关于更好方法的建议。

我正在阅读这篇文章，但不确定它是否合适：Syncing content with html5 video

Answer 1

视频超过第 5 秒后，第一个语句将始终为真，因为第 5 秒之后的所有秒都是>=5，因此它永远不会落入else。你有 2 种方法提前

1) 使用范围：

this.video.addEventListener('timeupdate', (e) => {
    if (5 <= e.target.currentTime && e.target.currentTime < 10) {
        console.log('5 seconds')
    } else if (10 <= e.target.currentTime && e.target.currentTime < 25) {
        console.log('10 seconds')
    }
});

2) 反向（就地）if/else

this.video.addEventListener('timeupdate', (e) => {
    if (e.target.currentTime > 25) {
        console.log('25+ seconds')
    } else if (e.target.currentTime > 20) {
        console.log('25-20 seconds')
    } else if (e.target.currentTime > 15) {
        console.log('20-15 seconds')
    }
});