将HTML5 <视频>与<音频>播放同步

问题描述

|| 我有一个来源的音轨，静音，我想使用element在其上播放背景音乐。曲目包含一些时间紧迫性元素。 在HTML5 / Javascript中同步这两个不同的媒体播放器有哪些选择？会给主机时钟，因为音频播放对时间非常敏感-时不时地丢失视频帧并不重要。     

解决方法

        Mikko Ohtamaa在评论中提供了一个解决方案，实际上，我认为这是最好的选择-它不需要框架，也不需要编辑视频文件。 本质上，只要在视频元素为“未静音”时从视频元素中获取当前时间，然后将该时间应用于音频元素即可。一些代码可能看起来像这样：

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

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

}

    ,        这是受本文启发而使用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>

,        用一个非常简单的技巧就容易了;）

<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>

    ,        通过将音乐包含在视频文件本身中，可以达到相同的效果。 html5视频播放器控件将具有使声音静音的功能。     ,        尝试VideoJS。在页面加载并准备就绪时开始视频播放时，您可以触发一个功能，该功能将开始分别播放页面中包含的音乐。 http://videojs.com/     ,        没有可靠的解决方案。支持多个流同步的唯一html5功能是mediaGroup。 Chrome已取消出货，而w3c已弃用。