向 html5 视频添加矩形形状的移动叠加层

Question

我需要在我的 html5 视频中的一个对象（例如水瓶）上添加一个矩形的叠加层，然后在整个视频中跟踪该对象。 我已经有一个 txt 文件，其中包含整个视频中每一帧的对象位置。所以我需要：

1. 在 html5 视频的每一帧上绘制矩形。因此在播放视频时，我们可以看到跟踪框随着对象移动
2. 跟踪框的移动应与视频同步。因此，当用户单击“暂停”时，跟踪也会暂停。

我只需要一些关于如何解决这个问题的一般建议。是否有可以在视频上绘制形状的 javascript 包？

Answer 1

1) 对于 HTML5 视频，您无法分辨视频在哪个“帧”上。仅以秒为单位在视频中的当前位置（即 5.4423 秒，它可以非常具体）。如果您知道您的视频每秒有多少帧（并且它是恒定的），您可以通过将帧乘以当前秒数来合理地估计您所在的帧。只需使用videoElement.currentTime 即可获取已播放时间。

要在整个播放过程中获取当前秒数数据，请使用 setInterval 函数并每 40 毫秒运行一次（假设您有 25 fps 的视频）

2) 在您的setInterval 回调中，从您的数据文件中获取相关框位置（基于经过的秒数/帧）并使用 javascript 更新框的 x 和 y 位置（例如 element.style.left = x + "px"

框会在暂停时停止，因为经过的秒数也会停止。提示：使框位置为绝对位置，与包含视频位置的元素相对，框将相对于视频的左上角移动。

希望有帮助！

编辑：像这样布置您的 html：

<div id="videoContainer">
  <div id="box"></div>
  <video id="videoElement" controls>
    <source src="myVideo.mp4 type="video/mp4" />
  </video>
</div>

还有你的 CSS：

#videoContainer {
  position: relative;
}
#box {
  width: 100px;
  height: 50px;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
}