FLV Player en AS2

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.

  1. var netConex:NetConnection;
  2. var netStrea:NetStream;
  3.  
  4. netConex = new NetConnection();
  5. netConex.connect(null);
  6. netStrea = new NetStream(netConex);
  7.  
  8. netVideo.attachVideo(netStrea);
  9. 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.

  1. var netConex:NetConnection;
  2. var netStrea:NetStream;
  3. var total:Number = 1;
  4. var w:Number = mcTime._width;
  5.  
  6. netConex = new NetConnection();
  7. netConex.connect(null);
  8. netStrea = new NetStream(netConex);
  9. netVideo.attachVideo(netStrea);
  10.  
  11. netStrea.play("http://samples.unijimpe.net/video.flv");
  12. netStrea.onMetaData = function(info:Object) {
  13.     total = info.duration;
  14.     mcTime.onEnterFrame = iniProgress;
  15. };
  16.  
  17. function iniProgress() {
  18.     txtTimer.text = seg2min(netStrea.time)+" / "+seg2min(total);
  19.     mcTime._width = w*(netStrea.time/total);
  20.     mcLoad._width = w*(netStrea.bytesLoaded/netStrea.bytesTotal);
  21. }
  22. function seg2min(num:Number) {
  23.     var min:Number = Math.floor(num/60);
  24.     var seg = Math.floor(num%60);
  25.     if (seg < 10) {
  26.         seg = "0"+seg;
  27.     }
  28.     return min+":"+seg;
  29. }
  30. &#91;/as&#93;
  31.  
  32. Nótese que hemos utilizado una función llamada seg2min que se encarga de formatear el tiempo de segundos a minutos.
  33.  
  34. <strong>Agregando controles de Reproducción</strong>
  35. 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.
  36.  
  37. [as]
  38. btPlay.onRelease = function() {
  39.     netStrea.pause(false);
  40.     btPlay._visible = false;
  41. }
  42. btPause.onRelease = function() {
  43.     netStrea.pause(true);
  44.     btPlay._visible = true;
  45. }

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



[…] “unijimpe” encuentro este muy util tutorial que muestra como crear un video player en flash, el […]

azul
Publicado: 19/02/2008 1:12 am

hola

se podria agregar la funcion, maximizar pantalla y reproducir videos de youtube.

?

herve
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. ;)

maxi
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!…

ele
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…

ele
Publicado: 19/07/2008 4:18 am

podrias subir un tuto igual pero con varios videos? Cómo sería el código modificado.?

Jesus
Publicado: 07/08/2008 10:27 pm

muy BIEN!!!!!!!!!!!

JC
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

David
Publicado: 11/08/2008 8:44 am

Muy player!!!! Extraordinario!!

felix
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..

juan moreno
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

Richi
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.

Fabio Alexis
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”…

nou
Publicado: 07/05/2009 9:15 am

Recien descubro el blog, lo agrego a favoritos, gracias por compartir!

grafica
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?

Bloggeros Anonimos (B.A)
Publicado: 24/09/2009 4:24 pm

Por favor pone un codigo para reiniciar el video

darkrayo
Publicado: 28/12/2009 6:24 pm

Agrandar y Archicar ?

Roberto
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,

Leandro Emilio Sanchez
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!

Francisco
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

Cristobal
Publicado: 05/07/2010 10:26 pm

Muy buen tutorial..la web muy buena

fiction
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

Victor
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!!!

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)