JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="video_container">
<video id="home_explainer_placeholder" class="video_placeholder" controls>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
<div>Current Time : <span id="currentTime">0</span></div>
<div>Total time : <span id="totalTime">0</span></div>
<div> Remaining: <span id="remainingTime">0</span></div>
</div>
</body>
JavaScript
$(function(){
$("#home_explainer_placeholder").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime, this.duration);
});
});
function onTrackedVideoFrame(currentTime, duration){
$("#currentTime").text(currentTime);
$("#totalTime").text(duration);
$("#remainingTime").text(duration-currentTime);
}