FLV Player en AS2

17/02/2008
10:03 pm
unijimpe

Flash Video (FLV) es uno de los formatos mas difundidos para mostrar vídeos en Internet, en esta ocasión les presentamos un Reproductor de FLV creado íntegramente con ActionScript 2. Para ello haremos uso de la clase NetConnection y NetStream que nos permitirán reproducir vídeos en formato flv.

Cargando Flash

Reproduciendo FLVs
Para crear un reproductor, lo primero es colocar un objeto Video en nuestra película para poder mostrar el vídeo, esto lo hacemos haciendo click en la parte superior derecha del panel Librery y seleccionar New Video, esto adjuntará a la librería un objeto Video que luego colocaremos en el stage de nuestra película flash y lo llamamos netVideo.

Luego haremos uso de la clase NetConnection que nos servirá para conectarnos con la fuente donde se encuentra el archivo con el vídeo. Luego utilizaremos la clase NetStream que nos permitirá manipular la reproducción del vídeo.

var netConex:NetConnection;
var netStrea:NetStream;
netConex = new NetConnection();
netConex.connect(null);
netStrea = new NetStream(netConex);
netVideo.attachVideo(netStrea);
netStrea.play("video.flv");

Como se observa, primero creamos las variables a utilizar, inicializamos los objetos, luego adjuntamos al objeto de vídeo netVideo el vídeo que obtenemos con netStrea, finalmente reproducimos el archivo video.flv. Hasta este punto ya podemos visualizar un video cargado dinámicamente.

Agregando indicadores de Progreso
Lo siguiente es agregar los elementos que nos muestren el progreso de descarga y reproducción del vídeo. Para ellos creamos un movieclip llamado mcTime para indicar el progreso de la reproducción, un movieclip llamado mcLoad para indicar el progreso de la descarga del vídeo y un campo de texto txtTimer para mostrar el tiempo de reproducción.

Antes de empezar a realizar los cálculos, necesitamos obtener el valor del tiempo de duración del vídeo, para ello obtenemos el tiempo detectando la MetaData del vídeo.

var netConex:NetConnection;
var netStrea:NetStream;
var total:Number = 1;
var w:Number = mcTime._width;
netConex = new NetConnection();
netConex.connect(null);
netStrea = new NetStream(netConex);
netVideo.attachVideo(netStrea);
netStrea.play("http://samples.unijimpe.net/video.flv");
netStrea.onMetaData = function(info:Object) {
total = info.duration;
mcTime.onEnterFrame = iniProgress;
};
function iniProgress() {
txtTimer.text = seg2min(netStrea.time)+" / "+seg2min(total);
mcTime._width = w*(netStrea.time/total);
mcLoad._width = w*(netStrea.bytesLoaded/netStrea.bytesTotal);
}
function seg2min(num:Number) {
var min:Number = Math.floor(num/60);
var seg = Math.floor(num%60);
if (seg <10) {
seg = "0"+seg;
}
return min+":"+seg;
}

Nótese que hemos utilizado una función llamada seg2min que se encarga de formatear el tiempo de segundos a minutos.

Agregando controles de Reproducción
El ultimo paso es agregar controles de reproducción, para ello agregamos dos botones llamados btPlay y btPause el cual llama al método pause de la clase NetStream de la siguiente forma.

btPlay.onRelease = function() {
netStrea.pause(false);
btPlay._visible = false;
}
btPause.onRelease = function() {
netStrea.pause(true);
btPlay._visible = true;
}

Con lo cual concluimos nuestro reproductor de vídeos, obviamente se puede agregar mas controles como mute/unmute, control para saltar a cualquier tiempo de la reproducción que lo pueden hacer como practicando.