Question

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

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

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

Answer 1

1）使用HTML5视频，您无法说出框架＆＃39;视频已开启。只有当前位置在视频中的秒数（即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;
}

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

1 个答案: