javascript - Canvas 动画与视频时间同步

Question

我们必须开发一个应用程序来绘制与视频同步的跟踪表示。因此，以体育为例，当玩家 A 在视频中击球时， Canvas 的 球 表示必须出现在玩家 A 旁边> 表现得好像它真的击中了它。

这里的主要问题是我们已经完成了所有跟踪，并且对于每个元素，它都带有随时间变化的位置坐标(音调)，例如: 70 120 00:00:23.335 ...

我的需要是当视频达到 00:00:23.335 时能够在 Canvas 上的该位置 (70, 120) 绘制该对象。

信息量很大，因此我无法在每个 timeupdate 上运行 array.filter() 函数，因为它肯定会在过滤器已经完成。

问题

如何在 Javascript 上组织这些数据，以便我可以在最接近的实际时间访问元素的位置？

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

我的(错误的)观点

正如我已经说过的，我唯一的方法是使用包含所有数据的数组，并执行过滤器(或循环)以在每个数组上搜索最近的点坐标视频 timeupdate事件:

var playerA_pts = [
    {time: 23.330, x: 70, y:120},
    {time: 23.790, x: 75, y: 121},
    {time: 23.800, x: 76, y: 123},
    ...
]

但是，当视频处于高级时间时，这种方法的性能会很差......

其他信息

我们获得的跟踪数据(对我们来说是外部的)不是恒定的帧速率，因此我们可以以不同的时间速率记录坐标元素。

提前谢谢您!

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
    }
}

例如如果您的视频以 24 fps 捕获，则通过以下公式计算帧

var FRAME_RATE = 24;

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

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

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

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