添加一个矩形形状的移动叠加到html5视频

Question

我需要添加一个矩形形状的叠加到一个对象(例如:水瓶)，然后在整个视频中跟踪对象。我已经有了一个文本文件，其中包含了整个视频中每一帧物体的位置。所以我需要:

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