EGALABS
¡Dedicados con pasión al diseño y programación web!

¡Déjanos tu email! te enviaremos los últimos artículos…

@

Configurando Flowplayer flash

Fecha: lunes 11, agosto 2014  -  Categoria: Tutoriales

Comentarios: 0  -  Autor:

Flowplayer

En este nuevo tutorial explicaremos de forma clara y sencilla como configurar el flowplayer flash para hacer streaming, en este caso, pero la configuración la pueden utilizar para cualquier instancia del flowplayer flash.

Aunque las versiones HTML5 son ahora las más usadas, todavía quedan personas que optan por las versiones flash de los reproductores y es por ello que decidimos realizar este video tutorial para explicarles como configurar la versión flash del flowplayer para poder realizar streaming de video.

Lo único que se requiere es bajar el plugin rtmp de flowplayer y configurarlo de la manera correcta para poder realizar este tipo de transmisiones. Todo ello se encuentra explicado en el video más arriba. En un poco más de 30 minutos tratamos todos estos temas de la manera más amena posible para que de esa forma aún quienes no tengan mucho conocimiento de estos temas puedan seguirnos.

Debido a que el contenido en su totalidad lo encontrarás en el video más abajo aquí haremos un pequeño resumen del tema dejando plasmado el código también para que aquellos que deseen copiarlo puedan hacerlo sin problema alguno.

Lo primero que debemos hacer es obviamente descargar la versión flash del flowplayer y alojarlo en la carpeta que deseemos en nuestro servidor. Si tu sitio funciona con el CMS WordPress, en ese caso no hace falta que hagas esto pues hay un plugin específicamente diseñado para WP, lo puedes descargar desde aquí.

Una vez tienes instalado y configurado a tu gusto el flowplayer deberías descargarte el plugin RTMP para el flowplayer, esto solo si lo que vas a realizar es streaming. El plugin rtmp para el flowplayer lo descargas desde aquí al final de la página se encuentra la sección download, descárgate la versión Zip.

Alojas el plugin en tu servidor ya sea en una carpeta que nombres plugins dentro de la carpeta que contiene al flowplayer o en una carpeta paralela o superior. Lo importante es que sepas la ruta completa para llegar a él.

Una vez este todo listo hay que escribir el código necesario para llamar al flowplayer y que aparezca en el lugar donde nosotros queremos. Para llamar al flowplayer existen dos formas, lo puedes chequear en la documentación de su web; la documentación es extensa, pero te advierto que debes tener algún conocimiento mínimo de inglés para poder comprenderla. La primer forma es con un ancla es decir una etiqueta <a> y con un <div>.

Abajo en el cuadro de código dejaremos plasmada la configuración de ambas maneras, para que cada cual elija la que más les guste, no hay diferencia alguna en la forma de llamarlo, es solo cuestión de gustos. Ahora bien dentro de la configuración del flowplayer donde cargamos las opciones, que por cierto es un JavaScript, dentro del elemento plugins vamos a configurar el plugin rtmp para poder realizar streming y que se visualice sin problemas en nuestro flowplayer.

A continuación les dejo el código, en caso de desear verlo en acción pueden visitar nuestra página de ejemplos.

<html>
  <head>
    <script type='text/javascript' src='flowplayer/flowplayer-3.2.10.js'></script>
    <!-- convertimos al flowplayer en una variable para llamarlo donde queramos -->
    <script>reproFLOWPLAYER='flowplayer/flowplayer-3.2.11.swf';</script>
  </head>
  <body>
    <a id="player"></a>
    <script language="javascript">
      flowplayer("player", reproFLOWPLAYER, {
        buffering : true, // set a Player property
        },
        clip:  {
          url: 'el_nombre_de_tu_transmicion',
          live: true,
          provider: 'nombra_tu_streaming' /* unicamente recuerda que debes nombrar igual al plugin*/
        },
        canvas: {
          backgroundColor: "#c2a3b3"
        },
        plugins: {
          nombra_tu_streaming: {
            url: 'la_url_al_plugin_rtmp/flowplayer.rtmp-3.2.13.swf',
            netConnectionUrl: 'rtmp://La_url_a_tu_servidor_rtmp/la_app_que_transmite'
          }
          controls: {
            url: 'flowplayer/flowplayer.controls-3.2.11.swf',
            borderRadius: '15',
            buttonOverColor: '#bf2c2f',
            buttonOffColor: '#747474',
            tooltipColor: '#5F747C',
            progressGradient: 'medium',
            volumeSliderColor: '#c2a3b3',
            bufferGradient: 'none',
            sliderColor: '#d99193',
            timeColor: '#982023',
            bufferColor: '#99d8f9',
            buttonColor: '#61333d',
            callType: 'default',
            timeBgColor: '#e3a1a3',
            backgroundColor: '#3b5963',
            backgroundGradient: 'high',
            disabledWidgetColor: '#555555',
            tooltipTextColor: '#ffffff',
            durationColor: '#ffffff',
            sliderGradient: 'none',
            volumeSliderGradient: 'none',
            autoHide: 'true',
            progressColor: '#81869d',
            timeBorder: '1px solid rgba(0, 0, 0, 0.3)',
            volumeColor: '#99d6f9',
            height: 50,
            width: '75%',
            bottom: '30',
            play: true,
            volume: true,
            mute: true,
            time: false,
            stop: false,
            playlist: false,
            fullscreen: true,
            scrubber: true,
            opacity: 1.0
          }
        }
      });
    </script>
  </body>
</html>

Para llamarlo con un div solo reemplaza el ancla por <div> asi:

<div id="player"></div>

Bueno por el momento eso es todo, esperamos les haya gustado y sobre todo que les sea útil. Ahora el vídeo:

Si todavía no sabes como incrustar un reproductor en tu web o como configurar el flowplayer, te recordamos que tenemos hecho un tutorial, algo extenso sobre la versión flash del mismo. Tal vez nos excedimos un poco explicando cada una de las características pero intentamos que todos puedan enteder como realizarlo.

Además de ello hemos realizado una serie de videos tutoriales explicando como realizar streaming de video en vivo, indicando desde la forma en que funciona hasta la instalación del servidor y transmisión del streaming. Si lo que buscas es una guia completa que te ayude a realizarlo sigue nuestra serie de tutoriales al respecto.

Desde ya te deseamos lo mejor y nos despedimos con un abrazo grande deseando éxito en tus proyectos.

Hasta nuestra siguiente publicación.

Diego Zapata
Fundador y diseñador Web de El Galeón Argentino
Hola ¿cómo estás?, antes que nada gracias por visitarnos, espero que hayas encontrado lo que buscabas.
Como dice más arriba soy el fundador de “El Galeón Argentino”, se fundó en el año 2012 como una idea loca que tenía en la mente y hasta la fecha nos ha ido muy bien y nos hemos desarrollado mucho.
Lo que nos ayuda a crecer y mejorar cada día es que nos encanta lo que hacemos; aprovechando la ocasión te adelanto que nos encantaría trabajar contigo en algún proyecto que tengas en mente, por más loco que sea, y hacerlo realidad, pues no hay nada más lindo que ver como las ideas toman forma.
Espero que tanto nuestras publicaciones como los tutoriales que subimos a nuestro canal en YouTube sean de tu agrado pero sobre todo de mucha utilidad y valor.
Creo que no queda nada más por agregar, salvo recordarte que nos encantaría volver a saber de ti y sobre todo trabajar juntos como un equipo en el proyecto que tengas, hasta ese momento me despido deseándote mucho éxito en tus proyectos.

Los comentarios en este artículo están cerrados

El Galeón en Facebook

Copyright © 2012 - 2015 elgaleonargentino.com.ar - Todos los derechos reservados.