Сделайте остановку видео в формате HTML5 в указанное время

Ответ 1

TL; DR: просто слушайте "timeupdate":

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();
    }
});

Обычный способ подождать чего-то в JavaScript - это ждать события или таймаута. Тайм-аут не может быть и речи в этом случае, пользователь может приостановить видео самостоятельно. В этом случае остановка не будет в ваше конкретное время, но раньше.

Регулярно проверять время также слишком дорого: вы слишком часто проверяете (и, следовательно, тратите драгоценную вычислительную мощность), или не достаточно часто, и поэтому вы не остановитесь в нужное время.

Однако currentTime является проверяемым свойством, и, к счастью, существует событие timeupdate для медиа-элементов, которое описывается следующим образом:

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

В заключение, вы можете просто прослушать timeupdate, а затем проверить, прошел ли вы знак:

// listen on the event
video.addEventListener("timeupdate", function(){
    // check whether we have passed 5 minutes,
    // current time is given in seconds
    if(this.currentTime >= 5 * 60) {
        // pause the playback
        this.pause();
    }
});

Имейте в виду, что это будет приостановлено всякий раз, когда пользователь попытается пропустить последние 5 минут. Если вы хотите разрешить пропуски и только изначально приостанавливать видео за 5-минутную отметку, либо удалите прослушиватель событий, либо введите какой-то флаг:

var pausing_function = function(){
    if(this.currentTime >= 5 * 60) {
        this.pause();

        // remove the event listener after you paused the playback
        this.removeEventListener("timeupdate",pausing_function);
    }
};

video.addEventListener("timeupdate", pausing_function);

Ответ 2

Итак, как показано ниже

<video id="myVid">
<source></source> <!--Whatever source here -->
</video>

Используя выше HTML, добавьте событие

var vid = document.getElementById("myVid");
vid.addEventListener("timeupdate", function(){
// Check you time here and
if(t >= 300000) //Where t = CurrentTime
{
vid.stop();// Stop the Video
}
});

Это правильный способ сделать это.

Ответ 3

Событие timeupdate - это то, что вы ищете, но оно срабатывает только со скоростью около 2 кадров в секунду, что слишком медленно, чтобы остановиться в точное время.

Для этих случаев я использовал requestAnimationFrame который запускается со скоростью 60 кадров в секунду и немного уменьшил endTime, который исправляет небольшие "запаздывающие скачки":

const onTimeUpdate = () => {
    if (video.currentTime >= (endTime - 0.05)) {
      video.pause()
    } else {
      window.requestAnimationFrame(onTimeUpdate)
    }
}
window.requestAnimationFrame(onTimeUpdate)

Ответ 4

Не уверен в встроенном способе, но одним из способов было бы использовать функцию setInterval и проверить текущее время для видео и затем остановить воспроизведение

var myVid=document.getElementById("video1");
var timer= setInterval(function(){myTimer()},1000);
function myTimer()
  {
    if(myVid.currentTime == 5* 60)
    {
       myVid.pause();
       window.clearInterval(timer);
    }
  }

Ответ 5

Я думаю, на очень базовом уровне вы могли бы просто:

//Inside your video start playing function
setTimeout(function() {
    video.stop();
}, 300000); //five minute timer