CODEWITHSUNDEEP
javascripthtmlvideo
JYI2
JYI2

Reputation: 53

Add a moving overlay of rectangular shape to html5 video

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. draw the rectangular shape on each frame of the html5 video. so when the video is being played, we can see the tracking box moving with the object
  2. the tracking box's movement should be synchronised with the video. so when the user click 'pause', the tracking will pause too.

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

Upvotes: 4

Views: 3005

Answers (1)

Jonathon Blok
Jonathon Blok

Reputation: 749

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.

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) 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.

Hope that helps!

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>

And your CSS:

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

Upvotes: 3

Related Questions