50

I need a way of getting the total time length of the video and the current time with jquery and displaying it in a couple of <div> tags.

<div id="current">0:00</div>
<div id="duration">0:00</div>

I've been searching all day and I know how to get them I just can't display them. #jquerynoob

1
  • You can get currentTime and duration values in timeupdate event of Video tag.
    – Mr_Green
    Commented Nov 24, 2015 at 6:40

6 Answers 6

61

HTML:

<video
    id="video-active"
    class="video-active"
    width="640"
    height="390"
    controls="controls">
    <source src="myvideo.mp4" type="video/mp4">
</video>
<div id="current">0:00</div>
<div id="duration">0:00</div>

JavaScript:

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

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime); //Change #current to currentTime
    $("#duration").text(duration)
}

Notes:

Every 15 to 250ms, or whenever the MediaController's media controller position changes, whichever happens least often, the user agent must queue a task to fire a simple event named timeupdate at the MediaController.

http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position

3
  • 1
    is it possible to do it without jQuery?
    – zok
    Commented Dec 4, 2015 at 11:04
  • 1
    @zok - jQuery is only being used as the selector here. Just use document.getElementById('video-name') instead.
    – Tom
    Commented Jan 17, 2016 at 11:39
  • 1
    This does not seem to work if there is only an mp4 video.
    – lharby
    Commented Jan 6, 2017 at 9:09
23

This page might help you out. Everything you need to know about HTML5 video and audio

var video = document.createElement('video');
var curtime = video.currentTime;

If you already have the video element, .currentTime should work. If you need more details, that webpage should be able to help.

18

Working example here at : http://jsfiddle.net/tQ2CZ/1/

HTML

<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>

JS

$(function(){
$('#currentTime').html($('#video_container').find('video').get(0).load());
$('#currentTime').html($('#video_container').find('video').get(0).play());
})
setInterval(function(){
$('#currentTime').html($('#video_container').find('video').get(0).currentTime);
$('#totalTime').html($('#video_container').find('video').get(0).duration);    
},500)
2
  • This doesn't work when there is only an mp4 video for the source (no webm or ogg). So I think the duration must only exist for the other formats.
    – lharby
    Commented Jan 6, 2017 at 9:10
  • per my answer to stackoverflow.com/questions/41503253/…, the duration is only available once metadata has loaded for the video Commented Jan 6, 2017 at 21:29
3

The answers here do not allowing for seeking / scrubbing. You need this code or currentTime will not update quickly when you seek / scrub, especially if you do so fast.

// Get the <video id="myVideo"> element
const video = document.getElementById('myVideo')

// updates currentTime when playing
video.ontimeupdate = evt => this.currentTime = evt.target.currentTime

// updates currentTime when seeking / scrubbing
video.onseeking = evt => this.currentTime = evt.target.currentTime

// updates currentTime when paused / video ends
video.onpause = evt => this.currentTime = evt.target.currentTime

And I recommend these as well:

// when resuming playback, fires quicker than ontimeupdate 
video.onplay = evt => this.currentTime = evt.target.currentTime

// when resuming playback, fires quicker than ontimeupdate 
video.onplaying = evt => this.currentTime = evt.target.currentTime

You may not need both of these last two but no harm in overdoing it.

Other events worth mentioning:

video.onseeked seems to fire the same time as video.ontimeupdate so no need to listen to it for the purposes of getting currentTime. This was only tested on Chrome.

video.onended seems to fire the same time as video.onpause so no need to listen to it for the purposes of getting currentTime. This was only tested on Chrome.

All available events are documented at https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

If you use all the events recommended in this post, you should find that currentTime updates quickly. However, you may wish to have multiple event listeners listening to the same event, allowing you to add or remove them at will. If so I recommend this approach:

https://stackoverflow.com/a/69273090/1205871

2

I am assuming you want to display this as part of the player.

This site breaks down how to get both the current and total time regardless of how you want to display it though using jQuery:

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

This will also cover how to set it to a specific div. As philip has already mentioned, .currentTime will give you where you are in the video.

2

https://www.w3schools.com/tags/av_event_timeupdate.asp

// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
// Display the current position of the video in a <p> element with id="demo"
    document.getElementById("demo").innerHTML = vid.currentTime;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.