Question

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

我环顾四周找到了SMIL，但它看起来只适用于IE。我还尝试使用jQuery和jMediaElement实现我自己的功能，但似乎有很多情况下视频可能会不同步。

以前是否已完成？

Answer 1

在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）。否则它会回落到setInterval，因为它没有提供相同的性能和节省电池的优势。

（顺便说一下，它使用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();

Answer 2

在没有插件的情况下播放视频的唯一方法是使用HTML5或SVG＆lt; video＆gt;。没有可靠的方法可以保持两个HTML5视频同步，但如果确切的同步并不重要，那么你可以通过同时调用play（）或者在两个视频上调用play（）和pause（）来获得非常接近的效果。如Simeon暗示的那样使它们大致同步。

对于SVG＆lt; video＆gt;，SVG已经有一些SMIL的小（和修改）子集，所以它可能已经在规范中得到支持，但据我所知，没有浏览器可以正确处理这个。

Answer 3

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

目前没有用于与视频时间轴同步事物的良好API，例如字幕或信息框。为了这个目的，规范早先有了“提示范围”（甚至更早是“提示点”）;预计将来会添加类似的东西

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

不过，这篇文章非常有趣，也许你会在其中找到一些有用的提示。

Answer 4

找到它。它在http://html5demos.com上。

结帐demo ..对我来说在Chrome上运行得非常好（差不多好）。

页面上提供了该来源。

有没有办法在没有插件的情况下在网页中保持两个视频同步？

4 个答案: