Sincronización HTML5 <video> con <audio> reproducción

Question

estoy teniendo la pista de una fuente, de silencio, y me gustaría reproducir música de fondo sobre ella utilizando el elemento. Las pistas contienen algunos elementos críticos de tiempo.

¿Cuáles serían las opciones para sincronizar estos dos reproductores de medios diferentes en HTML5/Javascript? le daría al reloj maestro ya que la reproducción de audio es muy sensible al tiempo - perder fotogramas de vez en cuando no es crítico.

Answer 1

Mikko Ohtamaa proporcionó una solución en un comentario, que de hecho creo que es la mejor opción en este caso - que no requiere de un marco, y que no requiere que se modifique los archivos de vídeo.

Esencialmente, sólo agarrar la hora actual del elemento de vídeo cuando es "silenciado", y aplicar ese momento para el elemento de audio. Parte del código podría tener este aspecto:

function unmute() { 
    var vid = document.getElementById("video"); 
    var aud = document.getElementById("audio"); 

    aud.currentTime = vid.currentTime; 
    aud.play(); 

} 

Answer 2

Se puede lograr el mismo efecto incluyendo la música en su archivo de video. Los controles del reproductor de video html5 tendrán la capacidad de silenciar el sonido.

Answer 3

Pruebe VideoJS. En el momento en que la reproducción del video comienza cuando la página está cargada y lista, puede activar una función que comenzaría a reproducir la música que está contenida en la página por separado.

http://videojs.com/

Answer 4

Here es una solución sencilla utilizando Popcorn.js inspirados en this artículo.

$(function(){ 
 
var medias = { 
 
    audio: Popcorn("#narration"), 
 
    video: Popcorn("#video") 
 
    }, 
 
    loadCount = 0, 
 
    events = "play pause timeupdate seeking volumechange".split(/\s+/g); 
 

 

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

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

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

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

 
    // Once both items are loaded, sync events 
 
    if (++loadCount == 2) { 
 
     // Uncomment this line to silence the video 
 
     //medias.video.mute(); 
 

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

 
     medias.video.on(event, function() { 
 

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

 
      if (!this.media.paused) { 
 
       return; 
 
      } 
 
      medias.audio.emit("timeupdate"); 
 

 
      return; 
 
      } 
 

 
      if (event === "seeking") { 
 
       medias.audio.currentTime(this.currentTime()); 
 
      } 
 
      
 
      if (event === "volumechange") { 
 
     \t if(this.muted()) { 
 
     \t \t medias.audio.mute(); 
 
     \t } else { 
 
     \t \t medias.audio.unmute(); 
 
     \t } 
 
     \t 
 
     \t medias.audio.volume(this.volume()); 
 
      } 
 

 
      if (event === "play" || event === "pause") { 
 
      medias.audio[event](); 
 
      } 
 
     }); 
 
     }); 
 
    } 
 
    }); 
 
}); 
 
});

\t <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script> 
 
    \t <script type="text/javascript" src="https://static.bocoup.com/js/popcorn.min.js"></script> 
 
     
 
<audio id="narration"> 
 
\t <source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorn101/popcorn101.ogg"> 
 
</audio> 
 
<video id="video" controls="controls"> 
 
\t <source src="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorntest.mp4"> 
 
</video>

Answer 5

no hay una solución fiable. La única característica html5 que admite la sincronización de varias transmisiones es mediaGroup. Fue anulado por Chrome y obsoleto por w3c.