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

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

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

Ответы

Ответ 1

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

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

Ответ 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();

});