Cuando planificamos una web, siempre nos preguntamos si es conveniente colocar video dentro de los contenidos. Actualmente tenemos muchas formas de incluir estos contenidos, destacando la utilización de Flash por su facilidad para utilizar tecnología streaming. Antes de continuar, explicaremos a grosso modo algunos conceptos básicos:

Streaming:

El streaming nos permite escuchar y visualizar los archivos de audio y/o video mientras se van descargando en nuestros ordenadores, evitando así, la larga espera que se requiere para obtener un archivo completo.

El streaming funciona de una manera muy simple: nuestro ordenador al detectar un archivo con esta tecnología, comienza a descargarlo y va creando un buffer donde comienza a guardar la información, una vez que este buffer contenga una pequeña parte de los datos empezará a reproducir el audio o video mientras continúa el resto de la descarga. El Real Player y el Windows Media Player se han popularizado por el uso de esta tecnología, aunque para incluir contenidos en nuestras páginas web de cualquiera de estos players, necesitamos que el navegador tenga instalados los plug-ins.

Video en Flash vs otros reproductores con streaming:

En más de una ocasión hemos tenido la oportunidad de ver video en web, y en muchas de estas, lo hicimos utilizando algún programa de streaming. Si bien es funcional si tenemos el plug-in instalado, no sucede lo mismo cuando nuestro usuario no lo tiene y vamos a darle la tarea adicional de bajarlo e instalarlo para poder apreciar el video, acto que puede demorar unos minutos sagrados en Internet.

Con el caso de los videos que se muestran gracias a Flash también necesitamos que el usuario tenga el plugin del Flash Player. Pero la gran ventaja es que el flash player plugin se encuentra disponible en el 98% de computadoras que acceden a Internet pues viene preinstalado en la mayoría de navegadores

Formatos permitidos con Macromedia Flash

Formatos de videoCon Macromedia Flash a partir de la versión MX 2004 podemos importar un video de diferentes formatos:

Si tienes instalado QuickTime 4 o posterior (Windows y Macintosh), pueden importarse los siguientes formatos de archivo de vídeo incorporado:

Tipo de Archivo Extensión
Audio Video Interleaved .avi
Digital Video dv
Motion Picture Experts Group .mpg, .mpeg
Película QuickTime .mov

Si tienes instalado DirectX 7 o posterior (sólo en Windows), pueden importarse los siguientes formatos de archivo de vídeo incorporado

Tipo de Archivo Extensión
Audio Video Interleaved .avi
Motion Picture Experts Group .mpg, .mpeg
Archivo de Windows Media .wmv, .asf

Formato FLV

Flash videoAsí como podemos importar video en Macromedia Flash, también podemos exportar un video ya introducido en nuestra librería, guardándolo con la extensión FLV que representa las siglas de Flash Video, formato al que en la versión de Flash MX sólo se tenía acceso con Flash Comunication Server.

Los FLV son archivos de video comprimidos con el códec de video Sorenson Spark que nos
garantiza su perfecto funcionamiento.

Sorenson Spark es un códec de vídeo en movimiento, incluido en Flash y que permite añadir contenido de vídeo incorporado a Flash. Spark es un codificador/decodificador de vídeo de alta calidad que disminuye enormemente el ancho de banda necesario para publicar imágenes en Flash y al mismo tiempo, aumenta la calidad de vídeo. Con la inclusión de Spark, Flash da un importante paso hacia adelante en materia de capacidad de vídeo. En Flash 5 o anteriores sólo se podía simular vídeo mediante imágenes secuenciales de mapa de bits.

Importando video en Flash

  1. Abrimos Macromedia Flash MX 2004
  2. Importamos con <CTRL> + R y buscamos nuestro video.
  3. Nos aparece la ventana del asistente con dos opciones:
  • Importar todo el video
  • Editar primero el video, que nos permite cortar y/o hacer pequeños clip de nuestro video en cuestión, y muy fácil de aplicar y lo veremos en el anexo 1.
  1. Suponiendo q nuestro video ya este editado, le damos a la primera opción (importar todo el video).
  2. Nos aparece Perfil de compresión, para nuestro ejemplo escogemos 512, le damos al botón EDICIÓN. Las opciones para personalizar el ancho de banda van de 0 Kbps a 750 Kbps, y especifican la velocidad aproximada de descarga del vídeo, en kilobits por segundo. La configuración de calidad de vídeo, que oscila entre 0 y 100, especifica el nivel de compresión de todos los fotogramas. También es posible especificar una velocidad de fotogramas clave. La velocidad de descarga puede variar para lograr un nivel de compresión uniforme. Como verán, podemos jugar con el ancho de banda y la calidad, acto que nos permite manejar el peso de nuestro FLV. Pero en este caso, no moveremos nada, seleccionando el botón atrás.
  3. Ahora veamos Configuración Avanzada, y vamos al botón EDICIÓN. Como todo en Flash MX 2004 es importante, obviaremos algunas cosas para centrarnos en la parte que tiene relevancia aquí: utilizaremos donde dice ESCALA para modificar el tamaño en que se apreciará nuestro video. Mi recomendación exagerando un poco es poner 300px o en todo caso seguir los lineamientos de acuerdo al diseño que ya se tiene planificado. Tenemos una vista previa que nos ayuda en todo momento. Pulsamos el botón siguiente.
  4. Ponemos nombre a nuestra configuración con una descripción para recordarlo en otro momento. Botón Siguiente.
  5. Y señores, el esperado FINALIZAR.

Nos saldrá un mensaje diciendo que necesitamos más fotogramas para nuestro video, seleccionando que SI. Apreciaremos que tenemos nuestro video en la línea de tiempo y en la librería apareció un nuevo elemento con icono de cámara de video. Ese es nuestro VIDEO INCORPORADO, que aun no es FLV, detalle que cambiaremos en el siguiente paso.

  1. Abrimos nuestra librería o biblioteca y le damos clic derecho a nuestro video incorporado, vamos a propiedades y escogemos EXPORTAR, le damos la RUTA donde guardar nuestro FLV y listo.

Bien, tenemos nuestro FLV y ahora tenemos que reproducirlo, habiendo dos formas básicas de hacerlo: utilizando el componente MediaPlayBack o a través de ActionScript puro.

Con componente

  1. Abrimos nuestro Flash MX 2004 y pulsamos <CTRL> + F7
  2. Se verá la ventana de Componetes, seleccionando el (+) de MEDIA COMPONENTES y arrastramos al escenario o stage el componente MEDIAPLAYBACK.
  3. Teniendo seleccionado el componente pulsamos <ALT> + F7
  4. Se verá la ventana del Inspector de Componentes, teniendo la pestaña Parámetros seleccionada podemos escoger entre FLV o MP3, le damos FLV
  5. En URL colocamos la dirección de nuestro archivo FLV (a Flash MX 2004 le falto una opción para examinar). Si esta en el mismo nivel de nuestro SWF solo escribimos: video.flv y si está en una carpeta le ponemos: mi_carpeta/video.flv

Player

Y ahora corre tu Flash para verlo funcionar.

Con ActionScript

Antes de empezar, prepararemos todo en el flash para cargar el FLV externo:

  1. Abrimos nuestro Macromedia Flash 2004 y apretamos <CTRL> + L, para abrir la librería o biblioteca
  2. Y en la pestaña superior derecha de la ventana le damos a NUEVO VIDEO
  3. Vemos que en la librería apareció un objeto nuevo con nombre por defecto "Video Incorporado"
  4. Arrastramos este objeto a nuestro escenario y le colocamos nombre de instancia "mi_video"

Para esta forma de cargar un video FLV usaremos el siguiente código:

var conexion:NetConnection = new NetConnection();
conexion.connect(null);
var stream:NetStream = new NetStream(conexion);
mi_video.attachVideo(stream);
stream.play("video.flv");

Y ya tenemos todo listo, probemos la película.

Explicación del código:

Se crea la instancia "conexión" de la clase NetConnection que proporciona los medios para reproducir archivos FLV de flujo desde una unidad local o una dirección HTTP.

Con conexion.connect(null); abre una conexión local mediante la que puede reproducir archivos de vídeo (FLV) desde una dirección HTTP o desde el sistema de archivos local.

Creamos una instancia "stream" de la Clase NetStream que proporciona métodos y propiedades para reproducir archivos de Flash Video (FLV) del sistema de archivos local o de una dirección http

Ahora asociamos la instancia stream a nuestro objeto mi_video del escenario

Y terminamos con el método play() del objeto NetStream dándole la ruta de nuestro FLV

Descarga aquí el .FLA que usa sólo actionScript

Descarga aquí el .FLA con ambas formas (AS y componente)

Pueden ver un ejemplo de video FLV que bajo de 112 mb a 1.7 mb aqui