<div id="video_container">
    <video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="none" controls="" id="video" tabindex="0">
      <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source>
      <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source>
      <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
</div>

<div>Current Time : <span  id="currentTime">0</span></div>
<div>Total time : <span id="totalTime">0</span></div>

$(document).ready(function(){
  $("#video").on(
    "timeupdate", 
    function(event){
      onTrackedVideoFrame(this.currentTime, this.duration);
    });
});

function formatTime(time) {
  var minutes = Math.floor(time / 60);  
var seconds = Math.floor(time - minutes * 60);
  var x = minutes < 10 ? "0" + minutes : minutes;
var y = seconds < 10 ? "0" + seconds : seconds;
  
  return x + ":" + y;
}

function onTrackedVideoFrame(currentTime, duration){
  var total = formatTime(duration);
    $("#currentTime").text(formatTime(currentTime)); 
    $("#totalTime").text(total)
}