title: Showing time of the video frame on hover over seek bar
body: <p>I am trying to show the time on hover of seek bar of a html5 video. ( similar to how youtube does it).
  I have tried to use the timeupdate event on the video as below but looks like there is more to it.</p>
  
  <pre><code>        &lt;script&gt;
      function myFunction(event) {
          // The currentTime property 
          document.getElementById("demo").innerHTML = event.currentTime;
        var video = event;
        video.addEventListener('progress', function() {
          var bufferedEnd = video.buffered.end(video.buffered.length - 1);
          var duration =  video.duration.toFixed(1);
          alert(duration);
          if (duration &gt; 0) {
            document.getElementById('buffered-amount').style.width = ((bufferedEnd / duration)*100) + "%";
          }
        });
  
        //  display the current and remaining times
      video.addEventListener("timeupdate", function () {
        //  Current time  
        var vTime = video.currentTime;
        var vLength = video.duration.toFixed(1);
        document.getElementById("curTime").textContent = vTime.toFixed(1);
        document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
      }, false);
  
     }
    &lt;/script&gt;
  </code></pre>
  
  <p>html:</p>
  
  <p></p>
  
  <p></p>
  
  <pre><code> &lt;source src="mov_bbb.ogg" type="video/ogg"&gt;
      Your browser does not support HTML5 video.
     &lt;/video&gt;
    &lt;div class="buffered"&gt;
     &lt;span id="buffered-amount"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="progress"&gt;
     &lt;span id="progress-amount"&gt;&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;p&gt;Playback position: &lt;span id="demo"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;Current Time: &lt;span id="curTime"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;p&gt;Remaining Time: &lt;span id="vRemaining"&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>I did try to understand multiple posts but did not find a solution. 
  Do I need to use onmouseover event instead? How do I calculate the time of the video frame when the user positions the mouse on the slider?</p>