Artículos
HTML5

Tiempo total de un vídeo HTML5

02/Feb/2012

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

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
7 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios