Воспроизведение бесконечно повторяющегося видео при загрузке в HTML5

Я хочу разместить видео на странице HTML5, которое начнет воспроизводиться при загрузке страницы и после завершения вернется к началу без перерыва. Видео также должно НЕ иметь какие-либо элементы управления, связанные с ним, и быть либо совместимым со всеми «современными» браузерами, либо иметь возможность полифилла.

Раньше я бы сделал это через Flash и FLVPlayback, но предпочел бы избегать Flash в сфере HTML5. Я думаю, что мог бы использовать setTimeout javascript для создания плавного цикла, но что мне использовать для встраивания самого видео? Есть ли что-то, что будет транслировать видео так, как это сделал бы FLVPlayback?


html video video-streaming html5-video
person stefmikhail    schedule 30.04.2012    source источник

Ответы (4)


arrow_upward
168
arrow_downward

Атрибут loop должен это делать:

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Если у вас возникла проблема с атрибутом цикла (как у нас было в прошлом), прослушайте событие videoEnd и вызовите метод play(), когда оно сработает.

Примечание 1: я не уверен в поведении на iPad/iPhone от Apple, потому что у них есть некоторые ограничения в отношении autoplay.

Примечание 2: loop="true" и autoplay="autoplay" устарели.

person longi    schedule 02.05.2012
comment
Действительно хороший совет, сэр. В итоге я использовал javascript для прослушивания события videoEnd и вернулся к началу, поскольку, насколько я могу судить, атрибут loop поддерживается не всеми браузерами. Для устройств iOS они не поддерживают autoplay в какой-либо форме iOS 5, поэтому я просто использовал резервное изображение для мобильных устройств. Еще раз спасибо. - person stefmikhail; 15.05.2012
comment
использование ‹video loop=true› является недопустимым w3. org/TR/html-markup/video.html — либо используйте ‹video loop=loop›, либо просто ‹video loop› — это правило действует почти для ВСЕХ тегов HTML5 (либо только имя тега, либо имя тега=имя тега для XHTML5 ) - person ; 04.11.2013
comment
@vaxquis спасибо за обновление, вы можете редактировать изменения API в следующий раз! - person longi; 07.11.2013
comment
Нет проблем, приятель, всегда рад помочь. Тем не менее, я бы не стал смешивать атрибуты XHTML-типа 'autoplay=autoplay' с HTML-типом 'loop' - я бы использовал либо ‹video... autoplay loop›, анализируемый как HTML5, либо ‹video... autoplay =autoplay loop=loop›, интерпретируемый как HTML5 или XHTML5. смешивание стилей приводит к тому, что разметка по-прежнему недействительна для XHTML, но излишне многословна для HTML. - person ; 08.11.2013
comment
Как правило, autoplay работает в Safari, только если вы также используете muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos - person andreyrd; 18.04.2018
comment
Это не часть вопроса, но кто-то спросил меня, как легко сделать его отзывчивым, поэтому я сделал это с шириной видео 800 пикселей: <div style="max-width:800px: height:auto"> <video width="100%" height="100%" autoplay loop> <source src="http://mumu.com.co/wp-content/uploads/2018/01/formas-animadas.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> </div> - person WhGandalf; 30.10.2019
comment
Связанное зацикливающееся видео с автоматическим воспроизведением - person Fabien Snauwaert; 17.12.2019
comment
Я бы предложил оформить его как этот пример - person Utmost Creator; 29.01.2021

arrow_upward
51
arrow_downward

По состоянию на апрель 2018 года Chrome (наряду с несколькими другими основными браузерами) теперь также требуется атрибут muted.

Поэтому вы должны использовать

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>
person micah5    schedule 12.11.2018

arrow_upward
21
arrow_downward

Для iPhone это работает, если вы добавите также playsinline так:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
person Raluca Albu    schedule 21.03.2019
comment
Реквизит для JSX: autoPlay loop muted playsInline - person pomber; 09.04.2020

arrow_upward
2
arrow_downward

Вы можете сделать это следующими двумя способами:

1) Использование атрибута loop в элементе видео (упомянутого в первом ответе):

2) и вы можете использовать медиа-событие ended:

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});
person asmmahmud    schedule 24.10.2017