Відтворюйте нескінченно циклічне відео під час завантаження в HTML5

Я хочу розмістити відео на сторінці HTML5, яке почнеться відтворюватися при завантаженні сторінки, а після завершення повернеться до початку без перерви. Відео також НЕ повинно мати жодних елементів керування, пов’язаних із ним, або бути сумісним із усіма „сучасними” браузерами, або мати можливість поліфілу.

Раніше я б робив це за допомогою Flashі FLVPlayback, але волів би триматися подалі від Flashсфери HTML5. Я думаю, що я міг би використати javascript setTimeoutдля створення плавного циклу, але що слід використовувати для вбудовування самого відео? Чи є там щось, що транслюватиме відео так, як FLVPlaybackце робить?

Атрибут циклу повинен це робити:

<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"застаріли

Станом на квітень 2018 року, Chrome (поряд з кількома іншими основними браузерами) в даний час вимагають в mutedатрибут теж.

Тому вам слід використовувати

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

Для iPhone це працює, якщо ви додаєте також playsinline так:

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

Це можна зробити двома способами:

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

});