JW FLV Player: Personalización y skins

El reproductor de jeroenwijering.com es, probablemente, uno de los más utilizados si queremos insertar archivos de manera independiende de los reproductores de video que nos proveen ciertas páginas web (más información).

Tiene sus ventajas y tambien sus desventajas. Por un lado es muy flexible y reproduce tanto audio como videos en varios formatos: FLV, MP4, MP3, (más detalles); posee la capacidad de manejar listas de reproducción y es muy liviano pero, necesitamos tener acceso a los archivos a reproducir lo que no es tan sencillo si sólo usamos YouTube pero hay otros servicios como blipTV que permiten enlazar directamente los videos y lo mismo ocurre con Photobucket, e incluso ImageShack si necesitamos alojar archivos SWF.

Para usarlo necesitamos dos cosas, insertar el script swfobject.js y alojar el reproductor en alguna parte.

El script lo podemos descargar y guardalo en un servidor o bien utilizar la librería que provee Google API e incluirlo como cualquier otro script antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>

También podemos cargarlo directamente con el cargador de Google o agregarlo a la lista de de scripts si ya lo estamos usando para cargar otras:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("swfobject", "2.1");
</script>

El reproductor en si mismo es un SWF así que debemos alojarlo nosotros y lo más sencillo es ImageShack. En este momento está disponible la versión JW FLV Player 4.2 que se descarga en formato ZIP y que incluye varios demos y explicaciones detalladas.

Ahora, podemos incluir uno o varios reproductores en nuestro sitio y para eso podemos usar scripts o la etiqueta OBJECT que me parece la más adecuada para Blogger:

<object width="ancho" height="alto" id="movie"
type="application/x-shockwave-flash"
data="URL_player.swf">
<param name="movie" value="URL_player.swf" />
<param name="flashvars" value="file=URL_archivo&parametros" />
</object>

Lo interesante del reproductor es que podemos personalizarlo mucho. La forma más sencilla es, tal vez, utilizar el wizard de jeroenwijering.com e ir marcando las opciones que queremos; nos dará como resultado el código necesario que sólo deberemos copiar y pegar.

Algunos de los parámetros son bastante simples asi que también podemos agregarlos manualmente. Todos ellos se colocan en flashvars (más información):

file=url es la dirección del archivo a reproducir y en Blogger es una dirección absoluta (comienza con http://)
image=url es la dirección de una imagen que podemos colocar en lugar de la pantalla negra que se muestra por defecto
backcolor=0x000000 es el color de la pantalla (por defecto es negro)
frontcolor=0x000000 es el color de los textos y de los botones (por defecto es blanco)
lightcolor=0x000000 es el color de los efectos rollover (por defecto, rojo)
showicons=true|false muestra u oculta el ícono de actividad en el centro de la pantalla del reproductor
logo=url coloca una imagen personal en la esquina superior derecha

Todos los parámetros se agregan en el mismo atributo anteponiendo el símbolo & o bien &amp;:

<param name="flashvars" value="file=http://miArchivo.flv&amp;image=http://miImagen.jpg&amp;backcolor=0000CC"/>

Uno de los parámetros más interesantes es el que nos permite cambiar el aspecto general del reproductor utilizando skins.

Un skin no es otra cosa que otro archivo SWF que podemos agregar y que podemos descargar por separado, agregándolo luego como parámetro en flashvars:

&skin=URL_archivo.swf