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:
-
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 -
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