CODEWITHSUNDEEP
javascripthtml5-video
aman
aman

Reputation: 393

How to check HTML5 Video Time Update before and after?

I'm trying to check the current playback time changed of the video in HTML5. I'm currently using the seeking event to check the current playback time changed. But I want to know to what duration is the time changed to and where was the time before hand.

If someone can't understand the question properly, comment below.

My code: 

<html>
<body>

<video id="myVideo" width="320" height="176" controls>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>

<p>Playback position NOW: <span id="pos1"></span> | This should show the duration the video is at after 'seeking' event</p>
<p>Playback position BEFORE: <span id="pos2"></span> | This should show the duration the video was at after 'seeking' event</p>

<script>
  var vid = document.getElementById("myVideo");
  vid.addEventListener("seeking", function(){before(vid.currentTime);});
  vid.addEventListener('seeked', after);

  function before(time)
  {
     document.getElementById("pos1").innerHTML = time;
  }
  function after()
  {
     document.getElementById("pos2").innerHTML = vid.currentTime;
  }
</script>

</body>
</html>

Upvotes: 2

Views: 1154

Answers (1)

user2676208
user2676208

Reputation: 133

I would suggest looking at both the seeking and seeked events. Perhaps by finding the currentTime when you begin seeking and then finding it again when seeked is fired, you can output those two.

Upvotes: 2

Related Questions