flowPlayer: FLV Player

  • 19/05/2008
  • 12:47 am
  • unijimpe

flowPlayer es un reproductor de vídeos FLV, con soporte para FLV, SWF, MP3, MP4, H.264, JPG y PNG, soporte para listas de reproducción e incluso soporte para el protocolo RTMP (Flash Media Server, Red5) para vídeos en streaming y sobre todo es gratuito.

Características
flowPlayer es un reproductor muy bien logrado, fácil de utilizar y con muchas características destacables entre las cuales podemos listar:

  • Soporte para Video (FLV, MP4, H.264).
  • Vídeo en pantalla completa o fullscreen.
  • Vídeos en Descargar progresiva (Para archivos FLV).
  • Vídeos en Streaming (Flash Media Server, Red5).
  • Soporte para thumbnail de vídeos.
  • Soporte para controles mediante Javascript.
  • Habilidad para reproducir playlists.
  • Viene con varios temas o diseños incluidos.
  • Facilidad para personalizar el player.
  • Permite añadir publicidad antes de un vídeo.

Como utilizar flowPlayer
El uso es muy sencillo, primero descargamos los archivos desde Download Flowplayer, extraemos los archivos y escogemos el theme que mas se adecue a nuestras necesidades, luego con ayuda de SWFObject insertamos el vídeo, para ello primero incluimos SWFObject:

PLAIN TEXT
HTML:
  1. <script type="text/javascript" src="swfobject.js"></script>

Luego creamos un DIV que contendrá a nuestro vídeo player:

PLAIN TEXT
HTML:
  1. <div id="flowplayer">Flowplayer</div>

Finalmente insertamos el player, definiendo el vídeo que deseamos reproducir, esto lo pasamos con flashvar utilizando el método addVariable de SWFObject, esto de la forma:

PLAIN TEXT
JavaScript:
  1. so = new SWFObject("flowplayer.swf","swf","400","250","9","");
  2. so.addVariable("config", "{videoFile: 'video.flv'}");
  3. so.write("flowplayer");

Cargando Flash

Obviamente existen multitud de parámetros que podemos configurar para lo cual hay una documentación muy detallada en Flowplayer Configuration. De la misma forma se puede cambiar el skin del player, para ello pueden consultar Skinning tutorial.

Posts Relacionados

Total de Comentarios: 8

Publicidad
proba
19/05/2008
3:02 pm

probando probando

Iker
20/05/2008
5:08 am

He estado consultando el manual y lo que no he encontrado es la forma de meter la publicidad antes del video. Me echas una mano?

Gracias por este blog!

Esteban
20/05/2008
11:57 am

Excelente!, pero tanto en el ejemplo de aca, como en la prueba que hice en mi server, he visto que el video hace loop, me gustaria que una vez que finalizara se diera el stop.

Me dan una mano?

unijimpe
22/05/2008
1:06 am

Si no deseas que haga loop puedes utilizar el parámetro loop, con lo cual el parámetro config quedaría de la forma:

so.addVariable(”config”, “{videoFile: ‘video.flv’, loop:false}”);

Ahora si por ejemplo deseas que no se reproduzca automáticamente puedes utilizar el parámetro autoPlay:

so.addVariable(”config”, “{videoFile: ‘video.flv’, autoPlay:false}”);

Esteban
22/05/2008
11:35 am

Perfecto!, me funciono.

Gracias unijimpe, te agradezco la ayuda, asi como tambien, la dedicacion que tomas para tu gran blog. Mi visita es diaria.

matt
07/07/2008
3:45 pm

Hola unijimpe, la verdad q esta bueno q presentas estas cosas.
Yo tengo q hacer un reproductor para una web, y este debe cargar dinamicamente los videos a partir de las imagenes q se muestran, y al ver este proyecto y la gran cantidad de opciones que tiene he decido acceder.
Sin embargo, no puedo ni arrancar, trate de hacer este tutorial, pero la ultima parte, donde estan las variables, no me las toma, las toma como texto.
Yo queria saber si puedes subir el archivo donde este el codigo o que me ayudes, diciendome donde pongo esa parte y que extension debe tener el archivo.
Desde ya gracias y espero poder seguir viendo mas de estos tutoriales.
Saludos

mari
15/08/2008
11:59 pm

sincerament no entendi bien la explicacion. Pongo todo asi?

Flowplayer
so = new SWFObject(”flowplayer.swf”,”swf”,”400″,”250″,”9″,”");
so.addVariable(”config”, “{videoFile: ‘video.flv’}”);
so.write(”flowplayer”);

Yako
08/09/2008
9:23 pm

por favor, estoy k me rompo la cabeza tratando de usar este programa pero hay algo k no se explica ( o yo no soy bueno en esto), es que ya tengo todo lo k me pides que baje pero no indicas que debo hacer con eso!!, digo, me das indicaciones pero no me dices como debo usar las cosas k bajé, y en la web principal no me dice k debo hacer con todo lo k bajé, a ver si me explicas como para burro por fa!!!

Enviar Comentario

(*)

(*)