1Likes
Esta es una discusión para el tema [vBH] Reproductor de video para paginas Web en el foro Tips y tutoriales, bajo la categoría Recursos para vBulletin (Descargas); 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 ...
Página:
URL del LinkBack
Acerca de los LinkBacks
[vBH] Reproductor de video para paginas Web
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.
PersonalizaciónOtro importante inconveniente con YouTube es que realmente no se puede hacer mucho con el reproductor de YouTube. Flowplayer es una alternativa mucho mejor.
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.óCódigo:http://www.tusitio.com/flowplayer/example/index.html
Si corre un video con una animación es que ya lo tenemos instalado.Código:http://www.tusitio.com/foro/flowplayer/example/index.html
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.
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.Código 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>
6. Para transformarlo a BBcode nos vamos a Admincp -> Codigos BB -> Agregar nuevo código BB.
Titulo: Flowplayer
Etiqueta: flow
Reemplazar:Código 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:
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.Código HTML:<img src="flowplayer/milogo.jpg" alt="Mi video" />
Listo ya tenemos nuestro reproductor con una imagen personalizada.Código 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>
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!
Re: [vBH] Reproductor de video para paginas Web
Existen muchos programas donde los puedes convertir. por ejemplo si pones en google "convertidor a flv" te saldran infinidades de programas!Iniciado por barcraft
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"
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.
Re: [vBH] Reproductor de video para paginas Web
Excelete tutorial!!!!... lo probe y funciono de maravillas!!!! muchas gracias!!!!
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
Código 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>
Re: [vBH] Reproductor de video para paginas Web
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.
Re: [vBH] Reproductor de video para paginas Web
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?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.
Re: [vBH] Reproductor de video para paginas Web
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.
Re: [vBH] Reproductor de video para paginas Web
Entiendo que puedan hacerlo igual con otros soft, pero la idea es que no se les dé pié para hacerlo ...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.
Re: [vBH] Reproductor de video para paginas Web
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...er/video.html] pero la NUEVA 3.1.5 NO...!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.
ESpero me puedas ayudar con esto, gracias y muy bueno tu post...
Re: [vBH] Reproductor de video para paginas Web
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
Re: [vBH] Reproductor de video para paginas Web
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.
Portal
Foro
Reglamento
Traducciones
Citar