Синхронизация HTML5 <video>с воспроизведением <audio>

Question

У меня трек из одного источника, отключение звука, и я хотел бы проигрывать поверх него фоновую музыку, используя элемент.Треки содержат элементы, критичные ко времени.

Какие варианты синхронизации этих двух разных медиаплееров в HTML5 / Javascript?выдаст мастер-часы, так как воспроизведение аудио очень чувствительно ко времени - потеря видеокадров время от времени не критична.

Answer 1

Микко Охтамаа предоставил решение в комментарии, который, на мой взгляд, является лучшим вариантом здесь - он не требует фреймворка и не требует редактирования видеофайлов.

По сути, просто выберите текущее время из видеоэлемента, когда он «включен», и примените это время к аудиоэлементу. Некоторый код может выглядеть так:

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

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

}

Answer 2

Здесь - это простое решение с использованием Popcorn.js, вдохновленное этой статьей.

$(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") {  
        	  if(this.muted()) { 
        		  medias.audio.mute(); 
        	  } else {
        		  medias.audio.unmute(); 
        	  } 
        	  
        	  medias.audio.volume(this.volume());
          }

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

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

Answer 3

Легко с очень простым трюком;)

<video id="myvideo" controls muted loop>
    <source src="sample_video_no_sound.mp4" type="video/mp4"/>
    <audio id="myaudio">
        <source src="sound.mp3" type="audio/mpeg"/>
    </audio>
</video>

<script>
    var myvideo = document.getElementById("myvideo");
    var myaudio = document.getElementById("myaudio");

    var change_time_state = true;

    myvideo.onplay = function(){
        myaudio.play();
        if(change_time_state){
            myaudio.currentTime = myvideo.currentTime;
            change_time_state = false;
        }
    }

    myvideo.onpause = function(){
        myaudio.pause();
        change_time_state = true;
    }
</script>

Answer 4

Надежного решения не существует.Единственная функция html5, которая поддерживает синхронизацию нескольких потоков, - это mediaGroup.Он не был загружен Chrome и устарел w3c.

Answer 5

Попробуйте VideoJS. В то время, когда воспроизведение видео начинается, когда страница загружена и готова, вы можете запустить функцию, которая запускает воспроизведение музыки, содержащейся на странице отдельно.

http://videojs.com/

Answer 6

Этого же эффекта можно достичь, включив музыку в сам видеофайл. Элементы управления html5 видеоплеера будут иметь возможность отключить звук.