javascript - 使用 Video.JS 同步两个视频

Question

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

目标是 canv2 可以自行暂停，然后 catch 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 catch 之前，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 视频，那么我可以建议您不同的可能性:

1. Popcorn.js库是为了将视频与内容同步而创建的，但我还没有看到两个视频的工作示例。
2. 有一个原型(prototype) mediagroup.js GitHub 上 - 用于同步视频的库。

第二个很有趣 - 他们正在使用 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 和回调作为参数。我无法提供更多帮助，因为我不是该主题的专家。也许用 async.js 标签标记你的问题？