I need a way of getting the total time length of the video and the current time with jquery and displaying it in a couple of <div> tags.
<div id="current">0:00</div> <div id="duration">0:00</div>
I've been searching all day and I know how to get them I just can't display them. #jquerynoob
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 Video Format for Desktop and Mobile Streaming The HTML5 video format capabilities include three options to play: MP4, WebM, and Ogg. You should note that the Safari browser does not support Ogg, WebM is supported by only 58% of browsers, and MP4 is disabled by default in Firefox 24.
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.
HTML:
<video id="video-active" class="video-active" width="640" height="390" controls="controls"> <source src="myvideo.mp4" type="video/mp4"> </video> <div id="current">0:00</div> <div id="duration">0:00</div>
JavaScript:
$(document).ready(function(){ $("#video-active").on( "timeupdate", function(event){ onTrackedVideoFrame(this.currentTime, this.duration); }); }); function onTrackedVideoFrame(currentTime, duration){ $("#current").text(currentTime); //Change #current to currentTime $("#duration").text(duration) }
Notes:
Every 15 to 250ms, or whenever the MediaController's media controller position changes, whichever happens least often, the user agent must queue a task to fire a simple event named timeupdate at the MediaController.
http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position
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