Retrieving HTML5 video duration separately from the file

Posted on

Retrieving HTML5 video duration separately from the file – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and html. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Retrieving HTML5 video duration separately from the file.

Problem :

I am working on building a HTML5 video player with a custom interface, but I am having some problems getting the video duration information to display.

My HTML is simple:

<video id="video" poster="image.jpg" controls>     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>  

And the javascript I am using to get and insert the duration is

var duration = $('#duration').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

The problem is nothing happens. I know the video file has the duration data because if I just use the default controls, it displays fine.

But the real strange thing is if I put alert(duration) in my code like so

var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

then it works fine (minus the annoying alert that pops up). Any ideas what is happening here or how I can fix it?

UPDATE: Ok so although I haven’t solved this problem exactly, but I did figure out a work around that handles my biggest concern… the user experience.

First the video doesn’t begin loading until after the viewer hits the play button, so I am assuming that the duration information wasn’t available to be pulled (I don’t know how to fix this particular issue… although I assume that it would involve just loading the video metadata separately from the video, but I don’t even know if that is possible).

So to get around the fact that there is no duration data, I decided to hide the duration info (and actually the entire control) completely until you hit play.

That said, if anyone knows how to load the video metadata separately from the video file, please share. I think that should completely solve this problem.

Solution :

Do that:

var myVideoPlayer = document.getElementById('video_player');
myVideoPlayer.addEventListener('loadedmetadata', function() {

Gets triggered when the browser received all the meta data from the video.

[edit] Since then the better approach would be to listen to ‘durationchange’ instead of ‘loadedmetadata’ which can be unreliable, as such:

myVideoPlayer.addEventListener('durationchange', function() {
    console.log('Duration change', myVideoPlayer.duration);

The issue is in WebKit browsers; the video metadata is loaded after the video so is not available when the JS runs. You need to query the readyState attribute; this has a series of values from 0 to 4, letting you know what state the video is in; when the metadata has loaded you’ll get a value of 1.

So you need to do something like:

  if (video.readyState > 0) {
    var duration = $('#duration').get(0);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;

I haven’t tested that code, but it (or something like it) should work.

There’s more information about media element attributes on

The HTML5 spec does allow for only preloading the metadata:

<video id="video" poster="image.jpg" controls preload="metadata">     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 

This is the modification to your code

var duration = document.getElementById("duration");
var vid_duration = Math.round(document.getElementById("video").duration);
duration.innerHTML = vid_duration;
//duration.firstChild.nodeValue = vid_duration;

Hope this helps.

It looks like you’re using IE, why don’t you use document.getElementById method to retrieve video object?

neither listen “loadedmetadata” or “durationchange”, video.duration is unreliable.
try load “

there is a smart and effective way.

//first, seek to a big number time
video.currentTime = 7*24*60*1000;
//then listen 'seeked' event. when this event occur, that means video duration can access normally
video.onseeked = ()=>{
  alert("the duration is: "+video.duration);
  video.onseeked = undefined;

I encountered the same problem: can not read video’s duration , $('video')[0].duration always return NaN, I referred the accepted answer of @stopsatgreen and change the code to fit in a common case, it really work.

var video = $('video')[0];
var t = setInterval(function () {
    if(video.readyState > 0) {
        var duration = video.duration;
}, 500);

The code is very simple and really work, so I post this answer and hope it can help more people.

Even though this question is tagged for Javascript, these days Typescript is pretty common so I would like to add a Typescript solution with no deprecation warnings or console errors and with a parsed minutes:seconds date display.

const video = document.getElementById('your-video-id') as HTMLVideoElement;
video?.addEventListener('loadedmetadata', () => {
const videoDuration = video.duration;
const minutes = parseInt((videoDuration / 60).toString());
const seconds =
  videoDuration % 60 < 10
    ? '0' + Math.ceil(videoDuration % 60).toString()
    : Math.ceil(videoDuration % 60).toString();
const videoDurationTime = minutes + ':' + seconds;

console.log('videoDurationTime :>> ', videoDurationTime);

Credits: Mikushi answer and Grepper answer

Leave a Reply

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