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

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

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

2 65
html5 video video-streaming html5-video

2 ответа:

The цикл атрибут должен сделать это:

<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>

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

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

примечание 2: loop="true" и autoplay="autoplay" не рекомендуется

118

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

1) с помощью loop атрибут в элементе video (упоминается в первом ответе):

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

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

    newVideo.play();

});
0