Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Get HTML5 Video Duration

By David Walsh on March 10, 2015

HTML5 video is exciting, if only for the reason that we no longer need Flash or other third party plugins to render media. We can also create custom controls and displays around the video, and one of those displays should be the duration of the video. Let me show you how to get and display the video duration!

The JavaScript

video elements have a duration property which represents the number of seconds in the video. To display the duration in a pretty fashion, you'll need to use parseInt and modulus (%):

// Assume "video" is the video node
var i = setInterval(function() {
	if(video.readyState > 0) {
		var minutes = parseInt(video.duration / 60, 10);
		var seconds = video.duration % 60;

		// (Put the minutes and seconds in the display)

		clearInterval(i);
	}
}, 200);

It's important to use setInterval and check the video's readyState in case the video hasn't loaded by the time you attempt to pull the duration. parseInt is used to get the minute number and modulus is used to get the second count.

Recent Features

By David WalshNovember 21, 2011
Page Visibility API
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
By David WalshNovember 8, 2012
5 More HTML5 APIs You Didn’t Know Existed
The HTML5 revolution has provided us some awesome JavaScript and HTML APIs. Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a...

Incredible Demos

By David WalshNovember 21, 2011
Page Visibility API
One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?
By David WalshJune 29, 2009
Highlighter: A MooTools Search & Highlight Plugin
Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

Discussion

alexander farkas

There are two events you can use instead of an interval

a) loadedmetadata
b) durationchange

Of course you still need to check readyState initially.

(function(){
	var video = document.querySelector('video');
	var onDurationChange = function(){
		if(video.readyState){
			//to your thing
		}
	};

	video.addEventListener('durationchange', onDurationChange);
	onDurationChange();
})();

Sin
You need to divide video duration by 60 to get minutes, then use parseInt with radix 10. We should test if video duration > 0 before our division.
```
var minutes = parseInt(video.duration / 60, 10);
```

Sin

You need to divide video duration by 60 to get minutes, then use parseInt with radix 10.

if (video.duration > 0) {
  var minutes = parseInt(video.duration / 60, 10);
  var seconds = video.duration % 60;  
}

Tune
David,

You forgot to divide the duration (seconds) by 60 to get minutes:
```
var minutes = parseInt(video.duration / 60, 10);
```
Thanks for the great articles!
Hristo Chakarov
Since when (and on which platforms) setInterval passes the interval ID as argument to the callback function?
Cathy Mayhue
HTML5 video is really great, gone are the days struggling with Flash codes and easily display our videos. Thanks for the JS code.
Ron
Thanks for the code! What if I want also to get the hours and display them as a HH:mm:ss format accordingly?

Roshan

I m trying to buid the video using jquery. Please help to fetch the video duration before loaded

var video=$('');    				
var source= $('');
$(source).appendTo(video);
$(source).attr('src',php.mp4);
$(source).attr('type','video/mp4');	
//var d=	$(video).duration;
var d=document.querySelector('video').duration;
console.log(d);

IamGuest

You could just use the javascript while function…

 while (true) {
 if (video.readyState) {
  //blabla code
  break;
 }
 //code to execute if not accomplished
}