javascript - 如何获取特定的视频时间，然后用它来触发事件

Question

我想在特定视频时间或视频帧后触发事件/动画。 例如，视频播放到30秒，就会出现文字。

尝试了当前时间， 尝试过加载数据 并尝试了 setTimeout...但我只是不知道我正在寻找的确切 API。

如果有人能给我一些我应该搜索的关键字的提示。我想我能够弄清楚剩下的事情。谢谢你

Answer 1

如果 currentTime 为 30，您可以使用附加到视频元素的 timeupdate 事件，进行事件调用。

在调用中，我们可以使用 video.currentTime 来测试时间是否已过去，它返回视频当前的时间(以秒为单位)。

let video = document.querySelector('video')

// Times in seconds.
const timeframes = [
  {time: 30, triggered: false},
  {time: 60, triggered: false},
  {time: 90, triggered: false}
]

// Watch for currentTime changes
video.addEventListener('timeupdate', () => {
  // Find the time to be triggered
  let time = timeframes.find(i => i.time == Math.floor(video.currentTime) && !i.triggered)
  if (time) {
    // A time was found that hasn't been triggered
    time.triggered = true
    // Send the event to the window
    window.dispatchEvent(new CustomEvent('VideoTimelapse', {detail: time}))
  }
})

// Listen for the event
window.addEventListener('VideoTimelapse', (e) => {
  console.log(`${e.detail.time} seconds have passed`)
})

// The user moved the slider, reset the 'triggered' property back to false
video.addEventListener('seeked', () => timeframes.forEach(i => {i.triggered = false}))

<video controls autoplay>
  <source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4">
</video>