Как получить определенное время видео, а затем использовать его для запуска события

Question

Я хотел бы вызвать событие / анимацию после определенного времени видео или видеокадра.например, воспроизведение видео до 30 секунд, появится текст.

пробовал currentTime, пробовал loadeddata и пробовал setTimeout ... но я просто не знаю точный API, который я ищудля.

Если бы кто-то мог дать мне подсказку ключевого слова, что я должен искать.Я думаю, что смогу разобраться с остальными.большое спасибо

Answer 1

Вы можете использовать событие timeupdate, прикрепленное к элементу видео, если currentTime равно 30, выполните вызов события.

В рамках вызова мы можем проверить, прошло ли время с помощью 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();
    }
});