[vBH] Reproductor de video para paginas Web [vBH] Reproductor de video para paginas Web
[vBH] Reproductor de video para paginas Web
Página 1 de 3 123 ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 24
  1. #1
    [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.

    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.
    Código:
    http://www.tusitio.com/flowplayer/example/index.html
    ó
    Código:
    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.

    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>
    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:
    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.

    Invitados no pueden ver imágenes en los mensajes. Por favor regístrate en el foro.



    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:

    Código 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.


    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>
    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!

  2. #2
    Este es mi reproductor con una imagen splash. Bob Marley- Could You Be Loved

  3. #3
    Gracias por tu colaboración al foro

  4. #4
    Muchas gracias maestro.
    La verdad es que esta muy guapo el tutorial.
    Saludos.

  5. #5
    ¿que conversor a flv recomiendas? ... son de pago o gratuitos?

  6. #6
    porqué no lo instalan acá para checar que tal funciona¿???
    es para todas las versiones de Vb

  7. #7
    Cita Iniciado por barcraft
    ¿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!

    Cita Iniciado por olaechea
    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 "

    Cita Iniciado por olaechea
    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.

  8. #8
    Excelete tutorial!!!!... lo probe y funciono de maravillas!!!! muchas gracias!!!!

    Cita Iniciado por Hades Ver Mensaje

    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>
    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>

  9. #9
    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.

  10. #10
    [vBH] Reproductor de video para paginas Web
    Cita Iniciado por Hades Ver Mensaje
    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?

Página 1 de 3 123 ÚltimoÚltimo

Temas similares

  1. Destroza mi blog
    Creo que nunca lo presente oficialmente, asi que como ahora no puedo hacerlo simplemente pido que lo critiquen duramente, sin sensibilidad y con el...
    Respuestas: 8
    Último mensaje: 20-ene-2010
  2. Critiquen Compu Trucos
    Quiero que critiquen mi nuevo blog Compu Trucos - Tutoriales, trucos windows, manuales gratis en todos los aspectos, diseño, contenido etc....
    Respuestas: 5
    Último mensaje: 27-nov-2009

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •