Reproducir video en bucle infinito en carga en HTML5

92

Estoy buscando colocar un video en una página HTML5 que comenzará a reproducirse al cargar la página y, una vez completado, volverá al principio sin interrupciones. El video también debe NO tienen ningún tipo de control asociados a ella, y, o bien ser compatible con todos los navegadores modernos '', o tener la opción de un polyfill.

Anteriormente habría hecho esto a través de Flashy FLVPlayback, pero preferiría alejarme de Flashla esfera HTML5. Estoy pensando que podría usar javascript setTimeoutpara crear un bucle suave, pero ¿qué debo usar para incrustar el video en sí? ¿Hay algo por ahí que transmita el video como lo FLVPlaybackharía?

— Stefmikhail
fuente

156

El atributo de bucle debería hacerlo:

<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 tiene un problema con el atributo de bucle (como tuvimos en el pasado), escuche el videoEndevento y llame al play()método cuando se active.

Nota 1: no estoy seguro del comportamiento en el iPad / iPhone de Apple, porque tienen algunas restricciones autoplay.

Note2: loop="true"y autoplay="autoplay"están en desuso

— longi
fuente

1

De hecho, un buen consejo señor. Terminé usando javascriptpara escuchar el videoEndevento y volviendo al principio ya que, por lo que puedo decir, el loopatributo no es compatible con todos los navegadores. Para los dispositivos iOS, no son compatibles autoplayde ninguna forma con iOS 5, por lo que solo usé una imagen alternativa para dispositivos móviles. Gracias de nuevo.

— stefmikhail

10

el uso de <video loop = "true"> no es válido w3.org/TR/html-markup/video.html ; utilice <video loop = "loop"> o solo <video loop>; esta regla se aplica a casi TODAS las etiquetas HTML5 (ya sea solo nombre de etiqueta o nombre de etiqueta = "nombre de etiqueta" para XHTML5)

@vaxquis gracias por la actualización, ¡puedes editar los cambios de la API la próxima vez!

— Longi

5

No hay problema, amigo, siempre dispuesto a ayudar. Aún así, no mezclaría los atributos de tipo XHTML 'autoplay = "autoplay"' con el 'loop' de tipo HTML; iría con <video ... autoplay loop>, analizable como HTML5 o <video .. . autoplay = "autoplay" loop = "loop">, analizable como HTML5 o XHTML5. la combinación de estilos crea un marcado que sigue siendo inválido como XHTML pero innecesariamente detallado para HTML.

1

Generalmente, autoplaysolo funciona en Safari si también usa muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

39

A partir de abril de 2018, Chrome (junto con varios otros navegadores importantes) ahora también requiere el mutedatributo.

Por lo tanto, debe usar

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

— micah5
fuente

14

Para iPhone, funciona si agrega también playinline así:

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

— Raluca Albu
fuente

Props para JSX:autoPlay loop muted playsInline

— pomber

2

Puede hacer esto de las siguientes dos formas:

1) Utilizando loop atributo en el elemento de video (mencionado en la primera respuesta):

2) y puede utilizar el endedevento de medios:

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

    newVideo.play();

});

— asmmahmud
fuente