Как остановить воспроизведение элемента <video> и вернуть его обратно в исходное состояние?

Question

Мне было интересно, как я могу сделать перезагрузку видео, которое было воспроизведено или приостановлено до его первоначального состояния, где оно не воспроизводится? Я знаю, что вы можете приостановить видео, но я действительно хочу, чтобы видео возвращалось в исходное состояние. Это означает, что он покажет изображение плаката, если оно указано, и начнется с самого начала, если пользователь снова нажмет игру.

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

Answer 1

Самый простой способ, который я смог найти это перезагрузите источник видео в завершенном событии, чтобы он возвращался к началу. Другим способом справиться с этим было бы иметь div с изображением плаката в том, что вы поменяли место для видео, но это проще ...

<script> 
var vid=document.getElementById('myVideo'); 
vid.addEventListener("ended", resetVideo, false); 

function resetVideo() { 
    // resets the video element by resetting the source 
    this.src = this.src 
} 
</script>  

Answer 2

Вы можете рассмотреть возможность использования API для этого: взглянуть на VideoJS

В противном случае попробуйте добавить элементы управления атрибутов на вашем видео Tag