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

Question

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

尝试了currentTime，尝试了loadeddata并尝试了setTimeout ......但我只是不知道我正在寻找的确切API。

如果有人能给我一些关键词，我应该搜索一下。我想我能够弄明白其余的。谢谢

Answer 1

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

在通话中，我们可以使用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>

timeUpdate

Answer 2

是的

yourVideo.addEventListener("timeupdate", function(){
    //currentTime use second, if you want min *60
if(yourVideo.currentTime >= 5) {
        yourVideo.pause();
    }
});

正是我正在寻找的;然后我简化你的例子到这样的事情：

qazxswpoi