Lire une vidéo en boucle à l'infini lors du chargement en HTML5

Question

Je cherche à placer une vidéo dans une page HTML5 qui commencera à jouer au chargement de la page et qui, une fois terminée, reviendra en boucle au début sans interruption. La vidéo doit également PAS avoir des contrôles associés et être compatible avec tous les navigateurs "modernes" ou avoir l'option d'un polyfill.

Auparavant, j'aurais procédé par Flash y FLVPlayback mais je préférerais m'abstenir de Flash dans la sphère HTML5. Je pense que je pourrais utiliser la fonction javascript setTimeout pour créer une boucle fluide, mais que dois-je utiliser pour intégrer la vidéo elle-même ? Existe-t-il quelque chose qui permette de diffuser la vidéo de la même manière que les autres ? FLVPlayback serait ?

Answer 1

En loop devrait le faire :

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

L'ajout de l'option peu intuitive muted est requis par Chrome en tant qu'attribut documenté sur leur site de développement .

Si vous avez un problème avec l'attribut loop (comme nous l'avons eu dans le passé), écoutez la rubrique videoEnd et appeler l'événement play() lorsqu'elle se déclenche.

Note1 : Je ne suis pas sûr du comportement sur l'iPad/iPhone d'Apple, parce qu'ils ont certaines restrictions contre autoplay .

Note2 : loop="true" y autoplay="autoplay" sont obsolètes

Answer 2

Depuis avril 2018, Chrome (ainsi que plusieurs autres navigateurs majeurs) a désormais exiger les muted également.

Il convient donc d'utiliser

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

Answer 3

Pour l'iPhone, cela fonctionne si vous ajoutez aussi playsinline so :

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

Answer 4

Vous pouvez le faire de deux manières :

1) Utilisation loop dans l'élément vidéo (mentionné dans la première réponse) :

2) et vous pouvez utiliser le ended événement médiatique :

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

    newVideo.play();

});