¿Hay alguna manera de mantener sincronizados dos videos en una página web sin complementos?

Question

¿Hay alguna manera de usar dos etiquetas de video HTML5 en una página y mantener sincronizados los videos? ¿Quiere decir que si el primer video tiene 15.2 segundos, entonces el segundo video tiene 15.2 segundos?

He mirado alrededor y encontré SMIL pero parece que solo funciona en IE. También traté de implementar algo propio con jQuery y jMediaElement, pero parece que hay muchos casos en los que los videos se pueden desincronizar.

¿Ha hecho esto antes?

Answer 1

Lo encontró. Fue en el http://html5demos.com.

Pagar este demo .. funciona perfectamente (bueno casi) en Chrome para mí.

La fuente está disponible en la página.

Answer 2

La única forma de reproducir video sin complementos es con HTML5 o SVG < video>. No existe un método confiable para mantener sincronizados dos videos HTML5, pero si la sincronización exacta no es crítica, probablemente puedas acercarte mucho al llamar a play() al mismo tiempo o al llamar a play() y pause() en los dos videos. para obtener una sincronización aproximada según lo insinuado por Simeon.

En cuanto a SVG < video>, SVG ya tiene algunos subconjuntos pequeños (y modificados) de SMIL, por lo que puede que ya sea compatible con la especificación, pero que sepa que ningún navegador manejará esto correctamente.

Answer 3

Parece que incluso Opera tiene este problema (10 ene-2010):

No tenemos buena API para sincronizar las cosas con la línea de tiempo de un video, por ejemplo, subtítulos o infoboxes. La especificación ha tenido "rangos de referencia" para este propósito antes (que incluso antes eran "puntos de referencia"); se espera que algo similar se añadirán en el futuro

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

Por cierto, el artículo es muy interesante, y tal vez encontrará algunos consejos útiles en el mismo.

Answer 4

La demostración que se presentó en html5demos funciona pero puede desfasarse fácilmente.

He aquí un artículo que proporciona una solución que hace uso de requestAnimationFrame (información al respecto: Leaner, Meaner, Faster Animations with requestAnimationFrame, Animating with javascript: from setInterval to requestAnimationFrame) y es mucho mejor: HTML5 Video: Synchronizing Playback of Two Videos.

Tenga en cuenta que la demostración proporcionada allí (alojada en jsfiddle) tiene un enlace incorrecto en una fuente js. He actualizado en esta nueva página:

http://jsfiddle.net/aqUNf/1/

oso en el apoyo del navegador mente, esta función es compatible con Firefox, Chrome, Safari y desde 6 e IE 10 (véase table para más detalles). De lo contrario, vuelve a setInterval, que no ofrece el mismo rendimiento y la misma ventaja de ahorro de batería.

(Se utiliza Popcorn.js por cierto, que es un muy buen proyecto por Mozilla)

Y aquí está el código (directamente tomado de la demo):

var videos = { 
    a: Popcorn("#a"),  
    b: Popcorn("#b"), 

}, 
scrub = $("#scrub"), 
loadCount = 0, 
events = "play pause timeupdate seeking".split(/\s+/g); 

// iterate both media sources 
Popcorn.forEach(videos, function(media, type) { 

    // when each is ready... 
    media.listen("canplayall", function() { 

     // trigger a custom "sync" event 
     this.trigger("sync"); 

     // set the max value of the "scrubber" 
     scrub.attr("max", this.duration()); 

    // Listen for the custom sync event...  
    }).listen("sync", function() { 

     // Once both items are loaded, sync events 
     if (++loadCount == 2) { 

      // Iterate all events and trigger them on the video B 
      // whenever they occur on the video A 
      events.forEach(function(event) { 

       videos.a.listen(event, function() { 

        // Avoid overkill events, trigger timeupdate manually 
        if (event === "timeupdate") { 

         if (!this.media.paused) { 
          return; 
         } 
         videos.b.trigger("timeupdate"); 

         // update scrubber 
         scrub.val(this.currentTime()); 

         return; 
        } 

        if (event === "seeking") { 
         videos.b.currentTime(this.currentTime()); 
        } 

        if (event === "play" || event === "pause") { 
         videos.b[ event ](); 
        } 
       }); 
      }); 
     } 
    }); 
}); 

scrub.bind("change", function() { 
    var val = this.value; 
    videos.a.currentTime(val); 
    videos.b.currentTime(val); 
}); 

// With requestAnimationFrame, we can ensure that as 
// frequently as the browser would allow, 
// the video is resync'ed. 
function sync() { 
    videos.b.currentTime( 
     videos.a.currentTime()   
    ); 
    requestAnimFrame(sync); 
} 

sync();