Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

current/duration time of html5 video?

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

like image 495
Cody Avatar asked Jun 17 '11 03:06

Cody


People also ask

How do you find the duration of a video in HTML?

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.

What is HTML5 video format?

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.

Can HTML5 be video?

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.

What is the correct HTML5 element for playing video?

<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.


1 Answers

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

like image 64
Thomas Bratt Avatar answered Oct 01 '22 04:10

Thomas Bratt