Rich Internet Applications

Me gustaria comenzar un una introducción y/o definición a los formatos de Flash Video (FLV), F4V y H.264

.FLV
A partir de la versión 6 del Flash Player es posible intercambiar audio, video y datos a través de conexiones RTMP con Flash Media Server …. siendo una manera de alimentar los datos al Flash Media Server (y por lo tanto a los clientes de Flash Player) es a través archivos con el formato FLV
RTMP es un protocolo utilizado por el Flash Player para entregar los objetos en tiempo real, video y audio a los clientes (Flash Player).
Para la versión 7 el Flash Player puede reproducir archivos FLV directamente utilizando MIME type video/x-flv.
En resúmen los archivos FLV codifican de una manera sincronizada el audio y video. Los datos de audio y video dentro de los archivos FLV se codifican de la misma forma como el audio y video en arhivos SWF.

.F4V
Disponible su reproducción desde la versión del Flash Player 9 Update 3 … el formato F4V está basado en la especificación ISO/IEC 14496-12: ISO base media file format.
Los archivos F4V hacen uso extensivo de Streaming (transmisión de video o audio remotamente en tiempo real sin necesidad de descargar el archivo completo).
En escencia un archivo FLV es contenedor MPEG4 con video h.264 y audio MP3.

H.264
Es la siguiente generación de compresión de video usando el estandard MPEG-4.
H.264 puede igualar la mejor calidad MPEG-2 hasta a la mitad de la velocidad de transmisión de datos. H.264 también ofrece una excelente calidad de vídeo a través de todo el ancho de banda del espectro - de 3G a HD y todo lo que entre (desde 40 Kbps a más de 10 Mbps).
H.264 permite la reproducción de video en Alta Definición (HD).

Extensiones soportadas por el Flash Player
.f4v     F4V video/mp4    Video para el Adobe Flash Player
.f4p     F4P video/mp4     Protected Media para el Adobe Flash Player
.f4a     F4A video/mp4     Audio para el Adobe Flash Player
.f4b     F4B video/mp4     Audio Libro para el Adobe Flash Player
.flv      video/x-flv Flash Video

Después de este breviario cultural … continuo con mi premisa … Reproducir un video bajado de YouTube en Silverlight

Para este ejercicio utilice:

• Visual Studio 2008 Profesional Edition (aunque también se puede utilizar Visual Web Developer 2008 Express Edition)
• Expression Blend 3 Preview
• Silverlight 3 Beta Tools for Visual Studio 2008 SP1
• Free FLV Converter V6.4.1 by Koyotesoft (por supuesto existen varios productos en el mercado que conviertan archivos .FLV a .MPEG ó .AVI … que son formatos compatibles con Silverlight).

Considero importante comentar que para instalar el Silverlight 3 Beta Tools … se deberá desinstalar cualquier versión previa de Silverlight … incluyendo el RunTime … SDK y cualquier Beta Tool instalado en el Visual Studio 2008. Para verificar que versión tenemos podemos verificarlo en el listado de programas instalados de Windows:

En el ejemplo habría que desinstalar las 3 opciones antes de llevar a cabo la instalación. Personalmente quise instalar la versión 3 y se me presentaban errores que no me permitieron la instalación hasta que desinstale la Silverlight 2.

Ahora si .. continuando con el proceso para Reproducir videos de YouTube en Silverlight:

• Bajar algún video de YouTube. Existen varias páginas o programas que permiten bajar videos de YouTube. Yo usé KeepVid pero incluso el FLV Converter cuenta con la funcionalidad para bajar videos. Los videos de YouTube vienen en formato Flash Video (.FLV)
•  Convertir a formato .AVI o .WMV (hice el ejercicio con ambos formatos con éxito). Esto lo hice con el Free FLV Converter … y es muy sencillo … basta con importarlo para conversión desde un FLV y Convertirlo al formato deseado: AVI ó WMV

• Abrir Visual Studio 2008. Crear una nueva Aplicación WPF y asignarle un nombre al proyecto. ej. VideoOnSilverlight

• Sin cerrar Visual Studio o el proyecto … abrir Expression Blend y abrir el archivo solution del  proyecto acabado de crear. VideoOnSilverlght.sln
• Ajustar el tamaño de la ventana directamente en XAML a Height=”500″ Width=”500″

• Mediante las herramientas visuales cambiar el color de fondo de la ventana. En mi caso color negro.

En los pasos anteriores solo pretendo mostrar que llevar a cabo funciones de diseño es sumamente sencillo en Blend y la posibilidad de interactuar en el mismo proyecto entre Blend y VS2008. Ahora es momento de agregar el Video a nuestro proyecto … lo cual es mas sencillo realizarlo en VS2008 .. así que continuemos

• Salvar el proyecto en Blend y cambiar o moverse directamente a VS2008 y este presentará un mensaje de confirmación de que el archivo .xaml fue modificado fuera del editor de VS2008. Dar clic en el botón Yes to All

• Ahora es momento de añadir el video al proyecto … El procedimiento es el mismo para cualquier Item … En el Solution Explorer clic en Add > Existing Item … Hay que ver que por default el explorador no muestra archivos de video … así que habrá que buscarlo por su extensión *.avi / *.wmv ó *.*
• Cambiar las propiedades del video Build Action a Content y Copy to Output Directory a Copy Always

• Agregar elvideo al Grid mediante el TAG MediaElement … Hay que hacer notar que el parámetro LoadedBehavoir=”Manual” … de modo que se ejecutará de manera independiente y se puede controlar (en caso de que se quisieran por ejemplo botones de control como Play / Stop / Pause).

• En el archivo Window1.xaml.cs (code-behind) establecer el Play de manera automática al MediaElement al momento de inicializar … mediante … VideoOnSilverlight.Play(); (o como hayamos llamado a nuestro MediaElement)

• Presionar F5 y … Listo .. tenemos un video bajado de YouTube corriendo en Silverlight. (si ya se que no es exactamente lo que hubiera querido .. pero )

Por cierto … el video que baje fue el Trailer de la pelicula New Moon de la Saga de Twilight.

Como punto adicional … recuerdan que dejamos abierto Expression Blend con el proyecto … si cambiamos a este .. nos presentará un mensaje ya que detectó cambios efectuados fuera de la aplicación … bastará con dar clic en botón Yes para ver reflejados los cambios

Conclusión.
Por supuesto que me hubiera gustado que la transición para llevar un video de YouTube … o cualquier .FLV a Silverlight fuera transparente y este último pudiera reproducirlo sin ningún tipo de conversión … pero habrá que esperar a la versión final de Silverlight 3. Por cierto para generar videos F4V en las suites de Adobe … se requiere tener instalada la versión CS4.

dansalinas Silverlight Silverlight