Incluir vídeo en Blogger: vídeos FLV con controles Flash


Resulta muy interesante introducir contenidos de vídeo en un blog. De hecho, incrustar vídeos de YouTube en Blogger es muy sencillo. Sin embargo, utilizar vídeos de YouTube presenta ciertos inconvenientes:

  • La resolución real de los vídeos de YouTube está limitada a 320 x 240 píxels.

  • El vídeo sufre una fuerte compresión (está limitado a 250 kbps).

  • La marca de agua de YouTube puede superponerse al vídeo.

  • La personalización de los controles de reproducción del vídeo es limitada.

El formato de vídeo FLV (Flash Video) proporciona una magnífica relación entre compresión y calidad, dando lugar a vídeos de alta calidad que ocupan muy poco. Por ello, recomendaría crear vídeos en formato FLV, almacenar estos vídeos en su propio servidor web, e incluir vídeo FLV en Blogger. Siga estos pasos para incrustar vídeo de alta calidad en su blog:


Esquema de incluir vídeos FLV en Blogger


Paso 1 - Convertir el vídeo en FLV


El primer paso es convertir el vídeo a FLV. El entorno de edición de Adobe Flash posee una función de Importar Vídeo que permite convertir rápidamente un archivo original de vídeo en FLV. Sin embargo, el entorno de desarrollo de Flash es una aplicación cara. Por ello mi consejo es utilizar un conversor de vídeo gratuito que permita convertir el archivo de vídeo original (.avi, .mpg, .mov, ...) en un archivo de vídeo Flash (.flv).


SUPER es el conversor de vídeo gratuito que yo elegiría para convertir el vídeo a FLV.


No tiene más que pasar su vídeo a formato FLV y subir el archivo .FLV resultante a su servidor web. Sólo hay que tener cierto cuidado con el consumo del ancho de banda, puesto que el contenido en forma de vídeo suele ocupar bastante.



Paso 2 - Crear los controles de reproducción


Una vez que se dispone de un vídeo en formato FLV es necesario crear los controles de reproducción, necesarios para arrancar el vídeo, pausarlo, detenerlo, comprobar cuánto vídeo se ha precargado, controlar el volumen, etc.


El entorno de desarrollo de Flash permite incluir controles de vídeo predefinidos, pero esto no resultará de gran utilidad para incluir el vídeo en Blogger: Flash no permite incluir una ruta absoluta al archivo SWF que contiene los controles del vídeo, el cual se encontrará en su propio servidor web (y no en el servidor de Blogger, con lo que no valdrán las rutas relativas).


La solución consiste en utilizar un reproductor de vídeo FLV de código abierto que pueda incrustarse dentro del código HTML del blog. El reproductor de vídeos FLV que recomiendo es OS FLV Player, el cual es completamente código abierto, personalizable, fiable y permite la incrustación en el blog. Y ni siquiera hace falta tener el editor de Flash para utilizar este programa: sólo es necesario subir el archivo precompilado que incluye los controles de reproducción a su servidor (player.swf).


En los próximos pasos le enseñaré a configurar OS FLV Player para que pueda incluir vídeo Flash en Blogger de forma sencilla.



Paso 3 - Incrustar vídeo Flash en Blogger


OS FLV Player proporciona código PHP que genera automáticamente el código HTML necesario para incrustar el vídeo FLV en una página web.


Pero, puesto que tendremos que almacenar los controles de reproducción en un servidor web diferente del de Blogger, necesitaremos escribir el código para incluir el vídeo en el blog a mano. He aquí el código HTML que deberá incluirse en el post del blog para incrustar el vídeo en el blog:



<object width="[Ancho del vídeo]" height="[Alto del vídeo]" id="flvPlayer">

   <param name="movie" value="[Ruta absoluta de player.swf]" />

   <param name="FlashVars" value="&movie=[Ruta absoluta al vídeo .FLV]">

   <embed src="[Ruta absoluta de player.swf]" flashvars="&movie=[Ruta absoluta al vídeo .FLV]" width="[Ancho del vídeo]" height="[Alto del vídeo]" type="application/x-shockwave-flash">
   </embed>

</object>


Sólo hay que sustituir los parámetros señalados:

  • Usar el mismo alto y ancho que tenga el vídeo .FLV original.

  • Usar la ruta absoluta al archivo SWF que tenga los controles de reproducción de OS FLV (ejemplo: http://www.midominio.com/player.swf).

  • Usar la ruta absoluta al archivo de vídeo FLV (ejemplo: http://www.midominio.com/miVideo.flv).


Paso 4 - Personalizar el aspecto del vídeo en el blog


En este punto, puede ser necesario personalizar el aspecto de los controles de reproducción, de manera que el archivo de vídeo Flash incluido en el blog haga juego con la plantilla de Blogger seleccionada.


Puesto que OS FLV Player es un reproductor de código abierto, se permite editar el archivo de código fuente .FLA (player.fla), de manera que pueda crear unos controles de reproducción con el aspecto que prefiera. No obstante, para editar el archivo fuente .FLA es necesario tener el editor de Flash.


Por otra parte, hay una forma muy sencilla de personalizar los colores de la interfaz del vídeo, sin más que cambiar los valores de un par de parámetros. He aquí el código fuente de ejemplo:



<object width="640" height="480" id="flvPlayer">

   <param name="movie" value="http://www.midominio.com/player.swf" />

   <param name="FlashVars" value="&movie=http://mydomain.com/miVideo.flv&fgcolor=0x333333&bgcolor=0x999999">

   <embed src="http://www.midominio.com/player.swf" flashvars="&movie=http://mydomain.com/miVideo.flv&fgcolor=0x333333&bgcolor=0x999999" width="640" height="480" type="application/x-shockwave-flash">
   </embed>

</object>


Los parámetros que debería ajustar son los siguientes:

  • El color principal (fgcolor, puesto a 333333 en el ejemplo).

  • El color de fondo (bgcolor, puesto a 999999 en el ejemplo).


Conclusiones


Incluir vídeos FLV en Blogger no es difícil. Sólo necesita convertir sus archivos de vídeo originales a FLV e incrustarlos en un reproductor de vídeos FLV dentro del blog. Este procedimiento ofrece múltiples ventajas:

  • Puede incluir vídeo de alta resolución en su blog.

  • Puede controlar la compresión del vídeo, con lo que puede incluir vídeos Flash de alta calidad.

  • Puede evitar que aparezcan marcas de agua de terceras partes en sus vídeos FLV.

  • El aspecto de los controles de reproducción es totalmente personalizable, de manera que puede adaptarlo al aspecto de su blog.

¡Aproveche estos trucos y comience hoy mismo a incluir vídeo FLV de alta calidad en su blog!

14 comments:

Unknown dijo...

Me ha sido muy MUY UTIL, este post de tu blog.

Muchísimas gracias por tu ayuda...

Un saludo desde Vigo.
Carlos...

ESV dijo...

Me alegra mucho que te resultara útil.

Lo cierto es que el problema de incluir videos Flash alojados en un servidor distinto fue un cierto quebradero de cabeza.

Cuando desarrollamos esta solución para incrustar Flash fue sorprendente lo fácil que resultaba de implementar (¡Y además todo con software libre!).

Unknown dijo...

Si una de las cosas más interesantes es utilizar software libre siempre que se pueda...

Sobre todo por sus valores, actualizaciones y lo entusiasta que soy de el.

Saludos.
Carlos.

abarnils dijo...

genial! Una pasada. Senzillo y muy útil. Gracias des de Barcelona.

Unknown dijo...

Muchas gracias era lo que andaba buscando porque se me a hecho problematico trabajar con Flash 2004 y aquí lo explicas con lujo de detalle de principio a fin....saludos desde Venezuela.

●๋•╣ҜΞҜΘ╠●๋• dijo...

Hola buenas...

El tto fenomnal, sólo me ha quedado una duda... ¿cómo se hace para poder poner el reproductor con opocion de full screem, seapra que se pueda ver en pantalla completa por los usuarios d ela web. Esque el código que has puesto no te lo permite. Un saludo!

ESV dijo...

Creo que para poder incrustar el reproductor del vídeo Flash con opción de pantalla completa, habría que añadir el parámetro allowFullScreen con valor puesto a true ya que por defecto este es false tanto en las etiquetas de object como de embed.

Por otra parte, ciertas configuraciones de seguridad de algunos navegadores web, así como algunas versiones antiguas de Flash Player puede que no permitan reproducir vídeos FLV a pantalla completa.

●๋•╣ҜΞҜΘ╠●๋• dijo...

perdona si soy pesado pero me puedes decir como quedaría el codigo con la opción de pantallas completa porfa, para estar seguro...

Dremin dijo...

El código con el "true" para el Fullscreen quedaría tal que así:

ver enlace (que Blogger no deja pegar código en los comentarios, lo muestra mal)

●๋•╣ҜΞҜΘ╠●๋• dijo...

Muxisimas gracias a los dos soys unos craks, me va perfecto y ya no se me resite ningun flv. Gracias, peazo post teneis aquí.

Un saludo!

●๋•╣ҜΞҜΘ╠●๋• dijo...

Bueno ya que estamos tenía un par de dudas más jeje.

La primera es en relación a si se puede incorporar algun tipo de logo al reporductor, es ecir que cuando se vea la peli aparezca el nombre d emi página (no lo cero pero por si acaso os preguto...)

Lo segundo es, si se puede hacer lista, es decir, si una peli que está dvidida en varias partes se puede poner en 1 solo reporductor.

Y bueno, una tercera cosa es, si teneis por aquí algun post relativo al posicionaminto en google, en concreto, sobre la configuración de las metatags en el Head y códigos que mejoren las posibilidades de búsqueda. Esque he estado curioseando y me parece un mundo todos los códigos que las páginas ponen en el head para posicionarse.

En fin, aquí el novato os saluda!!

ESV dijo...

En cuanto a incluir un logotipo en el reproductor, en la propia página del OS FLV Player se proporciona el código fuente, de manera que sí que es posible personalizar el aspecto, e incluso, meterle un logotipo. La única pega que tiene esto es que creo que requiere Flash CS3 o superior para editar los archivos fuente.

No me suena que se le puedan meter listas de reproducción, al menos, utilizando simplemente parámetros de configuración... Claro, que otra opción sería editar los vídeos y combinarlos todos en un mismo FLV, aunque es obvio que esto presenta algunas desventajas.

En cuanto a etiquetas meta y buscadores, sólo hay una que tenga bastante sentido, y es description, principalmente para mostrarse como breve descripción de la página en la mayor parte de resultados de búsqueda. Ajústalo entre más de 100 y menos de 300 caracteres para resultados óptimos.

●๋•╣ҜΞҜΘ╠●๋• dijo...

Muchas gracias!

Unknown dijo...

Muchisimas gracias!!! llevo dias intentando hacer esto y no podia conseguirlo, tu tutorial me ha venido de lujo! Mi fallo era lo que bien explicas de los controles, me faltaba el archivo "player.swf" para hacerlo funcionar. Muchas gracias!