jueves, 2 de febrero de 2012

Tiempo de un vídeo con HTML5

Podemos consultar el tiempo total de un vídeo utilizando el atributo duration del HTMLMediaElement.
var fvideo = document.getElementById("miVideo");
document.write(fvideo.duration);

En este caso 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.

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 fvideo = document.getElementById("miVideo");
fvideo.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 fvideo = document.getElementById("miVideo");
fvideo.addEventListener("loadeddata",function(ev){
       document.getElementById("tiempoTotal").innerHTML = fvideo.duration;
},true);

un saludo