HTML5 Video duration without playing video

Question

I am trying to get video duration in HTML5 with out playing video or before playing video to show on video thumb as you seen on you tube or any other video sites.

Any help will be really appreciate.

Thanks in Advance.

I think it is not always possible without starting the movie. I also suspect if youtube does it then they pre-process the movie on the server to get the duration. — akonsu, Oct 25 '13 at 14:06

ToddBFisher · Answer 1 · 2020-08-12T21:26:30.763

31

For HTML5 you should be able to use the video tag's duration property, once the file's metadata is loaded. See this answer for a good way to do it:

Retrieving HTML5 video duration separately from the file

To quote the anwser by Mikushi:

myVideoPlayer.addEventListener('loadedmetadata', function() {
    console.log(videoPlayer.duration);
});

By listening for the 'loadedmetadata' event you will ensure the duration value has been loaded.

More details on the loadedmetadata can be found here: http://www.w3schools.com/tags/av_event_loadedmetadata.asp

EDIT

As per @lucas-vasques 's comment, instead of the loadmetadata event, you could use durationchange which the MDN Media Events list describes as ...

The metadata has loaded or changed, indicating a change in duration of the media. This is sent, for example, when the media has loaded enough that the duration is known.

edited Aug 12 '20 at 21:26

answered Oct 25 '13 at 14:09

ToddBFisher

11,370
8
38
54

2

it is ok, but i would like to show on page load not any click event. – Sajal Oct 25 '13 at 14:14
This is not an onclick event, this is when the video meta data loads (before any click events) more info here: http://www.w3schools.com/tags/av_event_loadedmetadata.asp – ToddBFisher Oct 25 '13 at 14:16
3

+1, thanks for the helpful code. Shouldn't it be `myVideoPlayer` inside the callback instead of `videoPlayer` though? – Dominic P Feb 17 '14 at 23:27
+1, it works also where multiple versions of the same video are used in the same video element (as source elements). – cristiancajiaos Jul 11 '17 at 21:26
2

There's an update: use `durationchange` instead of `loadedmetadata` – Lucas Vazquez Aug 12 '20 at 15:02

score 3 · Answer 2 · answered Oct 25 '13 at 14:10

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function getDuration() {
            var s = document.getElementById('a');
            alert(s.duration)
        }
    </script>
</head>
<body>
<div>
    <video src="2.mp4" id="a" controls="controls"></video>
    <button onclick="getDuration()">get duration</button>
</div>
</body>

</html>

score 0 · Answer 3 · answered Oct 25 '13 at 14:11

There is a special event triggered on video elements called "loadedmetadata". Once this one is triggered, properties such as duration are available on the video element.

Here's an exhaustive list of all HTML5 video events : http://www.w3.org/2010/05/video/mediaevents.html

score 0 · Answer 4 · answered Oct 02 '17 at 17:41

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

HTML5 Video duration without playing video

4 Answers4

Linked

Related