Morton 20 de marzo de 2015 a las 15.23
   Imprimir artículo
elWebmaster.com

C贸mo obtener y configurar la duraci贸n de videos en HTML5.


html5logowideSeguramente m谩s de uno, al trabajar con videos en HTML5, se encontr贸 con la necesidad de lidiar con sus tiempos y duraci贸n. Aqu铆 te compartimos algunos trucos para que puedas manejarlo sin problemas.

Los elementos de video tienen una propiedad duration聽que representa el n煤mero de segundos. Para mostrar la duraci贸n, necesitas usar parseInt聽y el m贸dulo (%):

var i = setInterval(function() {
	if(video.readyState > 0) {
		var minutes = parseInt(video.duration / 60, 10);
		var seconds = video.duration % 60;

		clearInterval(i);
	}
}, 200);

Es importante usar setInterval聽y chequear el readyState聽del video, en caso de que no haya sido cargado al momento de intentar obtener la duraci贸n. parseInt聽es usado para obtener el n煤mero de minuto y el m贸dulo para obtener la cuenta en segundos.

 

A la hora de obtener y configurar la duraci贸n de un video, lo primero y m谩s importante es conocer que el atributo m谩s importante en este escenario es currentTime.

Puedes utilizar currentTime para obtener el tiempo actual del video, con el siguiente c贸digo:

// https://www.youtube.com/watch?v=Cwkej79U3ek
console.log(video.currentTime);  // 25.431747

currentTime聽act煤a como getter y como setter, por lo que puedes mover el video alterando el valor de currentTime:

video.currentTime = 0; // Restart

La API es lo suficientemente sencilla y la propiedad es bastante auto-explicativa. De todas formas, sigues necesitando hacer las cuentas en segundos para interpretar el tiempo, tanto hacia adelante como hacia atr谩s.

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder