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

时间:2015-07-07 11:51:39

标签: javascript html5 video

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

  1. 在html5视频的每一帧上绘制矩形形状。所以当播放视频时,我们可以看到跟踪框随着对象一起移动
  2. 跟踪框的移动应与视频同步。因此,当用户点击“暂停”时,跟踪也会暂停。
  3. 我只需要一些关于如何解决这个问题的一般性建议。是否有可以在视频上绘制形状的javascript包?

1 个答案:

答案 0 :(得分:2)

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