Tiempo total de un vídeo HTML5

02/Feb/2012 HTML5 , 7 Comentarios
Ejemplos de Artículos sobre HTML5

Cuando cargamos un vídeo en HTML5 puede ser interesante el conocer el tiempo total de la duración del vídeo. El elemento HTMLMediaElement nos permite consultar esta información.

Para poder consultar el tiempo total de un vídeo utilizaremos el atributo duration del HTMLMediaElement.

var v = document.getElementById("mivideo");
document.write(v.duration);

Ahora, que cuando ejecutemos este código nos llevaremos una sorpresa y es que, el atributo duration, no nos devolverá ningún valor. Esto es debido a que la información del tiempo total de un vídeo no es cargada hasta que tenemos la información de los metadatos del vídeo.

Y, ¿cuándo tenemos los metadatos del vídeo? Para ello tenemos el evento loadeddata. Así que tendremos que poner un listener sobre dicho evento en el elemento video. En este caso utilizaremos el método .addEventListener() para llevar a cabo dicha tarea.

var v = document.getElementById("mivideo");
v.addEventListener("loadeddata",function(ev){
   ...
},true);

Será dentro del listener dónde codifiquemos el acceso al campo duration del HTMLMediaElement para obtener el tiempo total de un vídeo HTML5.

var v = document.getElementById("mivideo");
v.addEventListener("loadeddata",function(ev){
   document.getElementById("tiempototal").innerHTML = v.duration;		
},true);

Tiempototal es una capa de nuestra página HTML5 sobre la que volcaremos el resultado.

Vídeos sobre HTML5


7 comentarios en “Tiempo total de un vídeo HTML5”

Víctor Cuervo

jose

Saludos amigos, como haria para captar el segundo donde se dejo de ver el video??

Víctor Cuervo

Víctor Cuervo

Buenas Jose,

Tienes el atributo .currentTime el cual puedas ir monitorizando según vaya avanzando el vídeo para saber por dónde va y capturarlo si el usuario lo para o se va de la página.

Saludos.

Víctor Cuervo

César

Buenísimo!! Gracias por la excelente explicación!!

Víctor Cuervo

Víctor Cuervo

@Cesar, Me alegro que te haya gustado. :-D

Víctor Cuervo

neomada

Me intereso por el tag «canvas», concretamente por la posibilidad de superponer gráficos sobre un video, y si esos gráficos responden a eventos como pudiera ser un clic de ratón.
Gracias.

Víctor Cuervo

Víctor Cuervo

@keyvin2012,
Ya lo hemos incluido en nuestro artículo http://lineadecodigo.com/javascript/convertir-segundos-en-formato-hora-con-javascript/

Ya nos contarás qué tal te quedó el codigo. :-D

Víctor Cuervo

keyvin2012

Muchas gracias amigo me sirvio de mucho ahora me toca convertirlo de segundos a minutos y hora y listo :D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*