同步兩個視頻與Video.JS

好吧，我有兩個video.js播放器（canv1和canv2），每個播放同一個視頻的副本。我想在Canv1的某個時間碼處暫停canv2，然後在canv1的後續時間碼處，將canv2與canv1同步並播放。同步兩個視頻與Video.JS

canv2可以暫停自己，然後把自己趕上canv1的目標。問題是，我遇到了我的同步功能問題。有一些滯後，所以當我同步我失去7到10幀的視頻。

所以這裏的概念。此代碼使用Video.JS API。 https://github.com/zencoder/video-js/blob/master/docs/api.md

var conchShell = canv1; // Lord of the Flies, Bitch! 

// Accepts player objects as arguments - canv1, canv2 
function pause(){ 
    for (var i = 0, j = arguments.length; i < j; i++){ 
     arguments[i].pause(); 
     console.log(arguments[i] + '1 is paused'); /* TODO: REMOVE CONSOLE LOGS BEFORE DEPLOYMENT */ 
    } 
} 

function play(){  
    for (var i = 0, j = arguments.length; i < j; i++){ 
     arguments[i].play(); 
     console.log(arguments[i] + '1 is playing'); 
    } 
} 

function syncToConchShell() { 
    for (var i = 0, j = arguments.length; i < j; i++){ 
     arguments[i].currentTime(conchShell.currentTime()); 
     console.log(arguments[i] + 'was synchronized with' + conchShell); 
    } 
}

conchShell是具有主時間線，向其中其他玩家同步播放器。所以問題是，當我運行同步功能時，conchShell視頻仍然會在我嘗試同步到它的視頻之前結束5到10幀。我認爲這是由於運行同步功能所花費的時間。即 - 視頻完全同步幾分之一秒，但在canv2被抓住之前，conchShell已經提前幾幀了。

所以問題是：是否有一個簡單的方法來弄清楚一個函數運行多少時間？因爲如果有的話，我可以在canv2上追加時間碼，我們是金手鐲。

UPDATE：

OK，我已經嘗試了一些其他的事情。我現在正在使用異步庫，並取得了一些成功。我唯一的問題是它在async.js的第505行上拋出一個「對象不是函數」錯誤。據我所知，這通常是丟失分號的錯誤。無論如何，這裏是我現在所擁有的現場版本。檢查出的代碼，如果你會這麼好心

http://staging.15four.com/videotest

來源

2013-04-17 coulbourne

沒有信息，如果您使用的是HTML5視頻或Flash後備。你們兩個都有問題嗎？我曾經遇到的一個問題是Flash播放器不允許完美尋找 - 所以幾乎總是你幾幀不起來。

回答你的問題：有簡單的方法來測量長功能如何了：

var start = new Date(); 
// some code to measure 
var end = new Date(); 
var diffMs = end - start;

不過，我不認爲它能夠解決您的問題。

如果你只關心HTML5視頻，然後我可以建議你不同的可能性：

Popcorn.js庫與內容同步的視頻製作，我還沒有看到工作示例有兩個視頻雖然。
GitHub上有一個原型mediagroup.js - 用於同步視頻的庫。

第二個是有趣的 - 他們正在使用功能，你應該，如果你正在使用setTimeout或setInterval切換到它 - 這是更準確。

UPDATE： 解決立即解決問題與異步：我有在Chrome更新的代碼的問題是：對象不是一個函數。我之前沒有使用過async.js。但似乎你應該傳遞的功能或對象數組您async.parallel，大概是這個樣子：

async.parallel([ 
    function() { 
     async.each(players, syncSingleToConch, function() { 
      console.log('error with the each function'); 
     }) 
    }, 
    function() { 
     conchShell.currentTime(arguments[0].currentTime()) 
    } /* ... more ... */ 
]);

但是在async.parallel採取回調參數的功能，我覺得這真的異步的全部意義所在。與async.each中的迭代器相同 - 它們具有項目和回調作爲參數。我無法幫助更多，因爲我不是這個話題的專家。也許用async.js標籤標記你的問題？

來源

2013-04-17 16:50:37

我喜歡popcorn.js很多，但我有點滾動自己的，因爲我需要的功能也與閃回fallback一起工作。奇怪的是，如果我做函數syncToConchShell（）{ 暫停（conchShell，canv2）; canv2.currentTime（conchShell.currentTime（））; console.log（arguments [i] +'與'+ conchShell同步）; setTimeout（play（conchShell，canv2），1000）; }' 它完全同步。所以我認爲1000毫秒等待允許currentTime（）;功能來完成操作。 – coulbourne

已更新的問題 – coulbourne

同步兩個視頻與Video.JS

回答

相關問題