Как сделать повторяющееся видео в html5?

Пользователь

от gage , в категории: HTML/CSS , 9 месяцев назад

Как сделать повторяющееся видео в html5?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jerrold_langworth , 9 месяцев назад

@gage 

Для создания повторяющегося видео в HTML5 можно использовать атрибут loop у элемента . Вот пример кода:

1
2
3
4
5
<video autoplay loop>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>


В данном примере атрибут autoplay говорит браузеру автоматически воспроизвести видео, а атрибут loop говорит браузеру повторять видео после его завершения. В теге указываются доступные форматы видео файлов, чтобы браузер мог выбрать поддерживаемый формат. Если ни один из указанных форматов не поддерживается, то будет показано сообщение "Your browser does not support the video tag."


Теперь видео будет воспроизводиться автоматически и повторяться после завершения.

Пользователь

от cloyd , 2 месяца назад

@gage 

Если вы хотите управлять повторением видео с помощью JavaScript, то можно использовать следующий подход:


HTML:


const video = document.getElementById('myVideo'); video.addEventListener('ended', function() { this.play(); }); В этом примере с помощью JavaScript мы добавляем слушатель события 'ended' к элементу video, который будет запускаться каждый раз, когда видео завершает воспроизведение. Внутри обработчика события мы используем this.play() для повторного запуска видео.


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