javascript - 当时间发生变化时收到通知

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 :

The time indicated by the element's currentTime attribute has changed.

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>