Retrieving HTML5 video duration separately from the file

user_268567 0
Viewed 84861

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.

html5-video video html javascript
7 Answers

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?

user_2511730

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

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

user_113222370
Related