Get HTML5 Video Duration
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.
Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it?
At first blush, it was the simplicity of it as compared to the table-and-spacer...
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...
"Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...
There are two events you can use instead of an interval
a)
loadedmetadata
b)
durationchange
Of course you still need to check
readyState
initially.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.
You need to divide video duration by 60 to get minutes, then use parseInt with radix 10.
David,
You forgot to divide the duration (seconds) by 60 to get minutes:
Thanks for the great articles!
Since when (and on which platforms)
setInterval
passes the interval ID as argument to the callback function?HTML5 video is really great, gone are the days struggling with Flash codes and easily display our videos. Thanks for the JS code.
Thanks for the code! What if I want also to get the hours and display them as a
HH:mm:ss
format accordingly?I m trying to buid the video using jquery. Please help to fetch the video duration before loaded
You could just use the javascript
while
function…