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.
[SWF]http://blog.unijimpe.net/wp-content/uploads/2008/02/flvplayer.swf, 400, 350[/SWF]
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.
[as]
var netConex:NetConnection;
var netStrea:NetStream;
netConex = new NetConnection();
netConex.connect(null);
netStrea = new NetStream(netConex);
netVideo.attachVideo(netStrea);
netStrea.play(«video.flv»);
[/as]
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.
[as]
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;
}
[/as]
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.
[as]
btPlay.onRelease = function() {
netStrea.pause(false);
btPlay._visible = false;
}
btPause.onRelease = function() {
netStrea.pause(true);
btPlay._visible = true;
}
[/as]
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.
Comentarios Total 23 comentarios
Publicado: 18/02/2008 12:23 am
[…] “unijimpe” encuentro este muy util tutorial que muestra como crear un video player en flash, el […]
Publicado: 19/02/2008 1:12 am
hola
se podria agregar la funcion, maximizar pantalla y reproducir videos de youtube.
?
Publicado: 20/03/2008 2:39 pm
Como le ago para darle next o siguente video en la msima ventana? lo e logradro con varias plantiyas del mismo docimento. ;)
Publicado: 03/06/2008 4:10 pm
una pregunta como hacer para reproducir un video q esta subido en youtube.com… utilizando el reproductor en flash!…
Publicado: 19/07/2008 4:10 am
Se puede hacer con varios videos? Cómo habría que modificar el código? Podrías subir un tuto…
Publicado: 19/07/2008 4:18 am
podrias subir un tuto igual pero con varios videos? Cómo sería el código modificado.?
Publicado: 07/08/2008 10:27 pm
muy BIEN!!!!!!!!!!!
Publicado: 08/08/2008 12:05 pm
Alguien me puede ayudar conel codigo para un boton de stop y rewind, soy nuevo en esto del AS y quisiera aprender este tipo de reproduccion de videos
Publicado: 11/08/2008 8:44 am
Muy player!!!! Extraordinario!!
Publicado: 03/10/2008 6:55 pm
Muy bueno el tutorial, ahora bien yo necesito colocar un vídeo live en un repro creado por mi y no el predeterminado por el sitio del streaming, que debo hacer?? para cualquier ayuda les dejo esta dirección solofijos@hotmail.com gracias de antemano..
Publicado: 29/10/2008 4:37 am
que tal, el tutorial es buenisimo,yo ya lo he currado para descargar diferentes videos en el mismo reproductor
http://www.juan-moreno.com/video
lo que echo de menos es un control de sonido, si se te ocurre algo
saludos
ers un crac
Publicado: 27/11/2008 8:55 am
Genial, hace tiempo que quería hacer un reproductor en flash actionscript y con este gran tutorial por fin lo he logrado.
Funciona muy bieeeeennnnnn.
Muchas gracias.
Publicado: 17/01/2009 8:25 pm
Olá, alguém sabe me dizer como posso colocar uma ação após o termino do vídeo? algo como um «gotoandPlay»…
Publicado: 07/05/2009 9:15 am
Recien descubro el blog, lo agrego a favoritos, gracias por compartir!
Publicado: 15/08/2009 10:44 pm
Como puedo seleccionar una parte de la barra de progreso y que el video vaya a esa posicion?
Publicado: 24/09/2009 4:24 pm
Por favor pone un codigo para reiniciar el video
Publicado: 28/12/2009 6:24 pm
Agrandar y Archicar ?
Publicado: 23/02/2010 3:02 pm
Como se le puede hacer para una mejor calidad? por que subo el video y se ve mal , pero solo se ve bien, saludos,
Publicado: 26/02/2010 9:29 am
Eres un MAESTRO!! eh buscado durante años este tutorial, nunca tan bien explicado y funciona MUY BIEN!.Muchas gracias!
Publicado: 09/04/2010 7:57 am
Hola! genial, la verdad!! una cosa, como puedo hacer para que cuando cargue la pagina el estado del vídeo sea en pause, soy un poco novato en el tema, muchísimas gracias
Publicado: 05/07/2010 10:26 pm
Muy buen tutorial..la web muy buena
Publicado: 25/01/2011 2:35 pm
excelente tutorial… me parecia algo mas complejo… pero aqui esta muy simple y funciona a la perfección…
muchas gracias!!
saludos
Publicado: 13/03/2012 7:46 am
Hola.
Con el ejemplo no puedo ver el FLV pero si escucho el audio, qué será???
lo pruebo de forma local con el el FLV en el servidor!!!