Tutorial: [vBH] Reproductor de video para paginas Web

imported_Ryuk

Dseda
Verificación en dos pasos desactivada
Desde
28 Feb 2009
Mensajes
1.138
Edad
32
Crédito(s)
0
Puntos
2
Flowplayer reproductor de video para paginas Web


Antes de empezar voy a aclarar que esta guia esta totalmente hecha por mi, sacando informacion de la pagina de FlowPlayer que esta a disposicion de cualquiera.

Entonces sin nada mas que decir, empezemos!

Características más destacadas

El mayor porcentaje de los contenidos de vídeo en la Internet hoy en día se encuentra alojado en YouTube. Incluso vídeos incrustados en páginas web personales o de empresa son a menudo alojados allí. El inconveniente de este enfoque es que la gente puede escapar de su sitio web a youtube.com, y el logotipo de YouTube es muy destacado y visible, aunque en realidad es su sitio y la marca que desea promover es la de nuestro propio sitio.

Otro importante inconveniente con YouTube es que realmente no se puede hacer mucho con el reproductor de YouTube. Flowplayer es una alternativa mucho mejor.
Personalización


Cada aspecto de Flowplayer puede ser ajustados para satisfacer sus necesidades. Esto incluye tanto su comportamiento y la apariencia. Usted puede estar seguro de que tu reproductor de vídeo integrado funcionará exactamente de la manera que usted quiere y que se verá bien sin distraer a los usuarios.


Plugins



Flowplayer puede extenderse con plugins. Algunos plugins te permiten, por ejemplo, cuando finalice la reproducción del video puede abrir el contenido de una pagina en HTML, o de aplicar listas de reproducción personalizadas utilizando sólo conocimientos básicos de HTML.


Scripting

Aquí es donde realmente sobresale Flowplayer. Nuestro API (Una interfaz de programación de aplicaciones o API (del inglés application programming interface) es el conjunto de funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción. Usados generalmente en las bibliotecas. Para mas características véase en Interfaz de programación de aplicaciones - Wikipedia, la enciclopedia libre).

Orientada a objetos y no sólo una simple lista de funciones, que le permite vincular funcionalidad personalizada a cada evento de reproduccion. Y si usted es un usuario de jQuery usted estará encantado por la forma transparente que Flowplayer y jQuery trabajan juntos.

Entonces al ver las características que tiene FlowPlayer vamos a la instalación.

1. Descargamos los archivos del flowplayer que dejare adjunto.
Nota: La versión a instalar es de licencia gratuita y puede ser usada por cualquiera.

2. Subimos la carpeta completa llamada “flowplayer” al directorio del foro, ejemplo /home/user/public_html/flowplayer o /home/user/public_html/foro/flowplayer

3. Luego de haber subido toda la carpeta comprobamos que se haya instalado bien, nos vamos a la sig. Dirección.
Insertar CODE, HTML o PHP:
http://www.tusitio.com/flowplayer/example/index.html
ó
Insertar CODE, HTML o PHP:
http://www.tusitio.com/foro/flowplayer/example/index.html
Si corre un video con una animación es que ya lo tenemos instalado.

4. Ahora subimos el video o los videos que queramos reproducir. (formato .flv) si no tienes videos en FLV necesitaras un convertidor de video, uno muy bueno es el Total Video Converter o si tienen otro, bueno no importa que convertidor usemos lo único que queremos un formato FLV.

5. Despues de haber subido los videos ya sea en la carpeta flowflayer o en una aparte, lo importante es saber la ruta de este, ahora vamos a colocar Html que nos mostrara el reproductor con el video.

HTML:
 <html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/nombredelvideo.flv" style="display:block;width:425px;height:300px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>
Ahora tenemos varias opciones donde colocar este video, una de ellas es usarlo en el portal, la otra si se quiere usar en un post lo podemos transformar en BBcode ya que el reproductor aparte de reproducir video de nuestro servidor, puede reproducir de otras paginas pero con la ventaja que será nuestro reproductor y no mostrara logos de otras paginas. Siempre y cuando el video de otra pagina este en formato FLV.


6. Para transformarlo a BBcode nos vamos a Admincp -> Codigos BB -> Agregar nuevo código BB.

Titulo: Flowplayer
Etiqueta: flow

Reemplazar:
HTML:
 <html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/{param}" style="display:block;width:425px;height:300px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>

Ejemplo:
[flow]nombredelvideo.flv[/flow]
Usar option: No

Listo y guardan.

7. Ahora que ya tenemos nuestro reproductor es hora de personalizarlo, por ejemplo colocarle una imagen de inicio como puede ser el logo de nuestro foro, cambiarle el la barrita que sale debajo por una que nos guste, etc.

Lo primero que vamos hacer es colocarle una imagen propia, un ejemplo de esto verlo en los demos de FlowPlayer Initial splash image (en ingles).

Entonces preparamos nuestra imagen de 425px × 300px ejemplo.




Ya que tenemos nuestra imagen la subimos a nuestro servidor por FTP donde queramos pero siempre recordando la ruta de la imagen, en este caso la voy a subir a la carpeta flowplayer hubicada donde subi el resto de los archivos del FlowPlayer, ahora solo necesitamos el código HTML que es el sig:

HTML:
 <img src="flowplayer/milogo.jpg" alt="Mi video" />
Este codigo lo colocamos en el HTML del video (visto en el paso 5 y 6) lo dejamos antes del </a> nos debería quedar asi.


HTML:
 <html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/nombredelvideo.flv" style="display:block;width:425px;height:300px;" id="player"><img src="flowplayer/milogo.jpg" alt="Mi video" /> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>
Listo ya tenemos nuestro reproductor con una imagen personalizada.

Para saber mas sobre el reproductor y sus configuración visite el demo de configuración player. Flowplayer - Flash Video Player for the Web (en ingles)

Para saber sobre los clips Flowplayer - Flash Video Player for the Web (en ingles)


Para saber mas sobre la lista de reproducción Flowplayer - Flash Video Player for the Web (ingles)


Para la configuración de plugins Flowplayer - Flash Video Player for the Web (ingles)



Tenga en cuenta que para hacer mas corta esta guía di la forma de instalacion y coloque la dirección desde la pagina oficial para configurar los plugins.

Si tienes problemas con algún paso de la instalacion y configuración solo preguntar en los post y tratare de ayudarte en lo posible.

Les recomiendo que por el momento interactúen con el reproductor sin instalar plugins, hasta que sepan todas las funciones y sepan lo que hacen.
Pero si sabes de JavaScript y te manejas en Html te invito a que vayas mas allá y compartas con nosotros tus conocimientos, que eso nos ayuda a todos.


Esta guia no infringue ningun derecho de autor ya que la informacion esta disposicion de cualquiera y la licencia de este producto es gratuita, por lo tanto puede ser usada por cualquiera.

SI deseas agregarles mas funciones, visita la pagina de FlowPlayer donde tendras acceso a todas sus caracteristicas gratuitamente, ya sea para plugins y JavaScript.

http://flowplayer.org

Espero les alla servido esta guia, ya que fue un pedido de un usuario de vBHispano y la hice con mucho gusto para quien la deseé utilizar.

Saludos y Suerte! :)
 

Braum

Alfa
Verificación en dos pasos desactivada
Desde
16 Feb 2006
Mensajes
22
Edad
49
Crédito(s)
0
Puntos
0
Gracias por tu colaboración al foro :)
 

Tize

Gamma
Verificación en dos pasos desactivada
Desde
7 Oct 2009
Mensajes
466
Crédito(s)
0
Puntos
0
Muchas gracias maestro.
La verdad es que esta muy guapo el tutorial.
Saludos.
 

barcraft

Gamma
Verificación en dos pasos desactivada
Desde
19 Nov 2009
Mensajes
305
Edad
37
Crédito(s)
0
Puntos
18
¿que conversor a flv recomiendas? ... son de pago o gratuitos?
 

olaechea

Gamma
Verificación en dos pasos desactivada
Desde
2 Ene 2008
Mensajes
363
Edad
37
Crédito(s)
0
Puntos
0
porqué no lo instalan acá para checar que tal funciona¿???
es para todas las versiones de Vb
 

imported_Ryuk

Dseda
Verificación en dos pasos desactivada
Desde
28 Feb 2009
Mensajes
1.138
Edad
32
Crédito(s)
0
Puntos
2
barcraft dijo:
¿que conversor a flv recomiendas? ... son de pago o gratuitos?
Existen muchos programas donde los puedes convertir. por ejemplo si pones en google "convertidor a flv" te saldran infinidades de programas! :)

olaechea dijo:
porqué no lo instalan acá para checar que tal funciona¿???
No creo que lo instalen aca porque fue una peticion que me hicieron hace unos dias atras, pero si te fijas deje como me quedo a mi "Este es mi reproductor con una imagen splash. Bob Marley- Could You Be Loved :):)"

olaechea dijo:
es para todas las versiones de Vb
El resultado que da el reproductor es solo HTML y por lo tanto no crea ninguna plantilla, ni interfiere con algun componente de vbulletin.
Puse la version vB4 porque me obligaba poner una version. en pocas palabras el reproductor es como cualquier otro reproductor que encuentras por la web y si deseas colocarlo en tu pagina solo pegas un codigo en HTML pero con la diferencia que este es tuyo y tienes el control de el. :)
 

barcraft

Gamma
Verificación en dos pasos desactivada
Desde
19 Nov 2009
Mensajes
305
Edad
37
Crédito(s)
0
Puntos
18
Excelete tutorial!!!!... lo probe y funciono de maravillas!!!! muchas gracias!!!!


HTML:
 <html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/nombredelvideo.flv" style="display:block;width:425px;height:300px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>
Estimado,

Me funciona todo bien, pero tiene "autoplay" cuando muestro la página del Video y solo quiero que aparezca el Video y que el propio usuario pinche "Play" para comenzar a ver.

Intenté hacerlo con el siguiente código según la documentación que lei pero no funcionó, obviamente algo está mal, espero me puedas ayudar plis xD

HTML:
<html><head><title>Titulo del video</title><script src="flowplayer/example/flowplayer-3.1.4.min.js"></script></head><body><a href="http://www.chileallin.com/videos/{param}" style="display:block;width:600px;height:375px;" id="player"></a><script language="JavaScript"><script>flowplayer("player", "flowplayer/flowplayer-3.1.5.swf", { clip:  { autoPlay: false, autoBuffering: true  } }); </script></body></html>
 

imported_Ryuk

Dseda
Verificación en dos pasos desactivada
Desde
28 Feb 2009
Mensajes
1.138
Edad
32
Crédito(s)
0
Puntos
2
barcraft el reproductor por defecto viene asi, entonces te recomiendo que sigas el paso 7. donde colocas una imagen propia de inicio ejemplo Click aqui como te daras cuenta el reproductor no avanza sin hacerle click en la imagen de bienvenida. :)
 

barcraft

Gamma
Verificación en dos pasos desactivada
Desde
19 Nov 2009
Mensajes
305
Edad
37
Crédito(s)
0
Puntos
18
barcraft el reproductor por defecto viene asi, entonces te recomiendo que sigas el paso 7. donde colocas una imagen propia de inicio ejemplo Click aqui como te daras cuenta el reproductor no avanza sin hacerle click en la imagen de bienvenida. :)
Excelente... ahi si jojojojo... lo unico q me falta es que cuando pongo el mouse sobre el video abajo el explorer me muestra el path de éste y no quiero eso ya que los usuarios no deben descargarlos... ¿como se puede configurar eso?
 

imported_Ryuk

Dseda
Verificación en dos pasos desactivada
Desde
28 Feb 2009
Mensajes
1.138
Edad
32
Crédito(s)
0
Puntos
2
barcraft para serte sincero no he visto si se puede quitar eso, pero creo que eso es lo menos que te debe importar ya que si un usuario quiere descargarlo lo va a descargar igual, ya que en la web existen muchos programas para bajar videos.

Pero de todos modos voy ver si se puede, si lo encuentro lo posteo. :)
 

barcraft

Gamma
Verificación en dos pasos desactivada
Desde
19 Nov 2009
Mensajes
305
Edad
37
Crédito(s)
0
Puntos
18
barcraft para serte sincero no he visto si se puede quitar eso, pero creo que eso es lo menos que te debe importar ya que si un usuario quiere descargarlo lo va a descargar igual, ya que en la web existen muchos programas para bajar videos.

Pero de todos modos voy ver si se puede, si lo encuentro lo posteo. :)
Entiendo que puedan hacerlo igual con otros soft, pero la idea es que no se les dé pié para hacerlo ... :D
 
N

NEURUS

barcraft el reproductor por defecto viene asi, entonces te recomiendo que sigas el paso 7. donde colocas una imagen propia de inicio ejemplo Click aqui como te daras cuenta el reproductor no avanza sin hacerle click en la imagen de bienvenida. :)
Hola Hades, soy nuevo aquí, caí después de días de busqueda con respecto al problema del autoplay en FlowPlayer, y quisiera saber cual es la forma de colocar un autoplay: FALSE sin agrgarle una imagen al comienzo y QUE FUNCIONE, cansado de hacer pruebas y pruebas no encuentro que alguien lo haya hecho bien en la net, es posible? ya que tengo una versión 1.2 de FlowPlayer que SI funciona el autoplay: FALSE [ver ejemplo aqui: http://www.publiblanes.net/video_flv/flowplayer/video.html] pero la NUEVA 3.1.5 NO...!
ESpero me puedas ayudar con esto, gracias y muy bueno tu post...
 

pnmultimedia

Curioso
Verificación en dos pasos desactivada
Desde
1 Mar 2010
Mensajes
2
Edad
73
Crédito(s)
0
Puntos
0
El tutorial es muy bueno....pero mis conocimientos no van mucho mas allá del HTML básico. Os cuento:
Tengo una página www.narua.tv y almaceno los videos en Vimeo. Estoy tratando de hacer una parte informativa y quisiera utilizar Flow Player. Descargo el programa y luego como le indico los videos que ha de reproducir?. Si me podeis echar una mano...mil gracias. PN
 

imported_Ryuk

Dseda
Verificación en dos pasos desactivada
Desde
28 Feb 2009
Mensajes
1.138
Edad
32
Crédito(s)
0
Puntos
2
Desde Vimeo es imposible utilizar Flow Player, solamente paginas donde se puedan encontrar videos en .flv y aun asi es muy probable que el Flow Player no lo reprodusca.
Voy a investigar mas si se puede utilizar algun tipo de plugins ya que los videos de Vimeo son en .mp4

Saludos.
 

pnmultimedia

Curioso
Verificación en dos pasos desactivada
Desde
1 Mar 2010
Mensajes
2
Edad
73
Crédito(s)
0
Puntos
0
Hades:Es posible que no me haya explicado bien a la hora de hacer mi consulta. Lo que yo quiero es que los videos FLV que yo genere desde Adobe Premiere Pro, los pueda reproducir en mi web con Flow Player sin necesidad de subirlos a Vimeo. Si tengo que instalar Flow en cada página donde se vaya a reproducir el archivo FLV o solo lo subo una vez a mi servidor y como le indico el archivo que quiero reproducir. Ese es mi dilema. Disculparme por la insistencia. Un saludo y gracias PN
 

imported_Ryuk

Dseda
Verificación en dos pasos desactivada
Desde
28 Feb 2009
Mensajes
1.138
Edad
32
Crédito(s)
0
Puntos
2
Ahora entiendo tu pregunta, en realidad la guia se centra especificamente en videos subidos a nuestro servidor solamente debes recordar la ruta del video en FLV que subiste por ftp, nada mas.

solo lo subo una vez a mi servidor y como le indico el archivo que quiero reproducir.
En el paso 5 indico la forma de colocar el reproductor y video, pero te lo explico de una forma mas facil.

Este es el codigo que debes de colocar despues de haber subido los archivos del flowplayer y videos al servidor.
<html> <head> <title>Titulo del video</title> <script src="flowplayer/example/flowplayer-3.1.4.min.js"></script> </head> <body> <a href="http://www.tusitio.com/flowplayer/nombredelvideo.flv" style="display:block;width:425px;height:300px;" id="player"> </a> <script language="JavaScript"> flowplayer("player", "flowplayer/flowplayer-3.1.5.swf"); </script> </body> </html>
Lo marcado en rojo es la ruta del video por ejemplo subi el video a la carpeta llamada flowplayer que esta en la raiz de mi foro.
Lo marcado en Azul es reproductor en flash que controlara el video en flv.

Lee la guia con atencion para que no tengas problemas.

Saludos.
 

felenn

Beta
Verificación en dos pasos desactivada
Desde
8 Sep 2009
Mensajes
64
Edad
34
Crédito(s)
0
Puntos
0
grandioso tutorial me gusto gracias. =)
 
A

apaloosa

hola,lo primero es decir que muy bueno el tuto.Simple y eficaz.Pero estoy atascado.He conseguido instalar un video siguiendo los pasos y todo perfecto,el problema que tengo es que una vez incluyo el video en mi pagina(con dreamweaver),esa pagina queda totalmente alterada(aunque luego en la red se ve bien) y no puedo hacer absolutamente nada,ni incluir texto,incluir celda nueva,nada.¿eso significa que cuando incluyes un video con flowplayer ya no puedes hacer nada mas?,si no es así,¿porque me pasa eso?.
muchisimas gracias.
 

Paul1978

Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
29 Sep 2008
Mensajes
326
Edad
40
Crédito(s)
0
Puntos
59
Probé hace unos dias esta guía, anda bien. Probé la versión nueva del reproductor y también funciona.

Lo único que note que más de 1 video por post/tema hace que el primer video se vea luego de apretar en la imagen y que los que le siguen al apretar la imagen te los descarga como un archivo en tu pc.

No se me ocurre como solucionar este inconveniente. ¿Alguna idea?
 

Arriba