javascript - muted - HTML5 Video Seamless Looping

video tag html5 autoplay

Question

Sé que esta pregunta se ha formulado varias veces, y he revisado cada una de ellas aquí en StackOverflow.

Simplemente estoy tratando de hacer un bucle de un video MP4 de 5 segundos en un reproductor HTML5 y dejar que sea transparente. He intentado tanto jwplayer como video.js, tanto localmente como en espacio web, y ninguno de los dos lo logra. He intentado usar los eventos "finalizados"; He intentado la precarga / prebuffering; He intentado escuchar el segundo final de un video y luego buscar al principio para omitir los eventos stop / play por completo. Sigo viendo jitter, y sigo viendo el ícono de carga (la última versión de Chrome y Firefox).

Para referencia, aquí hay algunos de mis últimos códigos para video.js:

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
  width="640" height="480"
  data-setup=''{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}''>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
  var myPlayer = videojs("loop_me");
  videojs("loop_me").ready(function(){
    this.on("timeupdate", function(){
      var whereYouAt = myPlayer.currentTime();
      if (whereYouAt > 4) {
        myPlayer.currentTime(1);
      }
    });
  });
</script>

¿Alguien ha logrado hacer esto con éxito? Y, si es así, ¿podría publicar una solución completa? Normalmente no los pido ni quiero, pero creo que esta vez podría ser necesario.

Answer 1

1. Doozerman y Offbeatmammal son correctos: no se requiere Javascript para hacer un bucle de video en HTML5.

2. Sobre esa pausa antes de cada iteración: en algunos navegadores, también podemos observar una pausa al final del ciclo en nuestras pruebas. Por ejemplo, en el video de demostración de 22 segundos en línea en ... http://www.externaldesign.com/Marlin-Ouverson.html

... bajo OS X, vemos un ~ 0.5 seg. pausa antes de que se repita el bucle, solo en Firefox y Safari; Chrome y Opera reproducen el bucle sin una pausa notable. Pero tenga en cuenta que para los navegadores de escritorio / portátiles, la página anterior proporciona un video de fondo de pantalla completa que parece que se repite sin pausa en los cuatro navegadores anteriores.

Answer 2

No necesitas ningún script adicional para ese tipo de cosas.

La etiqueta "video" tiene un atributo de bucle incorporado, usa esto y tu video se repetirá.

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

También puede agregar el atributo de precarga si lo desea. Si lo desea, puede encontrar más información sobre la etiqueta de video aquí: Etiqueta de video HTML

Edición: Ups. No noté el comentario de Offbeatmammals bajo su pregunta. :)

Answer 3

Prueba esto:
1) edita tu video de esta manera:
[1s] [2s] [3s] [4s] [5s]
corte el primer bloque de segundo del video y agréguelo 2x al final así:
[2s] [3s] [4s] [5s] [1s] [1s]

2) Usa el código:

<video id="vid"  width="100" height="50" loop autoplay preload="true">
    <source src="something.mp4" type="video/mp4">
</video>

<!-- Goes to end of body of course -->
<script>
    var vid = document.getElementById("vid");
    vid.addEventListener("timeupdate", function () {
        if(this.currentTime >= 5.0) {
            this.currentTime = 0.0;
        }
    });
</script>

La idea detrás de esto es hacer que el video sea transparente (el final del video es el comienzo del video). Además, debes asegurarte de que el video nunca termina. El atributo de bucle funciona con archivos de video más pequeños, pero se ve una imagen en negro al final del video si es demasiado grande (antes de la próxima iteración de bucle). Esencialmente antes de que termine el video, estás buscando volver a 0.0s.

Espero que eso ayude.

Answer 4

Heureka!

Hemos encontrado la solución real, real y sin solución de trabajo para este problema en el lugar donde trabajo. Explica el comportamiento inconsistente a través de múltiples desarrolladores también.

La versión tl; dr es: Bitrates . ¿Quién lo hubiera adivinado? Lo que supongo es que muchas personas usan valores estándar para esto, que generalmente son alrededor de 10 Mbit / s para videos HD si utiliza el Codificador de Adobe Media. Esto no es suficiente. El valor correcto sería 18 Mbit / s o tal vez incluso más alto. 16 sigue siendo un poco tonto. No puedo expresar lo bien que funciona esto. Ya he probado las soluciones más complicadas durante aproximadamente cinco horas hasta que encontré esto junto con nuestro editor de video.

Espero que esto ayude a todos y te ahorre un montón de tiempo!