Question

好的，我有两个video.js播放器（canv1和canv2），每个播放器都播放同一个视频的副本。我想在canv1的某个时间码暂停canv2，然后在canv1的稍后时间码，与canv1同步canv2并播放。

目标是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上的时间码，我们就是黄金。

更新

好的，我已经尝试了一些其他的东西。我现在正在使用异步库，并取得了一些成功。我唯一的问题是它在async.js的第505行抛出“对象不是函数”错误。据我所知，这通常是一个错误的分号丢失的错误。

无论如何，这是我现在所拥有的实时版本。如果你很善良，请查看代码

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

Answer 1

如果您使用的是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的原型 - 用于同步视频的库。

第二个很有趣 - 他们正在使用requestAnimationFrame功能，如果你使用setTimeout或setInterval，你应该切换到它 - 它更准确。

<强>更新解决您的异步问题：我在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中的迭代器相同 - 它们具有item和callback作为参数。我无法帮助更多因为我不是这个话题的专家。也许用async.js标签标记你的问题？

使用Video.JS同步两个视频

1 个答案: