FlowPlayer: Reproductor de videos

Una vez más me he puesto a tratar que funcione FlowPlayer en Blogger. Ya son varios los fracasos pero esta vez, algo logra verse ... era hora.

FlowPlayer es un reproductor de archivos multimedia, uno de los mejores y soporta muchos formatos, FLV, SWF, MP3, MP4, H.264, etc. No sólo es de los mejores por la cantidad de funciones que tiene sino también de los más flexibles en cuanto a sus posibilidades gráficas. A decir verdad, las opciones son tanta que es imposible enumerarlas pero la documentación disponible es muy completa y debemos remitirnos a ella para los detalles.

Pero (siempre hay un pero) también es de los más complicados de utilizar, o por lo menos de configurar, justamente por eso, porque tiene "demasiadas" posibilidades.

La característica principal y que lo hace distinto de otros es que para funcionar usa JavaScript por lo tanto, como mínimo, necesitamos dos archivos: flowplayer-3.1.0.js y flowplayer-3.0.5.swf. Pero, si, eventualmente, queremos personalizarlo más, requerimos un tercer archivo: flowplayer.controls-3.0.3.swf. El problema no es ese sino que todos ellos, deben estar en la misma carpeta del mismo servidor y eso no es tan fácil. Una alternativa posible es Fileden.

Todo el "paquete" y algunos demos, los descargamos en formato ZIP y, una vez que alojamos ambos archivos en un servidor propio, debemos agregar el script en la plantilla, justo antes de </head>:

<script src="URL_flowplayer-3.1.0.min.js"></script>

Ese es el único que debemos agregar a la plantilla pero, si es algo que vamos a utilizar seguido, también sería bueno definir la URL del reproductor como una variable ya que la vamos a estar "llamando" seguido así que, debajo de lo anterior, ponemos esto:

<script>reproFLOWPLAYER="URL_flowplayer-3.0.5.swf";</script>

El tercer archivo no lo tenemos que cargar, es de uso interno y de allí la necesidad de que todos estén en el mismo lugar.

Para usar el reproductor tenemos diferentes alternativas y para cualquiera de ellas, debemos colocar el código correspondiente donde quisiéramos que se muestre. Por ejemplo, podemos hacerlo colocando un enlace:

<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script>flowplayer("nombreUnico", reproFLOWPLAYER);</script>

donde:
href contiene la URL del video a reproducir
style lo usamos para establecer las dimensiones del reproductor y el resto de las propiedades son optativas
id es la referencia a ese reproductor un nombre único)

Con suerte ... se verá esto:

Los desarrolladores recomiendan usar este modo ya que, si el video está en un enlace, un visitante que tenga JavaScript desactivado, podrá acceder a este de alguna otra forma. Sin embargo, no es el único método, también podríamos usar un DIV como contenedor:

<div style="margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </div>
<script>flowplayer("nombreUnico", reproFLOWPLAYER, "URL_video"); </script>

El código es similar, salvo que la URL del video a reproducir se coloca como tercer parámetro del script.

Por último, también podemos insertarlo como lo haríamos con cualquier otro reproductor, utilizando la etiqueta OBJECT (más información):

<object width="300" height="200" data="URL_flowplayer-3.0.5.swf" type="application/x-shockwave-flash">
<param name="movie" value="URL_flowplayer-3.0.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip":"URL_video"}' />
</object>

Ver Ejemplo DIV | Ver Ejemplo OBJECT

Hasta aquí, lo "normal", si queremos personalizar las cosas, todo lo debemos hacer con JavaScript y allí está la dificultad para usarlo en Blogger. Algunas cosas las podemos colocar directamente, agregado un parámetro más. Por ejemplo:

<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script">flowplayer("nombreUnico", reproFLOWPLAYER, {clip:{autoPlay:false,autoBuffering:true}});</script>

con autoPlay false el video no comenzará a reproducirse de forma automática (por defecto es true)
con autoBuffering true el video se irá cargando aunque no se reproduzca (por defecto es false)

Hay muchos más parámetros que podemos usar y todos se colocan del mismo modo, separados por una coma (ver detalles):

clip:{param1, param1, ..., paramN}

Este no es un reproductor sencillo, se me ocurre que no está pensado para usar una vez cada tanto, la personalización es tan extrema que requiere tiempo para entenderla pero luego, si lo conseguimos, todo se hace más "sencillo".

Visualmente, podemos cambiarlo casi por completo, establecer colores, gradientes, botones, etc. Para eso hay una serie de instrucciones que podemos agregar de manera individual en cada reproductor o bien, establecer una serie de parámetros generales.

Por ejemplo, si agregamos lo siguiente en el head de nuestra plantilla (o en un archivo externo), estaremos definiendo una serie de parámetros generales y ya no será necesario cargarlos individualmente:

<script type='text/javascript'>
//<![CDATA[
 var conf = {
    defaults: {
      autoPlay: false,
      autoBuffering: true
    },
    skins: { // creamos un skin
      skinDEMO: { // le damos un nombre
      // definimos colores
        sliderGradient: 'none',
        timeColor: '#5555555',
        backgroundGradient: [0.6,0.3,0,0,0],
        sliderColor: '#000000',
        buttonOverColor: '#666666',
        bufferGradient: 'high',
        bufferColor: '#666666',
        buttonColor: '#000000',
        progressGradient: 'medium',
        progressColor: '#999999',
        durationColor: '#999999',
        backgroundColor: '#000000',
        borderRadius: '15px',
        opacity:1.0,
      // definimos qué botones serán visibles
        play:true,
        volume:true,
        mute:true,
        time:true,
        stop:false,
        playlist:false,
        fullscreen:true,
        scrubber: true,
      // le damos una altura a la barra inferior
        height: 30,
      // y haremos que se oculte al reproducirlo
        autoHide: 'always'
      },
      skinDEMO2: { // otra
        ............
      },
      skinDEMO3: { // y todas las que se nos ocurra
        ............
      }
    }
  }
//]]>
</script>

Allí, usamos defaults para inicializar esos parámetros generales y skins para "crear" diferentes modelos de reproductores.

Los aplicamos de este modo:

<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script">flowplayer("nombreUnico", reproFLOWPLAYER, {clip: conf.defaults, plugins: {controls: conf.skins.nombre}});</script>

con el parámetro clip: conf.defaults le decimos que use los datos genéricos
con el parámetro plugins: {controls: conf.skins.nombre} le decimos que ese reproductor tenga cierto aspecto

No, no es sencillo ¿Detalles? Cientos. Hay que leer la documentación y probar y probar y probar y seguir probando ...