Retrieving HTML5 video duration separately from the file

Question

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" /> 
</video>
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>  
</ul>

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

alert(duration);
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.

Answer 1

Do that:

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

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);
});

Answer 2

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:

window.setInterval(function(t){
  if (video.readyState > 0) {
    var duration = $('#duration').get(0);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;
    clearInterval(t);
  }
},500);

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

There's more information about media element attributes on developer.mozilla.org.

Answer 3

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" /> 
</video>

http://www.w3.org/TR/html-markup/video.html#video.attrs.preload

Answer 4

neither listen "loadedmetadata" or "durationchange", video.duration is unreliable.
try load "https://media.w3.org/2018/10/w3c-particles.webm"

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

Answer 5

This is the modification to your code

var duration = document.getElementById("duration");
var vid_duration = Math.round(document.getElementById("video").duration);
//alert(vid_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?

Answer 6

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;
        console.log(duration);
        clearInterval(t);
    }
}, 500);

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

Answer 7

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