Lire une vidéo en boucle infinie au chargement en HTML5

90

Je cherche à placer une vidéo dans une page HTML5 qui commencera à jouer au chargement de la page, et une fois terminée, reviendra au début sans interruption. La vidéo ne doit pas non plus avoir de contrôles associés, et soit être compatible avec tous les navigateurs `` modernes '', soit avoir l'option d'un polyfill.

Auparavant, j'aurais fait cela via Flashet FLVPlayback, mais je préférerais éviter Flashdans la sphère HTML5. Je pense que je pourrais utiliser javascript setTimeoutpour créer une boucle fluide, mais que dois-je utiliser pour intégrer la vidéo elle-même? Y a-t-il quelque chose qui diffusera la vidéo comme le FLVPlaybackferait?

html video video-streaming html5-video stefmikhail
la source

Réponses:

152

L' attribut loop 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 nous l'avons fait par le passé), écoutez l' videoEndévénement et appelez la play()méthode lorsqu'elle se déclenche.

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

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

longi
la source
1
En effet, bon conseil monsieur. J'ai fini par utiliser javascriptpour écouter l' videoEndévénement, et en revenant au début à partir de ce que je peux dire, l' loopattribut n'est pas pris en charge par tous les navigateurs. Pour les appareils iOS, ils ne prennent autoplayen charge en aucune manière la forme ou la forme d'iOS 5, je viens donc d'utiliser une image de secours pour mobile. Merci encore.
stefmikhail
10
l'utilisation de <video loop = "true"> n'est pas valide w3.org/TR/html-markup/video.html - utilisez <video loop = "loop"> ou simplement <video loop> - cette règle s'applique à presque TOUTES les balises HTML5 (soit juste tagname, soit tagname = "tagname" pour XHTML5)
@vaxquis merci pour la mise à jour, vous êtes invités à modifier les modifications de l'API la prochaine fois!
longi
5
Pas de problème, mon pote, toujours heureux de vous aider. Néanmoins, je ne mélangerais pas les attributs de type XHTML 'autoplay = "autoplay"' avec le type HTML 'loop' - j'irais avec soit <video ... autoplay loop>, analysable comme HTML5 ou <video .. . autoplay = "autoplay" loop = "loop">, analysable comme HTML5 ou XHTML5. le mélange de styles crée un balisage qui n'est toujours pas valide en tant que XHTML mais inutilement verbeux pour HTML.
1
Généralement, autoplayne fonctionne dans Safari que si vous utilisez également muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos
andreyrd
34

Depuis avril 2018, Chrome (ainsi que plusieurs autres navigateurs majeurs) nécessitent désormais également l' mutedattribut.

Par conséquent, vous devez utiliser

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

Pour iPhone, cela fonctionne si vous ajoutez également des jeux en ligne, donc:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>
Raluca Albu
la source
Accessoires pour JSX:autoPlay loop muted playsInline
pomber
2

Vous pouvez le faire de deux manières:

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

2) et vous pouvez utiliser l' 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();

});
asmmahmud
la source