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

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
Cody
  • 1,281
  • 2
  • 10
  • 12

6 Answers6

59

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

Jeff
  • 1,018
  • 1
  • 15
  • 33
Thomas Bratt
  • 48,038
  • 36
  • 121
  • 139
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.

Philip Tinney
  • 1,986
  • 17
  • 19
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)
Mandeep Pasbola
  • 2,631
  • 2
  • 26
  • 50
  • 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 Jan 06 '17 at 09:10
  • per my answer to https://stackoverflow.com/questions/41503253/custom-html5-video-controls-not-working-when-mp4-is-the-only-source/41514594#41514594, the `duration` is only available once metadata has loaded for the video – Offbeatmammal Jan 06 '17 at 21:29
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;
}
Patrick C
  • 21
  • 2
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.

Mike Veigel
  • 3,795
  • 2
  • 20
  • 28
2

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

danday74
  • 52,471
  • 49
  • 232
  • 283