有没有办法让两个视频在没有插件的情况下保持同步?

找到了。它是开着的 http://html5demos.com .

签出这个 demo …对我来说,它在Chrome上非常(几乎)有效。

该源在页面上可用。

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/

请记住,浏览器支持,此功能由Firefox、Chrome以及Safari 6和IE 10支持(请参见 table 更多细节)。否则它会回到设置间隔,witch不提供相同的性能和电池节约优势。

(它使用 Popcorn.js 顺便说一下,这是Mozilla的一个非常好的项目)

下面是代码(直接从演示中获取):

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

在没有插件的情况下播放视频的唯一方法是使用HTML5或SVG<video>。没有可靠的方法来保持两个HTML5视频同步,但是如果精确的同步不是关键的,那么您可能只需同时调用play()或在两个视频上调用play()和pause()以使它们大致同步,正如Simeon所暗示的那样。

至于svg<video>,svg已经有了一些小的(和修改过的)smil子集,因此规范中可能已经支持它,但据我所知,没有任何浏览器能够正确处理这一问题。

似乎连歌剧院都有这个问题(2010年3月10日):

目前还没有一个好的API可以将事情与视频的时间线同步。 ,例如标题或信息框。规范早先对此有了“提示范围”(甚至更早的时候是“提示点”),预计将来还会添加类似的内容。

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

顺便说一句,这篇文章真的很有趣,也许你会在其中找到一些有用的提示。