hora actual/duración del video html5?

Question

Necesito una forma de obtener la duración total del video y la hora actual con jquery y mostrarla en un par de etiquetas <div>.

<div id="current">0:00</div> 
<div id="duration">0:00</div> 

He estado buscando todo el día y sé cómo obtenerlos. No puedo mostrarlos. #jquerynoob

Answer 1

Esta página podría ayudarlo. Everything you need to know about HTML5 video and audio

var video = document.createElement('video'); 
var curtime = video.currentTime; 

Si ya tiene el elemento de vídeo, .currentTime debería funcionar. Si necesita más detalles, esa página web debería ser capaz de ayudar.

Answer 2

Supongo que desea mostrar esto como parte del reproductor.

Este sitio se descompone cómo conseguir tanto la hora actual y totales, independientemente de la forma en que desea mostrar que aunque el uso de jQuery:

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

Esto también cubrirá cómo configurarlo a un div específica . Como ya ha mencionado philip, .currentTime te mostrará dónde estás en el video.

Answer 3

Ejemplo de trabajo aquí en: http://jsfiddle.net/tQ2CZ/1/

HTML

<div id="video_container"> 
<video poster="http://media.w3.org/2010/05/sintel/poster.png" preload="none" controls="" id="video" tabindex="0"> 
    <source type="video/mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" id="mp4"></source> 
    <source type="video/webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" id="webm"></source> 
    <source type="video/ogg" src="http://media.w3.org/2010/05/sintel/trailer.ogv" id="ogv"></source> 
    <p>Your user agent does not support the HTML5 Video element.</p> 
</video> 
</div> 

<div>Current Time : <span id="currentTime">0</span></div> 
<div>Total time : <span id="totalTime">0</span></div> 

JS

$(function(){ 
$('#currentTime').html($('#video_container').find('video').get(0).load()); 
$('#currentTime').html($('#video_container').find('video').get(0).play()); 
}) 
setInterval(function(){ 
$('#currentTime').html($('#video_container').find('video').get(0).currentTime); 
$('#totalTime').html($('#video_container').find('video').get(0).duration);  
},500) 

Answer 4

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) 
} 

Notas:

cada 15 a 250 ms, o siempre que los medios de comunicación controlador cambios de posición de la MediaController, lo que ocurra menos a menudo, el agente de usuario debe queue una tarea para desencadenar un evento simple denominado timeupdate en MediaController.

http://www.w3.org/TR/html5/embedded-content-0.html#media-controller-position

Answer 5

https://www.w3schools.com/tags/av_event_timeupdate.asp

// Get the <video> element with id="myVideo" 
var vid = document.getElementById("myVideo"); 

// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed 
vid.ontimeupdate = function() {myFunction()}; 

function myFunction() { 
// Display the current position of the video in a <p> element with id="demo" 
    document.getElementById("demo").innerHTML = vid.currentTime; 
}