我需要在html5视频中为对象(例如水瓶)添加矩形叠加,然后在整个视频中跟踪对象。 我已经有一个txt文件,其中包含整个视频中每个帧的对象位置。所以我需要:
我只需要一些关于如何解决这个问题的一般性建议。是否有可以在视频上绘制形状的javascript包?
答案 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;
}