
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.
jose
Saludos amigos, como haria para captar el segundo donde se dejo de ver el video??
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.
César
Buenísimo!! Gracias por la excelente explicación!!
Víctor Cuervo
@Cesar, Me alegro que te haya gustado. :-D
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
@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
keyvin2012
Muchas gracias amigo me sirvio de mucho ahora me toca convertirlo de segundos a minutos y hora y listo :D