Componente FLVPlayback

Publicado por Carla Macías
13 Junio, 2008

FlashEn esta entrada aprenderemos a usar el componente FLVPlayback que viene dentro de Flash Professional. El componente FLVPlayback nos permite cargar videos en formato FLV usando alguno de los skins que vienen predeterminados en Flash, ahorrándonos el tiempo de crear un reproductor. Veremos algunos de los eventos que soporta este componente y cómo crear una lista de videos.

Para este ejemplo usaremos Flash 8. El resultado final y el archivo para descargar los encontrarás al final de este post. Los pasos son los siguientes:

Tutorial

1. Crea un nuevo documento de Flash de 250 x 350 pixeles.

2. Ponle un color de fondo al documento, en este caso el color de fondo que usé es #26251E

3. A la única capa que existe ponle el nombre de Player. Abre el Panel de Componentes (Window -> Components ó Ctrl. + F7). En este panel hay un apartado que se llama FLVPlayback - Player 8; selecciona el componente FLVPlayback y arrástralo al escenario.

4. Selecciona el componente que acabas de arrastrar y ponle las siguientes propiedades:

- Nombre de Instancia: player
- Width (Ancho): 176.0
- Height (Alto): 120.0

5. Haz click en la pestaña de Parámetros y verifica que los valores sean los siguientes:

- autoPlay = true. Si queremos que inicie el video automáticamente (true) o si para comenzar el video el usuario deberá hacer click en el botón de play (false)
- contentPath = Ojo: Aquí debe estar vacío ya que vamos a establecer la ruta del video por medio de ActionScript. Si a ti no te interesa que sea por medio de ActionScript (ya sea, por ejemplo, que sólo quieres mostrar un video) bastará con que en este campo pongas la ruta donde se encuentra el video (Ej. videos/video_1.flv)
- skin: Aquí deberás escoger el skin que más te agrade de acuerdo a la lista que se presenta en el combobox. En mi caso seleccioné el skin MojaveExternalPlaySeekMute.swf . Observa que, una vez que hayas seleccionado el skin y hayas ejecutado el Flash (Ctrl. + Enter) se creará el archivo MojaveExternalPlaySeekMute.swf en la carpeta donde tienes tu archivo de Flash. Es muy importante que no olvides subir este archivo a tu servidor ya que los controles del reproductor no se verá (El video sí aparecerá pero no podrás pausarlo, adelantarlo, regresarle o cambiarle el volumen).
- skinAutoHide: Si pones el valor de true los controles (skin) no se verán hasta que el usuario ponga el ratón encima del video.
- volume: Aquí puedes establecer el valor del volumen del video que querrás que tenga desde un inicio.

6. Consigue unos cuatro o cinco videos en formato FLV para seguir con el tutorial. Si tienes un video muy largo (por ejemplo un concierto que está en un sólo archivo) puedes usar algún programa para convertir de video a FLV. Yo te recomiendo el programa "Allok Video to FLV Converter", el cual puedes adquirirlo de aquí. Con este software podrás seleccionar el segmento del video que quieres exportar a archivo FLV (Para este ejemplo, todos mis videos tienen una duración de dos minutos). Dentro de las bondades de este programa está el que no solo puedes generar el archivo FLV si no también puedes generar un archivo SWF con el video. Además, podrás seleccionar la resolución del video, el framerate, calidad del video, calidad del audio, etc.

7. Crea una carpeta llamada videos y guarda ahí tus videos FLV.

8. Crea dos textos dinámicos en el escenario y ponles como nombre de instancia artista_txt y cancion_txt, respectivamente.

9. Dada la cantidad de videos FLV que vas a usar para este ejercicio, crea la misma cantidad de botones. En mi ejemplo son 4 videos los que voy a usar y por lo tanto tengo cuatro botones en el escenario (estos botones nos permitirá seleccionar el número de video que queremos reproducir). A cada uno asígnale de nombre de instancia opcion1_btn, opcion2_btn y así sucesivamente.

10. Es momento de comenzar con el código. Crea una nueva capa y ponle de nombre Acciones.

Primero vamos a crear las variables que necesitaremos en nuestro código:

Texto Plano
Actionscript:
  1. /* Creamos un arreglo con el nombre de los archivos de nuestros videos. Estos nombres también puedes ponerlos en un archivo XML para que sea más fácil de actualizar */
  2. var videos:Array = ["video1.flv", "video2.flv", "video3.flv", "video4.flv"];
  3. /* Creamos un arreglo con el nombre que queremos que aparezca cuando se está reproduciendo un video */
  4. var canciones:Array = ["El estanque", "Fuente Esperanza", "Héroe de Leyenda", "No más lágrimas"];
  5. /* Necesitamos un contador para poder movernos y recorrer los elementos de nuestros arreglos. En este caso el valor inicial del contador es cero ya que todos los índices de un arreglo comienzan con cero */
  6. var contador:Number = 0;
  7. /* Definimos dentro esta variable el nombre de la carpeta donde estarán nuestros videos. Es bueno ponerlo en una variable aparte y no dentro del mismo nombre de los archivos (Ej. videos/video2.flv) por si en algún momento necesitamos renombrar la carpeta */
  8. var carpeta:String = "videos/";
  9. /* Como en mi ejemplo todos los videos son del grupo Héroes del Silencio, solo requiero de una variable de tipo String (texto). Si en tu caso los videos son de distintos artistas/grupos, podrás crear un arreglo con estos nombres */
  10. var artista:String = "Héroes del Silencio";

Posteriormente le indicamos al reproductor la ruta del video que queremos que reproduzca.

Texto Plano
Actionscript:
  1. /* Establecemos la ruta del video que cargará nuestro reproductor (recuerda que el nombre de instancia de nuestro FLVPlayback es player). Como es la primera vez que se reproducirá un video, el valor de contador es cero y por lo tanto cargará el video video1.flv */
  2. player.contentPath = carpeta + videos[contador];

Creamos dos listeners para saber cuando el video se acabó (complete) y cuando se está reproduciendo (playing). Existen mucho más eventos de este componente que puedes usar, para la lista completa visita esta página.

Texto Plano
Actionscript:
  1. /* En este caso, cuando un video haya acabado de reproducirse, se llamará a la función muestraVideo; cuando un video esté reproduciéndose, se llamará a la función videoActual. */
  2. player.addEventListener("complete", muestraVideo);
  3. player.addEventListener("playing", videoActual);

Ahora establecemos el código de cada uno de nuestros métodos que serán usados por los listeners.

La función muestraVideo se llama cuando se haya completado la reproducción de un video. En este caso queremos cambiar de video, por lo que le pasamos como parámetro el valor de -1 a la función cambiaVideo para que la función sepa que debe pasar a la siguiente función (Más adelante veremos el código de esta función)

Texto Plano
Actionscript:
  1. function muestraVideo(eventObject:Object):Void {
  2.      cambiaVideo(-1);
  3. }

La función videoActual se llama cuando un video se está reproduciendo. Para este ejercicio queremos que una vez que empiece a reproducirse el video se muestren los datos de éste. En este caso mostraremos en el campo de texto cancion_txt el nombre de la canción; en el campo artista_txt el nombre del artista, hacemos una llamada a la función habilitaBotones para habilitar todos los botones con los que cambiamos de video y posteriormente deshabilitamos el botón del video que se va a reproducir (de acuerdo al valor del contador y le cambiamos el valor de su propiedad de transparencia - alpha - a 50 para que se note una diferencia con respecto a los demás botones).

Texto Plano
Actionscript:
  1. function videoActual(eventObject:Object):Void {
  2.      cancion_txt.text = canciones[contador];
  3.      artista_txt.text = artista;
  4.      habilitaBotones();
  5.      eval("opcion" + (contador + 1) + "_btn")._alpha = 50;
  6.      eval("opcion" + (contador + 1) + "_btn").enabled = false;
  7. }

La siguiente función (cambiaVideo) es la que se dedicará a cambiar el video de acuerdo a dos cosas:
1. El botón que hayamos seleccionado para cambiar de video.
2. Pasar al siguiente video cuando se acabó la reproducción del video actual
Para el primer caso pasaremos como parámetro el número de video que se deberá reproducir dependiendo del botón al que se le hizo click. En el segundo caso se le pasará como parámetro el valor de -1 para que la función sepa que se deberá pasar a la siguiente función.

Texto Plano
Actionscript:
  1. function cambiaVideo(numero:Number):Void {
  2.      cancion_txt.text = "Cargando video..."; /* Mostramos el texto de cargando video... */
  3.      if(numero == -1) { // Esto es, si debemos pasar a la siguiente canción
  4.           if(contador == videos.length - 1) /* Revisamos si el valor de contador es igual a la longitud de nuestro arreglo "videos" MENOS uno. ¿Por qué menos uno? Porque el índice de un arreglo comienza en cero, por lo tanto para nuestros cuatro videos el valor de contador será 0, 1, 2 ó 3. La propiedad "length" de un arreglo nos regresa el número de elementos que tiene el arreglo, en este caso es 4; por lo tanto el valor máximo que podrá tomar la variable contador es de 3 */
  5.                contador = 0; /* Como ya llegamos a ese máximo, reiniciamos el contador en cero */
  6.           else /* Si la variable "contador" no ha llegado a su valor máximo, aumentamos el valor de contador en uno */
  7.                contador++;
  8.      }
  9.      else /* Si numero != -1, es decir, si se le pasó a la función un valor distinto a -1 quiere decir que se le dió click a uno de los botones para seleccionar el video a reproducir */
  10.           contador = numero; /* En este caso le asignamos a la variable contador el número que recibimos como parámetro el cual indica el número de video que debemos reproducir */
  11.      player.contentPath = carpeta + videos[contador]; /* Le indicamos al reproductor la ruta del video que queremos reproducir */
  12. }

Como su nombre lo indica, la función habilitaBotones habilita todos nuestros botones (enabled = true) para que se les pueda hacer click y establecer con 100 el valor de su propiedad _alpha (es decir, que no tenga transparencia).

Texto Plano
Actionscript:
  1. function habilitaBotones() {
  2.      opcion1_btn._alpha = 100;
  3.      opcion2_btn._alpha = 100;
  4.      opcion3_btn._alpha = 100;
  5.      opcion4_btn._alpha = 100;
  6.  
  7.      opcion1_btn.enabled = true;
  8.      opcion2_btn.enabled = true;
  9.      opcion3_btn.enabled = true;
  10.      opcion4_btn.enabled = true;
  11. }

Por último, ponemos el código de cada uno de los botones que cambiarán el video. En este caso, el primer botón (opcion1_btn) hará que se muestre el primer video; y así sucesivamente.

Texto Plano
Actionscript:
  1. opcion1_btn.onRelease = function() {
  2.      cambiaVideo(0);
  3. }
  4.  
  5. opcion2_btn.onRelease = function() {
  6.      cambiaVideo(1);
  7. }
  8.  
  9. opcion3_btn.onRelease = function() {
  10.      cambiaVideo(2);
  11. }
  12.  
  13. opcion4_btn.onRelease = function() {
  14.      cambiaVideo(3);
  15. }

Va de nuevo, todo el código completo:

Texto Plano
Actionscript:
  1. var videos:Array = ["video1.flv", "video2.flv", "video3.flv", "video4.flv"];
  2. var canciones:Array = ["El estanque", "Fuente Esperanza", "Héroe de Leyenda", "No más lágrimas"];
  3. var contador:Number = 0;
  4. var carpeta:String = "videos/";
  5. var artista:String = "Héroes del Silencio";
  6.  
  7. player.contentPath = carpeta + videos[contador];
  8. player.addEventListener("complete", muestraVideo);
  9. player.addEventListener("playing", videoActual);
  10.  
  11. function muestraVideo(eventObject:Object):Void {
  12.      cambiaVideo(-1);
  13. }
  14. function videoActual(eventObject:Object):Void {
  15.      cancion_txt.text = canciones[contador];
  16.      artista_txt.text = artista;
  17.      habilitaBotones();
  18.      eval("opcion" + (contador + 1) + "_btn")._alpha = 50;
  19.      eval("opcion" + (contador + 1) + "_btn").enabled = false;
  20. }
  21. function cambiaVideo(numero:Number):Void {
  22.      cancion_txt.text = "Cargando video...";
  23.      if(numero == -1) {
  24.           if(contador == videos.length - 1)
  25.                contador = 0;
  26.           else
  27.                contador++;
  28.      }
  29.      else
  30.           contador = numero;
  31.      player.contentPath = carpeta + videos[contador];
  32. }
  33.  
  34. function habilitaBotones() {
  35.      opcion1_btn._alpha = 100;
  36.      opcion2_btn._alpha = 100;
  37.      opcion3_btn._alpha = 100;
  38.      opcion4_btn._alpha = 100;
  39.  
  40.      opcion1_btn.enabled = true;
  41.      opcion2_btn.enabled = true;
  42.      opcion3_btn.enabled = true;
  43.      opcion4_btn.enabled = true;
  44. }
  45.  
  46. opcion1_btn.onRelease = function() {
  47.      cambiaVideo(0);
  48. }
  49.  
  50. opcion2_btn.onRelease = function() {
  51.      cambiaVideo(1);
  52. }
  53.  
  54. opcion3_btn.onRelease = function() {
  55.      cambiaVideo(2);
  56. }
  57.  
  58. opcion4_btn.onRelease = function() {
  59.      cambiaVideo(3);
  60. }

Guarda el documento y córrelo (Ctrl. + Enter). Verás que el mensaje inicial en el campo cancion_txt es "Cargando video..." y una vez que comienza la reproducción, el mensaje cambia al nombre de la canción. Cuando haces click en alguno de los cuatro botones para cambiar el video, el campo cancion_txt vuelve a mostrar el mensaje de "Cargando video..." hasta que comienza la reproducción de este nuevo video.

Hemos llegado al final del tutorial, no olvides bajar los archivos y ver el archivo de ejemplo que está a continuación.


Este archivo requiere Flash Player 8
Descargar Archivo
Tags: , ,
Flash

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Comentario por luis el Noviembre 8, 2008 @ 4:18 pm

excelente tuto amiga, crees que se pueda colocar un cargador ??

  Comentario por Carla Macías el Noviembre 11, 2008 @ 11:10 am

Hola Luis,

¿Un cargador para todo el Flash? El FLVPlayback tiene su propio cargador que se muestra mientras se carga el video (valga la redundancia).

Saludos.

  Comentario por Diego el Diciembre 12, 2008 @ 1:23 pm

Buenas tardes.
Estimada Carla.

Tengo un problema con Flash y ActionScript y he visto que tu tienes muy buena experiencia.

La consulta es la siguiente:

Es posible en Flash por medio de actionscript, cargar un video streaming.

Tenemos un sistema de Informacion dinamica.
Este sistema se carga de contenidos leyendo de una base de datos por medio de XML.

La pregunta es la siguiente, yo puedo cargar en el Flash una direccion URL que sea por ejemplo: un video de youtube.
La idea es guardar ese link en base de datos y que el Flash cargue el link y lo pueda reproducir.

Muchas gracias por tu ayuda.

Un saludo,
Diego.

  Comentario por Carla Macías el Diciembre 12, 2008 @ 4:03 pm

Hola Diego,

Si lo que quieres es mostrar un video de YouTube dentro de un archivo de Flash, tendrías que cargarlo por medio de loadMovie. Tomando como base el comentario de este foro, tu código quedaría similar a lo siguiente:

Texto Plano
Actionscript:
  1. var video_url:String = "http://www.youtube.com/v/lcBzupr-788";
  2. this.createEmptyMovieClip("clipo_mc", 999);
  3. clipo_mc.loadMovie(video_url);
  4.  
  5. var mc:MovieClip = _root.createEmptyMovieClip("mc", 1000);
  6. mc.onEnterFrame = function()
  7. {
  8.     if(clipo_mc._width> 0 && clipo_mc._height> 0)
  9.     {
  10.         clipo_mc._width = 5000;
  11.         clipo_mc._height = 2532;
  12.         clipo_mc._x = 100;
  13.         clipo_mc._y = 100;
  14.         this.removeMovieClip();
  15.     }
  16. }

El valor de la variable video_url deberás cambiarlo por el URL que esté guardado en tu base de datos. Ten en cuenta que para evitar el problema de "Violación de la seguridad Sandbox" deberás correr el SWF desde un HTML.

Si tienes los videos en formato FLV y van a ser subidos desde un administrador o por medio de FTP, podrías simplemente poner en la base de datos la URL relativa al video, y cargar éste desde el componente FLVPlayback utilizando la propiedad contentPath del componente.

Otra solución podría ser descargar algún player gratuito en Flash o bien desarrollar el tuyo de acuerdo a tus necesidades. De esta forma simplemente tendrías que modificar el tamaño del player y establecerle el URL del video .flv.

Saludos.

  Comentario por Nestor A el Diciembre 21, 2008 @ 4:01 pm

HOla! bien por el codigo, pero una pregunta.... tengo por decir algo un XML de esta forma:

"hez_actions.flv"

entonces la idea es hacer lo mismo q hiciste con el contentPath, que lo igualaste al *.flv, mi objetivo es que me tome el XML en el contentPath.. para luego actualizar d manera mas facil.
Agradezco si nos Posteas un ejemplito en action script
Gracias

  Comentario por Nestor A el Diciembre 21, 2008 @ 4:02 pm

.
.
."hez_actions.flv"
.
.

asi esta el xml

  Comentario por Carla Macías el Diciembre 21, 2008 @ 4:07 pm

Hola Nestor,

Por favor pon el código entre los tags:
[ xml] y [ /xml] (sin el espacio).

Saludos.

  Comentario por Nestor el Diciembre 24, 2008 @ 4:03 pm
Texto Plano
XML:
  1. hez_actions.flv

ahora sip

  Comentario por Nestor el Diciembre 24, 2008 @ 4:04 pm

ashhh no se como escribirlo, se me pierde cuando lo envio

  Comentario por Carla Macías el Diciembre 27, 2008 @ 9:59 pm

Hola Néstor,

Si quieres puedes subir tu xml a un servidor (propio, megaupload o rapidshare).

Saludos.

  Comentario por gus el Enero 8, 2009 @ 9:04 am

perdon por mi ignorancia, la carga es mediante STREAMING???

  Comentario por Carla Macías el Enero 9, 2009 @ 12:34 am

Hola Gus,

Así es, el video se va almacenando en el buffer mientras se va reproduciendo; es decir, no se tiene que descargar por completo antes de reproducirse.

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 10:56 am

Hola Carla, te saluda Christian de Honduras C.A., soy nuevo en esto del flash y puse este tuto en practica y mientras lo uso en mi computadora carga bien los videos, pero cuando lo subo a la red en una pagina que estoy elaborando no carga los videos.
Hay que agregar algo adicional al action script para subirlo?

Trabajo con flash CS4 pero la publicacion la hago con as2.0 y flash player 9, los videos estan codificados como .f4v

Te agradezco de antemano tu ayuda.

  Comentario por Carla Macías el Enero 15, 2009 @ 11:04 am

Hola Christian,

Revisa que tanto el skin del FLVPlayback (que es un archivo .swf que te genera el Flash dentro de la misma carpeta que tu archivo principal) como el video los hayas subido al servidor y en el directorio correcto.

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 11:24 am

Gracias Carla por tu respuesta, efectivamente tengo todos los archivos relacionados con el player ubicados en la misma carpeta tal y como lo tengo en mi carpeta de publicacion en mi computadora, cuando abro mi pagina carga el player pero no los videos, afecta la version del flash player con el que publico que es flash9?

este es el enlace de mi pagina: videoproduccioneshn.com el enlace para videos esta en demostraciones del menu superior

  Comentario por Carla Macías el Enero 15, 2009 @ 11:32 am

Hola Christian,

No creo que afecte, ¿corriendo tu HTML en el navegador de forma local se muestra el video?
¿Me puedes enviar la liga del video? quiero probar algo...

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 11:36 am

Corriendo de forma local si carga los videos y carga bien todos los videos y cumple bien las funciones en los botones y demas, solo es al publicarlo, perdon, a que te refieres con liga del video?

  Comentario por Christian el Enero 15, 2009 @ 11:47 am

Si te refieres al AS este es:

var videos:Array = ["video1.f4v", "video2.f4v", "video3.f4v", "video4.f4v", "video5.f4v", "video6.f4v"];
var canciones:Array = ["Recopilación 2008", "Video Clip Hablo Español", "Comercial Barena", "Cápsula San Pedro Sula", "Cápsula Agua Pura", "Cápsula Siguatepeque"];
var contador:Number = 0;
var carpeta:String = "videos/";
var artista:Array = ["VideoProducciones", "Polache", "Cerveza Barena", "Coca Cola", "Dasani", "Coca Cola"];
var contador:Number = 0;
var carpeta:String = "videos/";

player.contentPath = carpeta + videos[contador];
player.addEventListener("complete", muestraVideo);
player.addEventListener("playing", videoActual);

function muestraVideo(eventObject:Object):Void {
cambiaVideo(-1);
}
function videoActual(eventObject:Object):Void {
cancion_txt.text = canciones[contador];
artista_txt.text = artista[contador];
habilitaBotones();
eval("opcion" + (contador + 1) + "_btn")._alpha = 50;
eval("opcion" + (contador + 1) + "_btn").enabled = false;
}
function cambiaVideo(numero:Number):Void {
cancion_txt.text = "Cargando video...";
if(numero == -1) {
if(contador == videos.length - 1)
contador = 0;
else
contador++;
}
else
contador = numero;
player.contentPath = carpeta + videos[contador];
}

function habilitaBotones() {
opcion1_btn._alpha = 100;
opcion2_btn._alpha = 100;
opcion3_btn._alpha = 100;
opcion4_btn._alpha = 100;
opcion5_btn._alpha = 100;
opcion6_btn._alpha = 100;

opcion1_btn.enabled = true;
opcion2_btn.enabled = true;
opcion3_btn.enabled = true;
opcion4_btn.enabled = true;
opcion5_btn.enabled = true;
opcion6_btn.enabled = true;
}

opcion1_btn.onRelease = function() {
cambiaVideo(0);
}

opcion2_btn.onRelease = function() {
cambiaVideo(1);
}

opcion3_btn.onRelease = function() {
cambiaVideo(2);
}

opcion4_btn.onRelease = function() {
cambiaVideo(3);
}

opcion5_btn.onRelease = function() {
cambiaVideo(4);
}

opcion6_btn.onRelease = function() {
cambiaVideo(5);
}

  Comentario por Carla Macías el Enero 15, 2009 @ 11:55 am

Hola Christian,

Viendo tu código entendería que la liga completa a tu primer video sería http://videoproduccioneshn.com/video1.f4v ¿no?
Sin embargo, no puedo acceder a él ya que marca error.

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 12:07 pm

Lo que sucede es que la pagina esta organizada como una sola pelicula, es decir que todos los enlaces corresponden a una sola pelicula. La lista en el srvidor esta organizada de esta manera:

Carpeta: musica
Carpeta: videos (video1.f4v...)
AC_RunActiveContent.js
default.html (pagina de intro)
default.swf
home.html (pelicula con todo el contenido)
home.swf
lista.xml (lista de componente de audio)
SteelExternalPlaySeekMute.swf (componente de video)

Este es todo el contenido en el servidor

No se si el componente de audio este interfiriendo con el componente de video en algo, sera?

  Comentario por Carla Macías el Enero 15, 2009 @ 12:21 pm

No había visto lo de la carpeta videos, entonces la liga a tu video debería ser http://videoproduccioneshn.com/videos/video1.f4v. No importa que todo esté organizado en una sola película porque los videos los estás cargando de forma externa (es decir, no están insertados dentro del documento de Flash).
Lo que quiero ver es si puedo acceder de forma externa (por medio de una URL absoluta) a uno de tus videos y a uno de tus mp3; por ejemplo, para acceder a mi primer video de este tutorial puedes hacerlo con http://www.codigometropoli.com/wp-content/uploads/2008/06/videos/video1.flv

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 12:54 pm

Como consigo esa direccion porque por logica deberia ser como dices, en la direccion del sitio remoto me aparece esto: /www/videoproduccioneshn.com/videos/
y en la de musica esto: /www/videoproduccioneshn.com/musica/

  Comentario por Christian el Enero 15, 2009 @ 12:56 pm

No se si es que tengo mal ubicada la carpeta del sitio en general, pero lo raro es que todo lo demas funciona, cualquier otro dato que necesites no dudes en pedirlo.

  Comentario por Christian el Enero 15, 2009 @ 1:04 pm

Al entrar al servidor el sitio esta organizado en carpetas de esta manera:

db
logs
StatsData
www

Dentro de la carpeta www esta videoproduccionehn.com y dentro de la misma esta el orden de carpetas que ya te di con musica, videos etc...

  Comentario por Carla Macías el Enero 15, 2009 @ 1:04 pm

Vamos a hacer unas pruebas:
1. ¿Cuál es el nombre de uno de tus mp3 con todo y extensión, por fa?
2. Cambia

Texto Plano
Actionscript:
  1. player.contentPath = carpeta + videos[contador];

por

Texto Plano
Actionscript:
  1. player.contentPath = "http://www.codigometropoli.com/wp-content/uploads/2008/06/videos/video1.flv";

Las preguntas de cómo acceder directamente a uno de tus videos es porque ya nos pasó una vez que un servidor no nos permitía acceder a los videos y tuvimos que levantar un ticket, ya te imaginarás. Solamente quiero descartar esa posibilidad.

Saludos.

  Comentario por Carla Macías el Enero 15, 2009 @ 1:08 pm

Ok, ya vi una de tus canciones (http://videoproduccioneshn.com/musica/Coca Cola Sello.mp3) y sí puedo acceder directamente a ella, con tus videos debería ser igual. Hagamos la prueba del punto 2 anterior y dime si te muestra mi video.

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 1:23 pm

Hice el cambio que me dijiste y no paso nada, publique los tres archivos requeridos otra vez, un html y dos swf.

  Comentario por Christian el Enero 15, 2009 @ 1:24 pm

Pero entonces solo pudiste ver la carpeta de musica, la de video no?

  Comentario por Christian el Enero 15, 2009 @ 1:47 pm

Tienes razon, probe con la carpeta de musica y accedo bien pero la videos no, para probar los archivos borre la carpeta de videos, hice una nueva con el mismo nombre y volvi a subir el archivo video1.f4v y lo mismo, que sera?

  Comentario por Christian el Enero 15, 2009 @ 2:23 pm

Servira de algo si pongo los archivos de video donde estan los archivos html y swf, fuera de la carpeta videos, pero no se si habria que cambiar el ContentPath en el AS, espero tus comentarios.

  Comentario por Carla Macías el Enero 15, 2009 @ 2:58 pm

Lo de la carpeta no es, le voy más a lo que te comenté de un problema que tuvimos con un servidor.
Aún así si quieres probar poniendo los videos en root tendrías que cambiar estas dos líneas:

Texto Plano
Actionscript:
  1. player.contentPath = carpeta + videos[contador];

por esta:

Texto Plano
Actionscript:
  1. player.contentPath = videos[contador];

y

Texto Plano
Actionscript:
  1. player.contentPath = carpeta + videos[contador];

por

Texto Plano
Actionscript:
  1. player.contentPath = videos[contador];

¿No tienes algun otro servidor en la cual hacer una prueba?

Saludos.

  Comentario por Christian el Enero 15, 2009 @ 4:06 pm

Hola Carla, hice nuevamente la prueba cambiando el contentPath por tu enlace del video Heroes del Silencio y esta vez si funciono, la vez anterior me comi una linea del reemplazo, dado que eso si funciona cual es tu diagnostico?

En cuanto a lo de tener otro servidor para hacer pruebas, no, no tengo otro.

Ayudame con esto porfa que ya me esta enfermando.

  Comentario por Christian el Enero 15, 2009 @ 4:08 pm

Como es que se puede accesar a cualquier carpeta del servidor menos a la de videos, eso no lo entiendo.

  Comentario por chazz el Febrero 3, 2009 @ 9:51 pm

saludos, bueno vienod este tutorial esta de lujo, gracias por el aporte, ahora mi pregunta es en verdad con este codigo puede tocar f4v?? por que lo porve con as2 y flv y si jala pero como puedo hacerlo jalar para f4v porque hasta ahorita se que es exclusivo de sc4... o estoy en un error??? yo los he logrado tocar con as3 pero la verda no soy bueno programando ... bueno espero me puedan orientar

  Comentario por chazz el Febrero 3, 2009 @ 9:54 pm

por cierto tambien me han dicho que los f4v solo se pueden tocar con cs4 y as3 es verdad???

  Comentario por Carla Macías el Febrero 4, 2009 @ 4:40 pm

Hola Chazz,

Para usar videos f4v necesitas del Adobe Flash CS4 y AS3.
Desconozco si con el CS3 funcione.

Saludos.

  Comentario por chazz el Febrero 4, 2009 @ 9:49 pm

me lo suponia asi es que tu codigo no se puede aplicar muchas gracias Carla

  Comentario por chazz el Febrero 5, 2009 @ 2:53 pm

saludos nuevamente molestando
mira quiero hacer un timer para flvplayback en as3 y ya lo habia hecho para as2 pero logicamente no jala tu sabes como lo puedo declarar para as3 ???
te mando el codigo de as2

import mx.video.*;
var listenerObject:Object = new Object();
listenerObject.playheadUpdate = function(eventObject:Object):Void {
txt_box.text = eventObject.playheadTime;
txt_box_01.text = my_FLVPlybk.totalTime;
trace(my_FLVPlybk.state + ": playhead time is: " + eventObject.playheadTime);
};
my_FLVPlybk.addEventListener("playheadUpdate", listenerObject);
my_FLVPlybk.contentPath = "http://www.helpexamples.com/flash/video/water.flv";

de antemano muchas gracias

  Comentario por Carla Macías el Febrero 6, 2009 @ 12:37 am

Hola Chazz,

Para AS3 utiliza el siguiente código:

Texto Plano
Actionscript:
  1. import fl.video.FLVPlayback;
  2. import fl.video.VideoEvent;
  3.  
  4. function playheadUpdate(evento:VideoEvent):void
  5. {
  6.     txt_box.text = evento.playheadTime.toString();
  7.     txt_box_01.text = "" + my_FLVPlybk.totalTime;
  8.     trace(my_FLVPlybk.state + ": playhead time is: " + evento.playheadTime);
  9. }
  10.  
  11. my_FLVPlybk.addEventListener(VideoEvent.PLAYHEAD_UPDATE, playheadUpdate);
  12. my_FLVPlybk.source = "http://www.helpexamples.com/flash/video/water.flv";

Saludos.

  Comentario por chazz el Febrero 6, 2009 @ 4:33 am

muchas gracias!!!!
pasa un buen dia :)

  Comentario por juan carlos el Marzo 6, 2009 @ 6:09 pm

Hola Carla, antes que nada que buen aporte fijate que estoy buscando hacer algo asi, en un flv playback cargar varios flv y llamarlos con los botones justo como el ejemplo, pero necesito el codigo para as3 ya que me dice que algunas funciones no son igual en concreto la de "eval" y la de "opcion1_btn._alpha = 100;" como podria arreglarlo para que funcionara en as3??? Gracias

  Comentario por Carla Macías el Marzo 9, 2009 @ 10:12 am

Hola Juan Carlos,

Debería funcionar cambiándolo por:

Texto Plano
Actionscript:
  1. this["opcion" + (contador + 1) + "_btn"].alpha = 0.5;

La propiedad alpha en AS3 es sin el guión bajo al inicio, y sus valores van de 0 a 1.
Ahorita no tengo instalado Flash CS3 o Flash CS4 para probarlo, asi que por favor avísame si no funciona.

Saludos.

  Comentario por juan carlos el Marzo 9, 2009 @ 11:22 am

Hola Carla;

antes que nada gracias por tu respuesta, me funciono la solucion al alpha pero ahora me marca este error:

1046: No se encontró el tipo o no es una constante en tiempo de compilación: Void.

  Comentario por Carla Macías el Marzo 9, 2009 @ 11:47 am

Hola Juan Carlos,

Me parece que en AS3 el void debe ir con minúsculas, cambia el Void por void en todas las funciones que lo tienen.

Saludos.

  Comentario por Martin el Marzo 10, 2009 @ 2:39 pm

Hola Carla, que tal?

Estoy implementando el codigo que utilizas, no modifique nada. Solo cambie la cantidad de videos.

Resulta que funciona todo... El unico problema que tengo es el siguiente... Cuando llega a reproducir una parte en la que todavia esta cargando el video, lo identifica como si el video ya se hubiera terminado y pasa al siguiente video.

Entonces reproduce unos tres / cuatro segundos y cambia de video. Por mas que el video dure 7 minutos.

En la segunda pasada, reproduce unos 7 segundos y sucede lo mismo. Depende de cuanto haya cargado...

En la pc funciona perfectamente ya que los videos no los tiene que levantar desde el servidor.

Espero que me entiendas, sino, podria pasarte la direccion via e.mail?. Lo tengo online, pero no puedo hacer publico el enlace.

Desde ya muchisimas gracias.

  Comentario por Carla Macías el Marzo 10, 2009 @ 3:04 pm

Hola Martín,

Prueba jugando con el estado BUFFERING del componente.
A lo mejor dentro de la llamada complete podrías verificar si el componente está en ese estado. Ejemplo:

Texto Plano
Actionscript:
  1. function muestraVideo(eventObject:Object):Void {
  2.      if(eventObject.state != FLVPlayback.BUFFERING)
  3.           cambiaVideo(-1);
  4. }

Ahora tocaría probar si cuando el video llega a su final se
pasa al otro.

Saludos.

  Comentario por Martin el Marzo 10, 2009 @ 6:26 pm

No No No No!!! No se puede creer jejeje.. Realmente sos muy grosa!!!.. Gracias.. Con eso se soluciono!!

Y de nuevo gracias por responder tan rapido.

Te mando un beso desde argentina.

  Comentario por juan carlos el Marzo 14, 2009 @ 4:20 pm

Hola carla, perdon por la molestia nuevamente, pero habia dejado este proyecto por otros que tenia que sacar, pero ahora lo retomo y mira me marca este error:

Error #1056: No se puede crear la propiedad contentPath en fl.video.FLVPlayback.

Tienes idea de que es lo que debo hacer??

Saludos

  Comentario por juan carlos el Marzo 14, 2009 @ 4:23 pm

Hola nuevamente carla ya solucione ese error solo cambie el contentPhat por source

  Comentario por juan carlos el Marzo 14, 2009 @ 5:09 pm

Hola Carla de nueva cuenta yo jaja fijate que ya casi lo tengo listo, solo que ahora no me muestra el nombre del video ni el artista, pero si me muestra el mensaje de cargando video.. pero ahi se queda fijo este mensaje, y bueno la funcion del alpha de los botones no la plica sera por el cambio de script de onRelease por el addEventListener? Digo lo cambie x que ya no puedo dejar el onReleas en as3 y defini una funcion para cada boton,

function clicks0(event:MouseEvent):void
{
cambiaVideo(0);
}

function clicks1(event:MouseEvent):void
{
cambiaVideo(1);
}

etc...

  Comentario por Carla Macías el Marzo 16, 2009 @ 10:13 am

Hola Juan Carlos,

Ya me perdí, por favor pega todo tu código entre tags [ as] y [ /as] (quitando el espacio que hay entre el [ y as y entre [ y /as.

Saludos.

  Comentario por juan carlos el Marzo 17, 2009 @ 10:27 am

Hoal Carla te pongo mi codigo

function videoActual(eventObject:Object):void
{
cancion_txt.text = canciones[contador];
artista_txt.text = artista;
habilitaBotones();
this("opcion" + (contador + 1) + "_btn").alpha = 0.5;
this("opcion" + (contador + 1) + "_btn").enabled = false;
}
function cambiaVideo(numero:Number):void
{
cancion_txt.text = "Cargando video...";
if(numero == -1) {
if(contador == videos.length - 1)
contador = 0;
else
contador++;
}
else
contador = numero;
player.source = carpeta + videos[contador];
}
function habilitaBotones(event:MouseEvent):void
{
opcion1_btn.alpha = 0.5;
opcion2_btn.alpha = 0.5;
opcion3_btn.alpha = 0.5;
opcion4_btn.alpha = 0.5;

opcion1_btn.enabled = true;
opcion2_btn.enabled = true;
opcion3_btn.enabled = true;
opcion4_btn.enabled = true;
}
function clicks0(event:MouseEvent):void
{
cambiaVideo(0);
}
function clicks1(event:MouseEvent):void
{
cambiaVideo(1);
}
function clicks2(event:MouseEvent):void
{
cambiaVideo(2);
}
function clicks3(event:MouseEvent):void
{
cambiaVideo(3);
}
opcion1_btn.addEventListener(MouseEvent.CLICK,clicks0);
opcion2_btn.addEventListener(MouseEvent.CLICK,clicks1);
opcion3_btn.addEventListener(MouseEvent.CLICK,clicks2);
opcion4_btn.addEventListener(MouseEvent.CLICK,clicks3);

El principio delcodigo es lo mismo no modifique nada pero como te decia no me pone el nombre del artista ni el titulo de la cancion, y me marca el sig error: 1136: Número de argumentos incorrecto. Se esperaba 1.

  Comentario por Carla Macías el Marzo 18, 2009 @ 6:17 pm

Hola Juan Carlos,

Te faltaban algunas cosas, entre ellas los listeners del FLVPlayback, por lo tanto no cambiaba el mensaje de "Cargando video" por el nombre de la canción.
El código completo modificado es el siguiente:

Texto Plano
Actionscript:
  1. import fl.video.VideoEvent;
  2.  
  3. var videos:Array = ["video1.flv", "video2.flv", "video3.flv", "video4.flv"];
  4. var canciones:Array = ["El estanque", "Fuente Esperanza", "Héroe de Leyenda", "No más lágrimas"];
  5. var contador:Number = 0;
  6. var carpeta:String = "http://www.codigometropoli.com/wp-content/uploads/2008/06/videos/";
  7. var artista:String = "Héroes del Silencio";
  8.  
  9. player.source = carpeta + videos[contador];
  10. player.addEventListener(VideoEvent.COMPLETE, muestraVideo);
  11. player.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, videoActual);
  12.  
  13. function muestraVideo(eventObject:Object):void {
  14.     cambiaVideo(-1);
  15. }
  16. function videoActual(eventObject:Object):void
  17. {
  18.     cancion_txt.text = canciones[contador];
  19.     artista_txt.text = artista;
  20.     habilitaBotones();
  21.     this["opcion" + (contador + 1) + "_btn"].alpha = 1;
  22.     this["opcion" + (contador + 1) + "_btn"].enabled = false;
  23. }
  24. function cambiaVideo(numero:Number):void
  25. {
  26.     cancion_txt.text = "Cargando video...";
  27.     if(numero == -1) {
  28.         if(contador == videos.length - 1)
  29.             contador = 0;
  30.         else
  31.             contador++;
  32.     }
  33.     else
  34.         contador = numero;
  35.     player.source = carpeta + videos[contador];
  36. }
  37.  
  38. function habilitaBotones():void
  39. {
  40.    opcion1_btn.alpha = 0.5;
  41.    opcion2_btn.alpha = 0.5;
  42.    opcion3_btn.alpha = 0.5;
  43.    opcion4_btn.alpha = 0.5;
  44.    
  45.    opcion1_btn.enabled = true;
  46.    opcion2_btn.enabled = true;
  47.    opcion3_btn.enabled = true;
  48.    opcion4_btn.enabled = true;
  49. }
  50. function clicks0(event:MouseEvent):void
  51. {
  52.    cambiaVideo(0);
  53. }
  54. function clicks1(event:MouseEvent):void
  55. {
  56.    cambiaVideo(1);
  57. }
  58. function clicks2(event:MouseEvent):void
  59. {
  60.    cambiaVideo(2);
  61. }
  62. function clicks3(event:MouseEvent):void
  63. {
  64.    cambiaVideo(3);
  65. }
  66.  
  67. opcion1_btn.addEventListener(MouseEvent.CLICK,clicks0);
  68. opcion2_btn.addEventListener(MouseEvent.CLICK,clicks1);
  69. opcion3_btn.addEventListener(MouseEvent.CLICK,clicks2);
  70. opcion4_btn.addEventListener(MouseEvent.CLICK,clicks3);

Saludos.

  Comentario por juan carlos el Marzo 18, 2009 @ 9:45 pm

Hola Carla!!!! Ha no maaaa!! eres muy muy buena, no sabes como me estaba dando vueltas esto en la cabeza pero ahora funciona perfecto!!!! No se que hubiera hecho sin tu ayuda muchas muchas gracias de verdad!!!! Eres genial!!!

  Comentario por juan carlos el Marzo 21, 2009 @ 1:37 pm

Hola Carla una vez mas recurriendo a tu ayuda, si quiero que los videos los lea de un servidor streaming como puedo hacerlo, ya que nunca he hecho esto antes. Gracias y saludos

  Comentario por Gerardo Galicia el Marzo 27, 2009 @ 8:06 pm

excelente tutorial, me ha servido mucho el documento, una pregunta hay alguna manera de hacer el video en tamaño fullScreen, he revisado los skin y no traen el boton, como podria hacerlo por medio de código de antemano gracias y ojala puedan ayudarme

  Comentario por Carla Macías el Abril 1, 2009 @ 10:17 am

Hola Gerardo,

Encontré este documento en el Developer Center de Adobe.
Ahí explican cómo funciona el modo Full-Screen y los parámetros y código que debes usar.

Saludos.

  Comentario por Sergio Sanchez el Abril 7, 2009 @ 9:14 pm

Hola saludos, mi pregunta respecto a el reproductor FLVPlayback es si es posible poner una transmision en tiempo real, pues tengo una dirección RTMP y he intentado ponerla en la sección de ContenPath, pero no sucede nada, he visto algunas cosas en la ayuda del programa, pero me pide que la direccion RTMP termine con la extension .flv, pero lo que pasa es que como es una transmision y no un video pregrabado, en la direccion RTMP no me indica nungun video flv. Hay un reproductor llamado Flowplyer en el cual si se puede hacer esto, pero yo necesito el FLVPlayback ya que lo ejecuto dentro de otra aplicacion SWF, y el flowplayer se configura vía html.

Gracias por el aporte.

  Comentario por Sergio Sanchez el Abril 7, 2009 @ 9:16 pm

De hecho he intentado activar la casilla "islive" dentro del inspector de componentes, pero aun asi no me funciona.

  Comentario por lex-ex el Abril 21, 2009 @ 2:25 pm

Te pasaste! excelente, me ha sido utilisimo! muchisimas gracias.

  Comentario por Héctor el Mayo 29, 2009 @ 1:14 am

Hola Carla, he seguido el tutorial el cual esta de maravilla y me ha funcionado muy bien con algunas otras variables, el asunto es que al realizarlo en un fla y en primera escena funciona bien, pero lo quise utilizar dentro de otro fla que tienen varias páginas y ahi ya no me funciona, me supongo que el problema es de las rutas con this o _parent, pero no se donde utilizarlos, podrías ayudarme con esto?

  Comentario por Carla Macías el Mayo 29, 2009 @ 8:06 am

Hola Héctor,

Necesito saber más datos. Con "ya no funciona" te refieres a que el FLVPlayback ya no muestra el video o a que no aparece el FLVPlayback o bien aparece el FLVPlayback pero no muestra la el skin con los botones, etc.
¿Cómo que dentro de otro fla que tiene varias páginas?
¿Cuál es la ruta que le estás poniendo a tu video (contentPath)?

Saludos.

  Comentario por Héctor el Mayo 29, 2009 @ 9:12 am

Gracias por tu pronta respuesta, verás, estoy haciendo esta página http://www.vertice.ws/fungilife, lo que hice fue: en la página productos, inserté una nueva capa, ahí metií un nuevo símbolo llamado "video", copié y pegué los frames del fla donde tengo el video, después lo jalé de la biblioteca hacia la escena de los productos, pero nada, no se reproducen los videos, por eso pensé en que la solución es que tengo que utilizar "this o _parent" en el as, pero no estoy seguro si esa es la solución...

  Comentario por Héctor el Mayo 29, 2009 @ 9:24 am

Este es el as con los arreglos dentro de mi pc:

[ as]var videos:Array = ["red-reishi-english.flv", "ganoderma lucidum.flv"];
var canciones:Array = ["Reishii, The Secret of King Herb", "Ganoderma Lucidum"];
var contador:Number = 0;
var carpeta:String = "H:/Vertice Diseño/Vertice A-G/fungi cap/web/imagenes/video/";
var artista:String = "Fungilife";

player.contentPath = carpeta + videos[contador];
player.addEventListener("complete", muestraVideo);
player.addEventListener("playing", videoActual);

function muestraVideo(eventObject:Object):Void {
cambiaVideo(-1);
}
function videoActual(eventObject:Object):Void {
cancion_txt.text = canciones[contador];
artista_txt.text = artista;
habilitaBotones();
eval("opcion" + (contador + 1) + "_btn")._alpha = 80;
eval("opcion" + (contador + 1) + "_btn").enabled = false;
}
function cambiaVideo(numero:Number):Void {
cancion_txt.text = "Cargando video...";
if(numero == -1) {
if(contador == videos.length - 1)
contador = 0;
else
contador++;
}
else
contador = numero;
player.contentPath = carpeta + videos[contador];
}

function habilitaBotones() {
opcion1_btn._alpha = 100;
opcion2_btn._alpha = 100;

opcion1_btn.enabled = true;
opcion2_btn.enabled = true;
}

opcion1_btn.onRelease = function() {
cambiaVideo(0);
}

opcion2_btn.onRelease = function() {
cambiaVideo(1);
}[ /as]

Como te comentaba antes, el fla solo, funciona bien, pero cuando lo pongo dentro de la página ya no jala los videos.
Saludos.

  Comentario por Héctor el Mayo 29, 2009 @ 10:33 am

se me pasó comentar algo importante, el código cuando lo tengo en el fla independiente, corre bien, pero cuando lo pongo en el otro fla me marca un error en el compilador,

me indica que en la línea 11 de mi código se espera una llave '{'
en la línea function muestraVideo(eventObject:Object):Void {
y que en la línea 13 se ha encontrado una llave } inesperada.

caray esto es importante y no lo mencioné, lo siento.

gracias por tu tiempo.

  Comentario por Héctor el Mayo 29, 2009 @ 11:17 am

Hola, he encontrado el problemilla, mi fla lo tenía publicado para AS1, por eso no funcionaba. muchas gracias por haber subido este tutorial. Saludos.
Si alguna vez necesitas algo 3D, logos, máscotas, o figuras, por ejemplo las botellas de producto de la pagina que te mandé (aun no hago animación pero espero que pronto), si en algún momento te puedo ayudar con algo similar, por favor no lo dudes.
Gracias, Saludos.

  Comentario por Carla Macías el Mayo 29, 2009 @ 6:06 pm

Hola Héctor,

Qué bueno que ya encontraste el problema.
Muchas gracias por tu mensaje, tomaré en cuenta tu ofrecimiento =0)

Saludos.

  Comentario por Diego Burgos el Junio 11, 2009 @ 10:23 am

consulta.
estoy impresionado de la informacion del blog y soy nuevo en tu comunidad, pero quiero participar en lo que pueda ayudar...

hoy me toca consultar y fue asi q los conoci..
la consulta es la siguiente:

tengo un FLAsh con con Flvplaybk donde le seteo muchas cosas.
el source, el skin etc..

el tema justamente esta ahi en el skin, tome como base
el conocido "skinOverAll.fla" que viene con flash
para poder darle mi diseño.

por otro lado a mi fla que contiene el contendor de video, le hice una funcion utilizando totalTime y otra que pasa de segundos a horas:minutos:segundos...

mi pregunta es:

como hago para poner este campo de texto con sus funciones dentro del skin?? ya que quiero que cuando el skin aparece o desaparece, tambien lo haga estos campos, es decir quiero que mi skin sea completo y para esto necesito ponerle el tempo total del video y el tiempo en el que el cabezal va pasando, cosa que solucione con: playheadTime

entonces alguien sabe donde poner esos textos si quiero ponerlos dentro del skin???

  Comentario por Juan Sebastian el Junio 22, 2009 @ 1:36 pm

Mil gracias por este tutorial, justo lo que necesitaba, funciona a la perfeccion
saludos !

  Comentario por Rober el Junio 25, 2009 @ 2:13 am

todavia no aplico el codigo a mi proyecto, pero esta muy comprensible para novatazos como yo, espero que me puedas hacer alguna recomendación, es que estoy realizando un proyecto en el cual se tienen que reproducir como 80 videos, pero su duracion es muy corta 1.5 segundos aproximadamente.

El proyecto consiste en mostrar la pronunciacion del abecedario y cada letra tiene 4 videos de ejemplo, entonces al selecionar una letra debe salir un menu con los 4 ejemplos como botones, y al dar clik sobre algun boton reproducir el video correspondiente y bueno con lo que nos has enseñado vislumbro una salida no tan complicada, que me podrias recomendar, de antemano muchas gracias, por tomarte el tiempo de enseñar esto de una manera tan didactica.

  Comentario por fak el Julio 27, 2009 @ 7:37 pm

Hola capo! Estoy teniendo un problema con un video. Tengo armada una web con un .mov de flash. En mi pc funciona perfecto, pero el tema es que necesito mostrarlo en otra pc, y no descargado de internet dado que el mov de fondo pesa mucho (y mide muchisimo x ende no puedo convertirlo a flv pues mide más que hdtv). Como puedo hacer para que se reproduzca en otra pc y reconozca los directorios?. Funciona con todos los mc que cargo, pero no con el path del video.
Traté poniendo /fondo.mov en el contentPath y nada, la verdad que me esta volviendo loco.
Saludos y muy bueno el tuto!

  Comentario por Carla Macías el Julio 29, 2009 @ 8:25 am

Hola fak,

Perdona la tardanza.
Supongo que estás utilizando Flahs CS3 o CS4 para cargar un video .mov en el FLVPlayback.
No hay ninguna razón para que no te muestre el video de una computadora a otra siempre y cuando estés utilizando URL relativas. Asegurate de que el URL del skin que estas utilizando también sea realitvo (en este caso bastaría con poner como source fondo.mov). ¿Será posible que la otra computadora donde quieres mostrarlo no tenga la última versión del Flash Player?

Saludos.

  Comentario por Raisel el Agosto 14, 2009 @ 9:55 am

Hola Carla. Tu tutorial es excelente.
Al declarar la variable del arreglo para los archivos de videos dices que también se pudiesen poner en un archivo XML para que sea más fácil de actualizar

#
/* Creamos un arreglo con el nombre de los archivos de nuestros videos. Estos nombres también puedes ponerlos en un archivo XML para que sea más fácil de actualizar */
#
var videos:Array = ["video1.flv", "video2.flv", "video3.flv", "video4.flv"];

Como pudiera lograr esto y como cambiaria el codigo utilizando la variante xml en tu codigo?

Saludos.

  Comentario por Carla Macías el Agosto 16, 2009 @ 7:01 pm

Hola Raisel,

Es muy fácil. Consideremos la siguiente estructura para el XML (lista_videos.xml):

Texto Plano
XML:
  1. <?xml version="1.0"?>
  2. <videos>
  3.     <item titulo="El estanque" artista="Héroes del silencio" url="video1.flv" />
  4.     <item titulo="Fuente Esperanza" artista="Héroes del silencio" url="video2.flv" />
  5.     <item titulo="Héroe de Leyenda" artista="Héroes del silencio" url="video3.flv" />
  6.     <item titulo="No más lágrimas" artista="Héroes del silencio" url="video4.flv" /> 
  7. </videos>

El código del archivo de Flash cambiaría de la siguiente forma:

Texto Plano
Actionscript:
  1. var videos_array:Array = new Array();
  2. var totalVideos:Number = 0;
  3. var carpeta:String = "videos/";
  4. var contador:Number = 0;
  5.  
  6. var xmlFile:XML = new XML();
  7. xmlFile.ignoreWhite = true;
  8. xmlFile.onLoad = function(success)
  9. {
  10.     if(success)
  11.     {
  12.         var opcionNodo = this.firstChild.firstChild;
  13.         while(opcionNodo)
  14.         {
  15.             if(opcionNodo.nodeType == 1)
  16.                 videos_array.push({titulo:opcionNodo.attributes.titulo, artista:opcionNodo.attributes.artista, url :o pcionNodo.attributes.url});
  17.             opcionNodo = opcionNodo.nextSibling;
  18.         }      
  19.         totalVideos = videos_array.length;
  20.         if(totalVideos&gt; 0) cambiaVideo(0);
  21.     }
  22.     else
  23.     {
  24.         trace("Error al leer el archivo XML");
  25.     }
  26. }
  27. xmlFile.load("lista_videos.xml");
  28.  
  29. player.addEventListener("complete", muestraVideo);
  30. player.addEventListener("playing", videoActual);
  31.  
  32. function muestraVideo(eventObject:Object):Void {
  33.     cambiaVideo(-1);
  34. }
  35.  
  36. function cambiaVideo(numero:Number):Void {
  37.     cancion_txt.text = "Cargando video...";
  38.     if(numero == -1) {
  39.         if(contador == videos_array.length)
  40.             contador = 0;
  41.         else
  42.             contador++;
  43.     }
  44.     else
  45.         contador = numero;
  46.    
  47.     var videoActual:Object = videos_array[contador];
  48.     player.contentPath = carpeta + videoActual.url;
  49. }
  50.  
  51. function videoActual(eventObject:Object):Void {
  52.     var videoActual:Object = videos_array[contador];
  53.     cancion_txt.text = videoActual.titulo;
  54.     artista_txt.text = videoActual.artista;
  55.     habilitaBotones();
  56.     eval("opcion" + (contador + 1) + "_btn")._alpha = 50;
  57.     eval("opcion" + (contador + 1) + "_btn").enabled = false;
  58. }
  59.  
  60. function habilitaBotones() {
  61.     opcion1_btn._alpha = 100;
  62.     opcion2_btn._alpha = 100;
  63.     opcion3_btn._alpha = 100;
  64.     opcion4_btn._alpha = 100;
  65.    
  66.     opcion1_btn.enabled = true;
  67.     opcion2_btn.enabled = true;
  68.     opcion3_btn.enabled = true;
  69.     opcion4_btn.enabled = true;
  70. }
  71.  
  72. opcion1_btn.onRelease = function() {
  73.     cambiaVideo(0);
  74. }
  75.  
  76. opcion2_btn.onRelease = function() {
  77.     cambiaVideo(1);
  78. }
  79.  
  80. opcion3_btn.onRelease = function() {
  81.     cambiaVideo(2);
  82. }
  83.  
  84. opcion4_btn.onRelease = function() {
  85.     cambiaVideo(3);
  86. }

Si la información de los videos debes obtenerla de una base de datos; este XML podrías construirlo usando "echo"(s) en PHP o por medio de ASP, etc.

Saludos.

  Comentario por Daniel Aguilar el Agosto 27, 2009 @ 1:38 pm

Hola carla!!! Primero que nada te quiero felicitar porque se ve que sabes mucho...

Mira tengo un problema necesito hacer lo que muestras aqui pero con flash cs4 la verdad es el primer trabajo que realizo con flash y la verdad no entiendo nada!!! AYUDAME PORFAVOR me urge!!!!!! tengo que hacerlo con 8 videos ya los tengo en .flv.
Te lo agradesco muchisimo!!!!

Mi msn es: -------------------------

saludos.......

Daniel: Borré tu correo del msn para evitar que te llegue SPAM. Te he agregado a mi lista, espero poder ayudarte apesar de la tardanza.

  Comentario por btv el Octubre 2, 2009 @ 10:21 am

mi pregunta es, como hago para decirle a flash que un video loinicie desdes un punto determinado pormi, ejemplo
video1.flv iniciar en los 15 segundos.
de esta manera cuando entres a la pagia el video no iniciara desde en 0:0 segundos, iniciara en 15:0 segundos.
espero que me entiendas, y gracias de antemano

  Comentario por Carla Macías el Octubre 4, 2009 @ 9:36 pm

Hola btv.

Para ir a los X segundos de un video debes utilizar la función seek del FLVPlayback. Para este tutorial en específico, tendrías que cambiarle la propiedad autoPlay del FLVPlayback por el valor de false y posteriormente añadir la dos últimas líneas debajo de la línea del código del contentPath:

Texto Plano
Actionscript:
  1. player.contentPath = carpeta + videos[contador];
  2. player.seek(15); /* Donde 15 son los segundos a los que quieres ir */
  3. player.play();

Saludos.

  Comentario por mik el Octubre 19, 2009 @ 7:43 am

Hola Carla, fantástico post. Mi pregunta sera un poco amateur, pero quiero montar un video en mi página con este método, y mi duda es saber si es posible que dejándo el valor autoPlay = false, existe alguna posibilida de que el visor del video muestre el primer fotograma, es decir, que no se quede en negro, o al menos un botón de play,... Mil gracias de antemano!
Miguel

  Comentario por Carla Macías el Octubre 23, 2009 @ 11:40 pm

Hola Mik,

Solito lo hace al quitarle el autoplay, te muestra el primer frame del video.

Saludos.

  Comentario por roma el Diciembre 4, 2009 @ 2:25 pm

hola Carla Macías, por favor ayudame no me funciona para nada este ejemplo, solo aparece la barra de cargando, los botones pero no los videos, ni los nombres de las canciones, espero tu pronta respuesta por favor.

  Comentario por roma el Diciembre 4, 2009 @ 4:20 pm

Hola Carla Macías disculpe la molestia pero no me fije en algo tan simple de poner el nombre de instancia al Flvplayerback, por eso no me aparecian los videos, gracias de todas formas, siga poniendo mas ejercicios como estos, estan chivos,, roma, El Salvador

  Comentario por Carla Macías el Diciembre 4, 2009 @ 6:35 pm

Hola roma. ¡Qué bueno que encontraste el error y que te ha funcionado! Saludos.

  Comentario por Carlos Montaño el Febrero 17, 2010 @ 5:04 am

Hola carla, pasa que estoy introduciendome en el mundo de flash...
necesito realizar una aplicacion que permita realizar tipo videoconferencia, ademas de soporte tecnico .. es decir quiero ver la pantalla de una pc desde otra y poder interactuar con esta pagina, ademas de un tipo chat claro... me comentan que la mejor opcion es la utilizacion de flash media server o red 5 (libre) pero al parecer son complicados... queria preguntarte si conoces estas herramientas, si crees que son la mejor opcion para realizar lo que deseo o si me podrias recomendar otras mejor....

gracias...

  Comentario por Edgar el Febrero 25, 2010 @ 3:09 pm

Que tal Carla excelente tu tutorial, solo tengo uno problemitas, primero al presionar los botones no me muestra los video tengo los videos en la misma carpeta que mi archivo en flash, ya quite lo de carpeta pero cuando hago clik en mi primer boto el flvplayback se queda cargando pero no muestra nada, te agradeceria tu ayuda

  Comentario por Carla Macías el Marzo 1, 2010 @ 11:22 pm

Hola Carlos,

Lamento no poder ayudarte, desconozco por completo esas herramientas.

Saludos.

  Comentario por Carla Macías el Marzo 1, 2010 @ 11:23 pm

Hola Edgar,

¿Podrías subir tu archivo a algún servidor estilo RapidShare o Megaupload (con todo y los videos o aunque sea un video)?
Sin el código me hes imposible saber cuál es el problema.

Saludos.

  Comentario por Guille el Abril 22, 2010 @ 11:11 pm

Hola Carla, muchas gracias por compartir el tutorial! Me funciona perfecto.

Ahora lo que quiero es que no pase solo a próximo video. Hay alguna manera de lograrlo? Debe ser fácil pero no me sale!

Desde ya, muchas gracias!

  Comentario por Carla Macías el Abril 23, 2010 @ 12:26 am

Hola Guille,

Para evitar que muestre el siguiente video hay que quitar la línea:

Texto Plano
Actionscript:
  1. player.addEventListener("complete", muestraVideo);

Saludos.

  Comentario por arturo zahar el Abril 27, 2010 @ 10:14 am

Hola Carla, que gran ayuda con tus aportes, baje este tutorial y lo desarrollé y todo muy bien, pero necesito alguna instruccion que al accesar a esta seccion de videos no inicie el video de forma automatica y que se tenga que seleccionar el video para poder iniciar el video, te agradecere mucho tu ayuda.

Saludos desde la ciudad de los vientos.

  Comentario por Carla Macías el Abril 28, 2010 @ 12:26 am

Hola Arturo,

En el punto número 5 hablo del parámetro autoplay. Deberás poner su valor en false para evitar que inicie el video.

Saludos.

  Comentario por Erick el Abril 30, 2010 @ 6:11 pm

hola
tengo un problema con el tutorial el detalle es este cuando se reproduce el video y termina y empeza el otro o le doy al boton para que pase al siguiente video el reproductor cambia de tamaño y se va haciendo mas pequeño en cada cambio de video el autosize esta en false no se que pueda ser estaba pensando restrigir el tamaño en AS pero soy nueno y estoy atorado. espero tu respuesta y ayuda gracias

  Comentario por Rafal el Mayo 15, 2010 @ 10:45 am

Hola buenos días, me preguntaba si sabes como hacer que el video no se detenga y no reaccione cuando mueves la cabeza lectora a un punto donde el video aun no se ha cargado, ya que si tu lo haces el video se detiene y aunque le pongas play de nuevo o muevas la cabeza lectora a una zona cargada, el video queda detenido sin que el usuario pueda hacer algo para reproducir el video, en tu ejemplo no siempre pasa pero a veces si, pero en mi aplicación web siempre pasa, pero no se como evitarlo, ya lo intenté de varias formas pero no lo logro hacer

  Comentario por javier tapia el Mayo 18, 2010 @ 11:50 pm

hola carla mi pregunta es que si tengo varios videos y los subi a mi servidor con flvplayback al cargar la pagina empiezan a cargar todos y solo dejo uno en autoplay pero por lo mismo que todos estan cargando se supercorta el video entonces quiero saber como hacerle para que a los 5 videos restantes no comiensen a descargar gracias

  Comentario por Aurora el Mayo 20, 2010 @ 11:05 pm

Muchísimas gracias, excelente tutorial, llevaba horas partiéndome la cabeza para un trabajo, en verdad, mil gracias!!! TT-TT

  Comentario por Carla Macías el Mayo 21, 2010 @ 12:06 pm

Hola Aurora,

Gracias por tu mensaje =)

Saludos.

  Comentario por cali el Mayo 28, 2010 @ 9:26 pm

llevaba buscando esto hace muchisimo!
Ahora mismo Te Amo! me salvaste!
Gracias..

  Comentario por Carla Macías el Mayo 29, 2010 @ 9:14 am

Hola cali,

Muchas gracias por tomarte la molestia en comentar =)

Saludos.

  Comentario por Edgar el Junio 3, 2010 @ 6:46 pm

Que tal Carla agradezco el tutorial que pusite, tengo un problemita, mira descargue un video del youtube y se descarga en formato flv como los que necesita el control flvplayback, el problema es que no lo reproduce y el control cambia de posicion, es un solo video elque quiero reproducir pero no se ve nada, esta en la misma carperta, no se que esta pasando, agradecere tu ayuda

  Comentario por Carla Macías el Junio 4, 2010 @ 1:47 pm

Hola Edgar,

Una vez me sucedió lo mismo y lo que tuve que hacer fue convertir el video a FLV. Sé que suena ilógico estando el video en FLV convertirlo a FLV pero nunca supe por qué no funcionaba, no sé si pueda ser por la forma (códecs, por ejemplo) con el que estaba hecho el video, no tengo ni idea.

Saludos.

  Comentario por Edgar el Junio 4, 2010 @ 5:13 pm

gracias Carla y otra pregunta con esa conversion no se pierde calidad en el video y con que programa lo convertiste

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)