javascript – Tracking a moving object in a html 5 video

I have a simple html5 video player, I need to add an overlay of rectangular shape to an object (eg. water bottle) in my html5 video, and then track the object throughout the video.

Problem:

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 synchronized with the video. so when the user clicks
   ‘pause’, the tracking will pause too.

NOTE: I am inspired by Tedbaker video can be found here Tracking
moving object demo, I want the same.

HTML

<div id="videoContainer">
  <div id="box"></div>
   <video id="videoElement" controls>
     <source src="https://edge-vids.wirewax.com/80E87A/wirewax-videos/vidData/8019770/8019770_1080.mp4" type="video/mp4" />
   </video>
</div>

JS so far he re is what I have.

$(document).ready(function() {

    $("#videoplayer")[0].addEventListener("loadedmetadata", function () {

    //get videoplayer tag element
    var videoplayerID = document.getElementById("videoplayer");

        //get current time using timeudate from video tag
        videoplayerID.addEventListener("timeupdate", function() {

        if ($(this)[0].duration) {
            $(this).parent().parent().find("#current-time").css("width", ($(this)[0].currentTime * 100 / $(this)[0].duration) + "%");
        }

        });

   });   
})

CSS:

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

What do I need to do to achieve what I want?

Tags: html, java, javascriptjavascript, object, video