有沒有辦法讓兩個視頻在無插件的網頁中同步？

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