画布动画与视频时间同步

Question

我们必须开发一个应用程序来绘制与视频同步的跟踪表示。因此，对于体育示例，当 Player A 在视频上击球时，画布'Ball表示必须出现在 Player A 表示旁边如果它真的打它。

这里的主要问题是我们已经完成了所有跟踪，并且它为每个元素提供了（时间坐标）位置坐标，如：                           70             120             00：00：23.335                  ...     

我需要能够在视频点击00：00：23.335时在该位置（70,120）的 canvas 上绘制该对象。

这是很多信息，因此我无法在每个array.filter()上运行timeupdate函数，因为它肯定会在过滤器已经完成之前播放下一帧。

问题

如何以可以访问最接近的实际时间元素位置的方式在Javascript上组织数据？

因此，如果视频位于00：00：23.500，我可以快速获得位置x:70, y:120，因为它最接近那一刻。

我的（错误的）pov

正如我已经说过的，我唯一的方法是使用一个包含所有数据的数组并执行filter（或循环）来搜索每个视频上所有数组的最近点坐标{{ 1}}事件：

timeupdate

然而，当视频处于高级时间时，这种方法会有糟糕的表现......

其他信息

我们给出的跟踪数据（它在我们外部）并不是恒定的帧速率，因此我们可以在它们之间以不同的时间速率记录坐标元素。

提前谢谢！

Answer 1

如果你有几秒钟的视频时间轴，那么尝试转换基于帧的时间轴。

您的时间表应如下

var timeline = {
    "frame_20":{
        x:70, y : 120
    },
    "frame_21":{
        x:72, y : 135
    },
    "frame_22":{
        x:75, y : 143
    },
    "frame_23":{
        x:79, y : 150
    }
}

e.g。如果您的视频以24 fps捕获，则按照以下公式计算帧

var FRAME_RATE = 24;

   var _frameNo = Math.floor( video.currentTime / (1/FRAME_RATE) );

on requestAnimationFrame检查视频当前时间，使用给定公式将其转换为帧，并获取如下详细信息

    var _newPos = timeline["frame_"+ _frameNo];

    left = _newPos.x;
    top = _newPos.y;