使用Video.JS同步两个视频

Synchronizing two videos with Video.JS

本文关键字：两个 视频 Video JS 同步 使用      更新时间：2023-09-26

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

目标是canv2可以暂停自己，然后赶上can1。问题是，我的同步功能出了点问题。有一些延迟，所以当我同步时，我丢失了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的时间码上，我们就成功了。

更新:

好的，我已经尝试了一些其他的方法。我现在正在使用异步库，并取得了更多的成功。我唯一的问题是，它抛出了一个"对象不是一个函数"的505行async.js错误。据我所知，这通常是由于缺少分号而抛出的错误。

无论如何，这是我现在得到的一个现场版本。如果你愿意的话，检查一下代码

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

如果你正在使用HTML5视频或Flash回退，则没有信息。你在这两方面都有问题吗?我在Flash播放器上遇到的一个问题是，它不允许完美的搜索——所以你几乎总是有几帧的差距。

回答你的问题:有一个简单的方法来测量函数花了多长时间:

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

但是我不认为它能解决你的问题。

如果你只关心HTML5视频，那么我可以建议你不同的可能性:

  1. Popcorn.js库是为同步视频和内容而制作的，我还没有看到两个视频的工作示例。
    2. 在GitHub上有一个用于同步视频的mediaggroup .js的原型。

第二个是有趣的-他们使用requestAnimationFrame函数，如果你使用setTimeout或setInterval，你应该切换到它-它更准确。

更新:解决你的即时问题与异步:我在Chrome中更新的代码的问题是:对象不是一个函数。我以前没有使用过async.js。但似乎你应该传递数组的函数或对象到你的async。平行的，可能像这样:

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标签标记你的问题?

相关文章：