Tiempo total de un vídeo 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.

Publicaciones relacionadas:

Iniciar automáticamente un vídeo en HTML5 Controlar un error de carga de un vídeo en HTML5 Tiempo visualizado del vídeo en HTML5 Exportar el contenido de un Canvas HTML5 a una imagen Vídeo a Pantalla Completa