【问题标题】:Syncing HTML5 <video> with <audio> playback将 HTML5 <video> 与 <audio> 播放同步
【发布时间】:2011-09-20 00:08:18
【问题描述】:

我有来自一个来源的曲目,静音,我想使用元素播放背景音乐。曲目包含一些时间紧迫的元素。

在 HTML5 / Javascript 中同步这两种不同的媒体播放器的选项是什么?会给主时钟,因为它的音频播放对时间非常敏感 - 时不时丢失视频帧并不重要。

【问题讨论】:

标签: javascript html video audio


【解决方案1】:

用一个非常简单的技巧很容易;)

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

【讨论】:

    【解决方案2】:

    没有可靠的解决方案。支持多流同步的唯一 html5 功能是 mediaGroup。它被 Chrome 取消发布,并被 w3c 弃用。

    【讨论】:

      【解决方案3】:

      Here 是一个使用 Popcorn.js 的简单解决方案,灵感来自this 文章。

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

      【讨论】:

      • 是否可以两种方式同步,我的意思是改变音频反映到视频和改变视频反映到音频?
      • 暂停视频加载数据时,音频不会停止。
      【解决方案4】:

      Mikko Ohtamaa 在评论中提供了一个解决方案,我实际上认为这是最好的选择 - 它不需要框架,也不需要您编辑视频文件。

      本质上,只需在“取消静音”时从视频元素中获取当前时间,并将该时间应用于音频元素。有些代码可能如下所示:

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

      【讨论】:

      • 谢谢 - 我没有注意到这个问题仍然悬而未决:)
      • 这里唯一的问题是视频可能还没有播放,在这种情况下vid.currentTime将为空。
      【解决方案5】:

      试试 VideoJS。在页面加载并准备就绪时开始播放视频时,您可以触发一个函数,该函数将开始播放页面中包含的音乐。

      http://videojs.com/

      【讨论】:

        【解决方案6】:

        通过将音乐包含在您的视频文件本身中,可以实现相同的效果。 html5 视频播放器控件将具有静音功能。

        【讨论】:

        • 正如我所说,我特别需要避免这种情况:音乐是动态制作的。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-11-19
        • 2013-04-28
        • 1970-01-01
        • 2018-04-17
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多