画布动画与视频时间同步

Canvas animation synchronized with video time

本文关键字：视频 时间 同步 动画 布动画      更新时间：2023-09-26

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

这里的主要问题是我们已经完成了所有的跟踪，并且它伴随着(音调)位置坐标随时间，对于每个元素，像:7012000:00:23.335…

我的需要是能够在画布在那个位置(70,120)当视频到达00:00:23.335。

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

我如何在Javascript上组织这些数据，使我能够在最近的实际时间访问元素的位置?

所以如果视频是在00:00:23.500，我可以很快得到位置x:70, y:120，因为它是最接近那个时刻的。

My (wrong) pov

正如我已经说过的，我唯一的方法是使用一个包含所有数据的数组，并执行filter(或循环)，通过每个视频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},
    ...
]

然而，这种方法会有糟糕的性能，当视频在先进的时间…

我们得到的跟踪数据(它是外部的)不是恒定的帧率，所以我们可以在它们之间以不同的时间速率记录坐标元素。

提前感谢!

如果你的视频时间轴以秒为单位，那么尝试转换为基于帧的时间轴。

你的时间表应该如下

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帧/秒，那么按以下公式计算帧数

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;
相关文章：