有没有办法让两个视频在无插件的网页中同步？

Question

有没有办法在页面上使用两个HTML5视频标签并保持视频同步？这意味着如果第一个视频在15.2秒，那么第二个视频在15.2秒？

我环顾四周，发现SMIL，但它看起来像只在IE中工作。我也尝试用jQuery和jMediaElement实现我自己的东西，但似乎有很多情况下视频可能不同步。

之前已经完成了吗？

Answer 1

找到它。这是在http://html5demos.com。

结帐这demo ..完美（几乎）在Chrome上完美工作。

该来源在页面上可用。

Answer 2

无插件播放视频的唯一方法是使用HTML5或SVG < video>。没有可靠的方法让两个HTML5视频保持同步，但如果确切的同步并不重要，您可以通过同时调用play（）或以其他方式调用两个视频的play（）和pause（）让他们近似同步，就像西蒙所暗示的那样。对于SVG <视频>，SVG已经有一些SMIL的小部分（和修改过的），所以它可能已经在规范中支持，但据我所知，没有浏览器可以正确处理这个问题。

Answer 3

看起来甚至Opera有这个问题（2010年3月10日）：

目前旗下有与视频的时间表同步的东西，比如字幕或InfoBoxes到没有好的API。该规范早些时候为此提供了“线索范围”（甚至更早是“提示点”）;预计类似的事情将在未来

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

顺便说一句加入，文章是非常有趣的，也许你会发现它的一些有用的提示。

Answer 4

在html5demos上演示的演示可以工作，但很容易失去同步。

这里有一篇文章提供了一个使用requestAnimationFrame（关于它的信息：Leaner, Meaner, Faster Animations with requestAnimationFrame,Animating with javascript: from setInterval to requestAnimationFrame），它更好：HTML5 Video: Synchronizing Playback of Two Videos。

请注意，在那里提供的演示（在jsfiddle中托管）在js源文件上有错误的链接。我更新了它这个新的一页：

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

请记住浏览器的支持，这一功能是由火狐，Chrome支持，以及Safari浏览器6和IE 10（参见table进一步的细节）。否则，它会回落到setInterval，女巫不会提供相同的性能和节省电量的优势。

（这顺便说一下，这是Mozilla的一个非常好的项目使用Popcorn.js）而这里的代码（从演示直接服用）：

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();