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.
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.
Posts Relacionados
Comentarios Total 17 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 ?