在<video>时间更改时获得通知

Question

我想使用Firefox扩展程序显示视频的当前百分比。

我知道我可以使用Youtube Player API获取当前时间和持续时间：

player = document.getElementById('movie_player')
currentTime = player.getCurrentTime()
duration = player.getDuration()

然后我可以使用appendChild或insertBefore将节点添加到DOM。

但是我不明白如何随着时间的流逝定期更新DOM。

我试图了解YouTube播放器如何使用检查器更新时间显示，但并没有帮助我

我想我应该以某种方式使用事件，但是我不知道在没有用户干预（单击，悬停等）的情况下可以定期触发什么事件。

Answer 1

听起来像您在寻找timeupdate Media Event：

  

元素的currentTime属性指示的时间已更改。

const vid = document.querySelector('video')

vid.addEventListener('timeupdate', e => {
  console.log(vid.currentTime)
})

<video autoplay width="320" height="240" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" type="video/mp4">
</video>