Get current play time of a video in JavaScript – HTML5 Video

In this JavaScript tutorial, we gonna learn how to get current play time of a video in JavaScript.
If you are going to create a video player with core JavaScript and you need to show the live video playback time in JavaScript then you are at the right place. Here we will show you the coolest way to get the current HTML5 video playback time using JavaScript.

get current play time of a video in JavaScript

Image source ( karan nawani’s video screenshot, one of my favorite youtube singers )

In the above picture, you can see a video with the playback time in seconds.

You may read,

I will show you how to do that. In every second the current playback time will be shown that means the current time will be updated.

Get current play time of a video in JavaScript

We have a video with file nameĀ my_vid.MKV

Let’s create an HTML5 video element for this video first.

<video id="myvideo" width="500px"; src="my_vid.MKV"></video>

Now, using JavaScript we gonna play this video and show the video playback time



<video id="myvideo" width="500px"; src="my_vid.MKV"></video>
   <button onclick="settime()">Click To Action!</button>
   <div id="time"></div>
   <script type="text/javascript">
    
    function settime(){
      var video= document.getElementById("myvideo");
      video.play();
      console.log(video.currentTime);
      setInterval(function(){
        console.log(video.currentTime);
        var unit= "seconds";
        document.getElementById("time").innerHTML= Math.round(video.currentTime)+unit;
        },1000);
    }
   </script>

Math.round is used to round up the Current Time. Because the current time will look like 2.655102 if you do not use the Math.round

Then we have concatenated the unit of the time, i.e second

Thus the out put of the below code will be like this:

document.getElementById("time").innerHTML= Math.round(video.currentTime)+unit;
Output:
1 seconds -> 2 seconds -> 3 seconds

In this way the current time will be updated in each second.

In order to update the playback time we used setInterval.

Finally, you can use the code or customize it as per your wish.

You may also read,

Leave a Reply

Your email address will not be published. Required fields are marked *