Воспроизведение бесконечного цикла видео при загрузке в HTML5


92

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

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

Ответы:


156

Петля атрибут должен это сделать:

<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: я не уверен в поведении Apple iPad / iPhone, потому что у них есть некоторые ограничения autoplay.

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


1
Действительно хороший совет, сэр. В итоге я использовал javascriptдля прослушивания videoEndсобытия и возвращался к началу, поскольку, насколько я могу судить, loopатрибут поддерживается не всеми браузерами. Для устройств iOS они autoplayникаким образом не поддерживают форму или форму iOS 5, поэтому я просто использовал резервное изображение для мобильных устройств. Еще раз спасибо.
Стефмихаил

10
использование <video loop = "true"> недопустимо. w3.org/TR/html-markup/video.html - либо используйте <video loop = "loop">, либо просто <video loop> - это правило действует почти для ВСЕХ тегов HTML5 (либо просто тэг, либо тэг = "тэг" для XHTML5)

@vaxquis спасибо за обновление, вы можете редактировать изменения api в следующий раз!
longi

5
Нет проблем, дружище, всегда рад помочь. Тем не менее, я бы не стал смешивать атрибуты XHTML-типа 'autoplay = "autoplay"' с HTML-типом 'loop' - я бы выбрал <video ... autoplay loop>, синтаксический анализируемый как HTML5 или <video .. . autoplay = "autoplay" loop = "loop">, можно разобрать как HTML5 или XHTML5. смешивание стилей делает разметку, которая все еще недействительна как XHTML, но излишне многословна для HTML.

1
Как правило, autoplayработает только в Safari, если вы также используете muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos
andreyrd

39

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

Следовательно, вы должны использовать

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

14

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

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

Реквизит для JSX:autoPlay loop muted playsInline
pomber

2

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

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();

});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.