web-dev-qa-db-fra.com

Lire des vidéos en boucle infiniment lors du chargement en HTML5

Je cherche à placer une vidéo dans une page HTML5 qui commencera à être chargée au chargement de la page et, une fois terminée, à revenir au début sans interruption. La vidéo doit également avoir PAS associé à des commandes et être compatible avec tous les navigateurs "modernes" ou avoir l'option d'un remplissage multiple.

Auparavant, je l'aurais fait via Flash et FLVPlayback, mais je préférerais éviter Flash dans la sphère HTML5. Je pense que je pourrais utiliser setTimeout de javascript 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 diffuse la vidéo comme FLVPlayback?

html5videovideo-streaminghtml5-video
80
stefmikhail

L'attribut boucle devrait le faire:

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

Si vous rencontrez un problème avec l'attribut loop (comme auparavant), écoutez l'événement videoEnd et appelez la méthode play() lors de son déclenchement.

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

Note2: loop="true" et autoplay="autoplay" sont obsolètes.

135
longilong

Depuis avril 2018, Chrome (ainsi que plusieurs autres principaux navigateurs) maintenant obligatoire l'attribut muted aussi.

Par conséquent, vous devriez utiliser

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

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

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

Vous pouvez le faire des deux manières suivantes:

1) Utilisation de l'attribut loop dans l'élément video (mentionné dans la première réponse):

2) et vous pouvez utiliser l'événement média ended:

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

    newVideo.play();

});
1
asmmahmud