添加矩形形状的移动叠加到html5视频 [英] Add a moving overlay of rectangular shape to html5 video

问题描述

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

I need to add a overlay of rectangular shape to an object (eg. water bottle) in my html5 video, and then track the object throughout the video. I already have a txt file which contains the object's positions for each frame throughout the video. So I need to:

1. 在html5视频的每一帧上绘制矩形形状。因此，当播放视频时，我们可以看到跟踪框与对象一起移动


2. 跟踪框的移动应该与视频同步。因此，当用户点击暂停时，跟踪也会暂停。

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

I just need some general advice on how to approach this problem. Is there javascript package that can draw shapes on videos?

推荐答案

1）使用HTML5视频，你无法分辨出什么是'框架'视频已开启。只有当前位置在视频中的秒数（即5.4423秒，它可以非常具体）。如果您知道视频每秒有多少帧（并且它是常数），您可以通过将帧乘以当前秒来合理地估计您所在的帧。只需使用 videoElement.currentTime 即可获得已播放的播放时间。

1) With HTML5 video, you can't tell what 'frame' the video is on. Only what the current position is in the video in seconds (i.e. 5.4423 seconds, it can be quite specific). If you know how many frames per second your video has (and it's constant) you can reasonably estimate what frame you are on by multiplying frames by current seconds. Simply use videoElement.currentTime to get the elapsed playback time.

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

To get the current seconds data throughout playback, use the setInterval function and run it every 40 milliseconds (assuming you have a 25 fps video)

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

2) In you setInterval callback grab the relevant box position from your data file (based on the elapsed seconds/frames) and update the x and y position of the box using javascript (e.g. element.style.left = x + "px"

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

The box will stop on pause because the elapsed seconds will stop too. Hint: make the box position absolute and the element containing the video position relative, and the box will move relative to the top left corner of the video.

希望有帮助！

编辑：按照以下方式布置你的HTML：

Edit: lay out your html like this:

<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视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！