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>

Answer 2

是timeUpdate是我要寻找的；然后我将您的示例简化为这样的内容：

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

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

2 个答案: