javascript - Add a moving overlay of rectangular shape to html5 video -

i need add overlay of rectangular shape object (eg. water bottle) in html5 video, , track object throughout video. have txt file contains object's positions each frame throughout video. need to:

1. draw rectangular shape on each frame of html5 video. when video being played, can see tracking box moving object
2. the tracking box's movement should synchronised video. when user click 'pause', tracking pause too.

i need general advice on how approach problem. there javascript package can draw shapes on videos?

1) html5 video, can't tell 'frame' video on. current position in video in seconds (i.e. 5.4423 seconds, can quite specific). if know how many frames per second video has (and it's constant) can reasonably estimate frame on multiplying frames current seconds. use videoelement.currenttime elapsed playback time.

to current seconds data throughout playback, use setinterval function , run every 40 milliseconds (assuming have 25 fps video)

2) in setinterval callback grab relevant box position data file (based on elapsed seconds/frames) , update x , y position of box using javascript (e.g. element.style.left = x + "px"

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

hope helps!

edit: lay out html this:

<div id="videocontainer">   <div id="box"></div>   <video id="videoelement" controls>     <source src="myvideo.mp4 type="video/mp4" />   </video> </div> 

and css:

#videocontainer {   position: relative; } #box {   width: 100px;   height: 50px;   background: red;   position: absolute;   left: 0;   top: 0; }