Menu
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.
764
The duration property returns the length of the current audio/video, in seconds. If no audio/video is set, NaN (Not-a-Number) is returned.
HTML5 is the latest version of HTML. Unlike previous versions of HTML, HTML5 enables developers to easily add video to webpages with a video tag.
<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.
The pause() method halts (pauses) the currently playing audio or video.
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.
180
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
