- Desde
- 28 Feb 2009
- Mensajes
- 1.138
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.
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.
ó
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.
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:
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.
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!
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ó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.html4. 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>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" />
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!
