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.
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![Create a Simple Slideshow Using MooTools, Part II: Controls and Events]()
Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:
Adding "Next" and "Previous" controls.
Adding...
![Disable Autocomplete, Autocapitalize, and Autocorrect]()
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...
There are two events you can use instead of an interval
a)
loadedmetadatab)
durationchangeOf course you still need to check
readyStateinitially.(function(){ var video = document.querySelector('video'); var onDurationChange = function(){ if(video.readyState){ //to your thing } }; video.addEventListener('durationchange', onDurationChange); onDurationChange(); })();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.
if (video.duration > 0) { var minutes = parseInt(video.duration / 60, 10); var seconds = video.duration % 60; }David,
You forgot to divide the duration (seconds) by 60 to get minutes:
Thanks for the great articles!
Since when (and on which platforms)
setIntervalpasses 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:ssformat accordingly?I m trying to buid the video using jquery. Please help to fetch the video duration before loaded
var video=$(''); var source= $(''); $(source).appendTo(video); $(source).attr('src',php.mp4); $(source).attr('type','video/mp4'); //var d= $(video).duration; var d=document.querySelector('video').duration; console.log(d);You could just use the javascript
whilefunction…while (true) { if (video.readyState) { //blabla code break; } //code to execute if not accomplished }