flowPlayer: FLV Player

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:

  1. <script type="text/javascript" src="swfobject.js"></script>

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

  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:

  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.

Comentarios Total 30 comentarios


proba
Publicado: 19/05/2008 3:02 pm

probando probando

Iker
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 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
Publicado: 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!!!

rocio
Publicado: 16/12/2008 10:04 am

hola miax, intersante tu colaboracion. hice la prueba y no em funca.

Noxivodrums
Publicado: 06/03/2009 6:39 pm

me sale igual q esta pagina…nunk termina de cargar y no sale el flow player…por que? heeeeeeeeeeeeeeeeeeeeeeeeeeeeelp!!!!!!

Daniel
Publicado: 13/03/2009 12:15 pm

El codigo se inserta asi de facil…
igual que lo esta en esta web… exactamente igual…

div style=”text-align: center; width:400px; height:250px; line-height:250px; margin-left: auto; margin-right: auto; background: #FFFFFF;”>Cargando Flash

swfobject.embedSWF(“/linkURL…Player.swf”, “video”, “400”, “250”, “9.0.28.0”, “”, {config: “{videoFile:\’http://video.flv\’, autoPlay:false, loop:false}”}, {wmode: “window”, menu: “false”, quality: “high”, bgcolor: “#FFFFFF”, allowFullScreen: “true”}, {});

Carlos
Publicado: 26/03/2009 4:50 pm

Hola a todos… en especial al creador de tan excelente blog…miren amigos ando desarrollando un proyecto web, y para tal uso el flowplayer… soy algo novato con el javascript… se hacer algunas cosillas con el flow y el javascript… pero en si lo que quiero hacer es lo siguiente…yo se que si me podran ayudar ademas que considero interesante para sus websites tambien…con el flowplayer obviamente en una pagina o apartado del site que cuando se acceda via http se abra automaticamente el flowplayer jalando un link externo de JUSTIN.TV que trasmite en vivo video pero en vez de ver el logo de justin dentro de la pantallita del flow ver el logo del site…que les parece? me dijeron que esas dos cosas 01..llamar al link de justin y 02… colocar mi propio logo se hacia con javascript…Si me apoyan… les paso todo el codigo completito para que lo hagan en sus sites…saludos

Rubens
Publicado: 28/05/2009 2:24 pm

Hola. Mira la verdad q parece tan simple pero a nosotros no nos funciona. Ponemos todo como nos decis pero al final nada funciona.
Queremos poner el reproductor y q al lado tenga un playlist con todos nuestros videos q tenemos en nuestro hosting. Ya probamos y no funciona :S
Gracias por tu ayuda…

Rubens
Publicado: 28/05/2009 2:26 pm

Una cosa mas…
El link para descargar ahi ya no existe :S

byron
Publicado: 27/07/2009 9:55 am

Buenos dias, ya hice todo lo que indican, pero aún me falta poder configurar de tal manera que no se reprodusca automáticamente.
Tengo los tres archivos descargados, ya los subí. Quisiera que me ayudaras para saber cual tengo que modificar.
Gracias.

unijimpe
Publicado: 27/07/2009 7:46 pm

Byron, para reproducir automáticamente el vídeo debes agregar el parámetro autoPlay y asignarle el valor true:

autoPlay: true

Entonces el código quedaría de la siguiente forma:

so = new SWFObject("flowplayer.swf","swf","400","250","9","");
so.addVariable("config", "{videoFile: 'video.flv', autoPlay: true}");
so.write("flowplayer");

Anselmo
Publicado: 08/08/2009 11:55 am

K tal, ando construyendo mi pá web, y quiero ponerle simplemente unos videos, ya descargué el “flowplayer” pero NO SÉ COMO INSTALARLO…

Alguien peude echarme la mano para poder hacer mi pag con unos simples videos,..??

Se los agradecería mucho,… GRACIAS!!!

walter
Publicado: 28/08/2009 4:58 am

q lasteima q el link ya no existe.
si alguien lo puede subir asi lo bajamos seria buenisimo

walter
Publicado: 28/08/2009 5:00 am

aca lo encontre http://flowplayer.org/download/index.html

Marcela Pereira
Publicado: 31/08/2009 1:38 pm

Me podrias informar como hago para agregar publicidad antes del video a mostrar? te agradeceria mucho.

knux03
Publicado: 20/10/2009 5:00 pm

ola yo kisiera una forma de ponerle una imagen de fondo en el flow player antes de darle a play o antes de que se reprodusca pero en java script

knux03
Publicado: 20/10/2009 5:07 pm

este es mi .js

{

autoPlay:false,

controlBarBackgroundColor:’0x3299CC’,

showMenu: false,

showFullScreenButton:true,

showWatermark:’always’,

watermarkUrl:’water01.png’,

watermarkLinkUrl:’http://.com’,

loop:false,

autoRewind:false,

autoBuffering:true,

useNativeFullScreen: true,

initialScale: ‘fit’

}

Joscasan
Publicado: 11/02/2010 6:23 am

Buenas tardes…

Resulta que utilizo swfobject 2.2 para cargar una serie de videos en una página que estoy haciendo de prueba. Hasta entonces yo llamaba al video de la siguiente forma:

Se supone que debe aparecer el video

var flashvars = {file: “video.flv”};
var params = {
allowfullscreen: “true”,
allowscriptaccess:”always”,
};
var attributes = {};
swfobject.embedSWF(“videos/player.swf”, “container_video1”, “320”, “265”, “9.0.0”,”expressInstall.swf”, flashvars, params, attributes);

Esto me muestra el video perfectamente, pero con el player habitual de macromedia. Me gustaría que me cargara el flowplayer pero cuando sustituyo player.swf por flowplayer.swf (que está en la misma carpeta), me genera un error. Al principio llamo al “js/swfobject.js”.

El error que me da es el “300: error al inicializar el player: type error #1009. A

Alguien me podría ayudar con ello.

Un saludo.

Clark Kent
Publicado: 10/04/2010 1:07 pm

bueno yo lo instale y me funciono de maravilla, con los videos y videos de publicidad fantastico…
solo tengo un problema que no eh resuelto, como inserto una imagen para que cuando carge la pagina no este el fundo negro del player…
saludos y muchas gracias…

Clark Kent
Publicado: 10/04/2010 2:11 pm

estimados amigos saben ya pude insertar la imagen…
ahora lo que estoy buscando no se si sea posible es lo siguiente:

se puden ver las listas de reproduccion a un lado del player,
es decir con una imagen y seleccionar el video a voluntad…gracias..

Neilo
Publicado: 25/06/2010 9:45 am

Hola, excelentes comentarios, esto es una buena herramienta de ayuda.
mi pregunta es la siguiente: yo tengo funcionando perfectamente el player pero quisiera que se mostraran los videos de forma aleatoria para que no siempre tenga la misma secuencia, qué debo hacer?

el script es el siguiente:

<param name="flashvars" value="config={

showPlayList: true,

showPlayListButtons: true,

videoHeight: 240,

loop: true,

autoPlay:true,

initialScale: 'fit',

playList: [ video1, video2, video3…]

diego
Publicado: 26/08/2010 10:07 am

buenas yo tengo un problema cargo mis videos en mi servidor pero no se muestran hasta que se carguen lo cual es molesto aver si me ayudas quiero que se puedan ver los videos mientras van cargando ya que algunos videos son muy largos

Juan
Publicado: 24/07/2011 8:34 pm

Hola mira ya logre que el script trabajara lo que no logoro es insertarlo en wordpress
Lo configure con Google Adsense Video puedes ver una muestra en http://ecine.in/videos/1.html

Espero me puedan ayudar a saber como insertarlo en wordpress

daniel aguilar
Publicado: 24/02/2013 9:30 am

hola a todos necesito ayuda, dos semanas anteriores solicite a google adsense videos su aprovacion y me an aseptado
pero tengo problemas para implementarlo el el reproductor jw

Marta
Publicado: 27/04/2013 10:19 am

Hola,

Y para introducir el código en Blogger como sería?

Me gustaría introducirlo para poner un video RTMP

gracias!

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)