Javascript 使用Video.JS同步两个视频

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

目标是canv2可以暂停自己，然后赶上canv1。问题是，我的同步功能遇到了问题。有一些延迟，所以当我同步时，我会丢失7到10帧的视频

这就是概念。此代码使用Video.JS API

var conchShell=canv1；//苍蝇王，婊子！
//接受播放器对象作为参数-canv1、canv2
函数pause（）{
for（var i=0，j=arguments.length；i

conchShell是拥有主时间线的玩家，其他玩家与之同步。 所以问题是，当我运行sync函数时，conchShell视频仍然比我要同步的视频提前5到10帧。我假设这是由于运行sync函数所需的时间。i、 视频在几分之一秒内完全同步，但在canv2赶上之前，conchShell已经提前了几帧

所以问题是：有没有一种简单的方法来计算函数运行所需的时间？因为如果有的话，我可以把时间附加到canv2上的时间码中，我们就成功了

更新：

好的，我试过其他一些方法。我现在正在使用异步库，并且取得了一些成功。我唯一的问题是它在async.js的第505行抛出了一个“object is not a function”错误。据我所知，这通常是因为缺少分号而引发的错误

不管怎样，这是我现在得到的一个活生生的版本。如果您愿意的话，请查看代码

---

如果您使用的是HTML5视频或Flash回退，则没有任何信息。这两方面你都有问题吗？ 我在使用Flash player时遇到的一个问题是，它不允许完美搜索，所以几乎总是离你几帧远

回答您的问题：有一种简单的方法可以测量功能运行了多长时间：

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

然而，我认为它不能解决你的问题

如果您只关心HTML5视频，那么我可以向您推荐不同的可能性：

这个库是用来同步视频和内容的，但我还没有看到两个视频的工作示例

GitHub上有一个用于同步视频的原型库

第二个很有趣-他们使用的是

requestAnimationFrame

函数，如果使用的是

setTimeout

或

setInterval

，则应该切换到该函数-它更准确

更新： 使用async解决您眼前的问题： 我在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

中的函数接受回调参数，我认为这就是真正的异步。异步中的迭代器也是如此。每个迭代器都有item和callback作为参数。我无能为力，因为我不是这方面的专家。也许可以用async.js标记您的问题？

如果您使用的是HTML5视频或Flash回退，则没有任何信息。这两方面你都有问题吗？ 我在使用Flash player时遇到的一个问题是，它不允许完美搜索，所以几乎总是离你几帧远

回答您的问题：有一种简单的方法可以测量功能运行了多长时间：

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

然而，我认为它不能解决你的问题

如果您只关心HTML5视频，那么我可以向您推荐不同的可能性：

这个库是用来同步视频和内容的，但我还没有看到两个视频的工作示例

GitHub上有一个用于同步视频的原型库

第二个很有趣-他们使用的是

requestAnimationFrame

函数，如果使用的是

setTimeout

或

setInterval

，则应该切换到该函数-它更准确

更新： 使用async解决您眼前的问题： 我在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

中的函数接受回调参数，我认为这就是真正的异步。异步中的迭代器也是如此。每个迭代器都有item和callback作为参数。我无能为力，因为我不是这方面的专家。也许可以用async.js标记你的问题？

我非常喜欢popcorn.js，但我也有点喜欢自己的，因为我也需要使用flash回退功能。奇怪的是，如果我执行

函数syncToConchShell（）{pause（conchShell，canv2）；canv2.currentTime（conchShell.currentTime（））；console.log（参数[I]+'与'+conchShell'同步）；setTimeout（play（conchShell，canv2），1000）}

它会完美地同步。所以我认为1000毫秒的等待允许currentTime（）；函数来完成操作。我非常喜欢popcorn.js，但我有点喜欢自己的，因为我需要这个函数