8.8kvistas

¿Qué es jPlayer?

Es un Plugin multimedia de jQuery, de codigo abierto escrito en javascript por Happyworm, multiplataforma que te permite insertar audio y video en tus paginas webs. Que tiene una amplia API la cual puede ser consultada desde su guía, ademas de tener una amplia comunidad en la cual podras resolver tus dudas.

¿Cómo Funciona?

jPlayer utiliza las nuevas tecnologias (html 5) y las ya conocidas y usadas (flash) para implementar una sola solución al momento de reproducir Audio y Video, pues utilizando javascript controla dicha reproducción ya sea con html 5 (etiqueta <audio>) o flash, esto lo hace mediante sus opciones de configuración que elige el desarrollador y deacuerdo a la disponibilidad del navegador, y utilizando jQuery y SWFObject. Asi construye la interfaz elegante que por defecto biene incluido en el paquete del plugin o se puede descargar jQuery UI y trabajar con una interfaz propia utilizando Skin.

Bueno en este pequeño manual les enseñare ha insertar y como meta trabajar con este buen plugin de jQuery basado en html 5 y/o flash, propiamente de JavaScript, el cual puede servir para muchos usos, desde las personas que solo quieren reproducir videos de muestra en sus webs site corporativas de una manera elegante, hasta los que deseas iniciar una web de reproduccion de audio y videos. Ya que es totalmente funcional con todos los navegadores actualmente presentes asi mismo con las multiples plataformas que existen.

I.- ARCHIVOS NECESARIOS

  1. Bueno primero que nada hay que descargarnos la plugin/libreria desde la pagina de descargas de la pagina oficial, osea AQUI.
    Nota: Los archivos descargados como codigo abierto tiene sus completos y minificados, asi como los editables tanto de las imagenes de los skins como archivos flash, dist/ y src/, respectivamente.
  2. Los archivos de audio y/o video, los cuales puedes obtenerlos desde la web, eso queire decir que deberias tener los links indicados( que deben terminar en «.mp3» o «.ogg» en caso de audio, «.mp4» o «.flv» en caso sea video(archivos soportados) , o la que yo prefiero tenerlos en local (en la carpeta donde estara tu proyecto).
  3. Opcional. Yo recomiendo que tengas establecido un diseño, y/o una pagina en cualquier lenguaje de programacion, donde implementar cada fragmento que ire mostrando.

II.- INSERTANDO Y ENTENDIENDO FRAGMENTOS DE CODIGO.

Debemos insertar las llamadas a los script, jQuery y jPlayer asi como sus respectivo skin.
En el caso de jQuery puedes optar por el CDN propio de jQuery o el de Google. Ustedes eligen ya que ambos siempe estaran disponibles. Tambien pueden subir la libreria a su mismo sitio, solo tendran que cambiar la url y colocar la ruta local organizado en una carpeta «js/», el archivo jquery biene en el paquete de descarga de la web de jPlayer. Ambos se colocan dentro de la etique <head>, quedaria de esta forma:

<head>
<link type="text/css" href="/skin/pink.flag/blue.monday.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
</head>

III.- AÑADIENDO EL CODIGO JAVASCRIPT Y HTML DE LA INTERFAZ DE AUDIO/VIDEO:

El siguiente codigo javascript es la creación de la interfaz visual, que se crea en cuanto el documento html este finalizado. Pasaremos a describirlo para una mejor comprensión.

Codigo javascript donde se define los objetos que se utilizaran para crear el reproductor(#jquery_jplayer_1) y su respectiva interfaz(#jp_container_1). asi como el track que se reproducira con su respectivo TITULO y FORMATOS DE REPRODUCCIÓN.. Desde la versión 1.1.0 jPlayer implemento la opción de poder asignar diferentes formatos a un mismo track, asi el usuario podra elegir que formato reproducir. Explicación en linea de codigo:

AUDIO:

<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Bubble", // Titulo del elemento a Reproducir
//Reemplazar estas URL por URL funcionales
m4a: "http://www.url1.com/audio/m4a/Miaow-07-Bubble.m4a",
oga: "http://www.url2.com/audio/ogg/Miaow-07-Bubble.ogg"
});
},
cssSelectorAncestor: "#jp_container_1", //ID del contenedor de la interfaz
swfPath: "/js", // Ruta del archivo SWF(Reproductor de Audio en flash)
supplied: "m4a, oga", // Formatos que admitira el reproductor
useStateClassSkin: true, //(Default: false): establece si se utilizara un skin personalizada o el diseno por defecto
autoBlur: false, // (Default: True) Permite controlar el foco del elemento par hacer cambios con CSS
smoothPlayBar: true, //(Default: false): Animacion de la barra de progreso al dar click para avanzar
keyEnabled: true, // (Default: false) Habilitar Atajos de Teclado
remainingDuration: true, //(Default: false) : Muestra el Tiempo Restante en GUI de Tiempo
toggleDuration: true //(Default: false) : Alterna la duracion restante al hacer click en el.
});
});
</script>

Esta es el codigo HTML de la inferfaz para Reproductor de Audio, donde pueden ver cada elemento DIV en donde se mostraran los elementos del reproductor. Quedando de esta forma:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
  <div class="jp-type-single">
    <div class="jp-gui jp-interface">
      <div class="jp-volume-controls">
        <button class="jp-mute" role="button" tabindex="0">mute</button>
        <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
      </div>
      <div class="jp-controls-holder">
        <div class="jp-controls">
          <button class="jp-play" role="button" tabindex="0">play</button>
          <button class="jp-stop" role="button" tabindex="0">stop</button>
        </div>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
        <div class="jp-toggles">
          <button class="jp-repeat" role="button" tabindex="0">repeat</button>
        </div>
      </div>
    </div>
    <div class="jp-details">
      <div class="jp-title" aria-label="title">&nbsp;</div>
    </div>
    <div class="jp-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>

VIDEO:

Ahora Explicare el codigo para Reproductor de Video  basicamente es el mismo, pero con algunas opciones en particular tanto en javascript como HTML.

<script type="text/javascript">
    $(document).ready(function(){
      $("#jquery_jplayer_1").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", {
            title: "Big Buck Bunny Trailer", // Titulo del Video
            //Reemplazar estas URL por URL funcionales
            m4v: "http://www.url1.com/video/m4v/Big_Buck_Bunny_Trailer.m4v",
            ogv: "http://www.url2.com/video/ogv/Big_Buck_Bunny_Trailer.ogv",
            poster: "http://www.url3.com/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
          });
        },
        cssSelectorAncestor: "#jp_container_1", //ID del contenedor de la interfaz
        swfPath: "/js", // Ruta del archivo SWF(Reproductor de Audio en flash)
        supplied: "m4v, ogv",
        useStateClassSkin: true, //(Default: false) Establece si se utilizara un skin personalizada o el diseno por defecto
        autoBlur: false, // (Default: True) Permite controlar el foco del elemento par hacer cambios con CSS
        smoothPlayBar: true, //(Default: false): Animacion de la barra de progreso al dar click para avanzar
        keyEnabled: true, // (Default: false) Habilitar Atajos de Teclado
        remainingDuration: true, //(Default: false) : Muestra el Tiempo Restante en GUI de Tiempo
        toggleDuration: true //(Default: false) : Alterna la duracion restante al hacer click en el.
      });
    });
  </script>

Codigo HTML del reproductor, el cual tiene mas elementos como los que estan resaltados a continuación, quedando de esta forma:

<div id="jp_container_1" class="jp-video " role="application" aria-label="media player">
  <div class="jp-type-single">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div class="jp-gui">
      <div class="jp-video-play">
        <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
      </div>
      <div class="jp-interface">
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
        <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
        <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
        <div class="jp-details">
          <div class="jp-title" aria-label="title">&nbsp;</div>
        </div>
        <div class="jp-controls-holder">
          <div class="jp-volume-controls">
            <button class="jp-mute" role="button" tabindex="0">mute</button>
            <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
          </div>
          <div class="jp-controls">
            <button class="jp-play" role="button" tabindex="0">play</button>
            <button class="jp-stop" role="button" tabindex="0">stop</button>
          </div>
          <div class="jp-toggles">
            <button class="jp-repeat" role="button" tabindex="0">repeat</button>
            <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
          </div>
        </div>
      </div>
    </div>
    <div class="jp-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>

RESUMEN

Lo que hace jPlayer es dar una mejor vista a tu web con un reproductor muy versatil, solo es cuestión de dar rienda suelta a tu creatividad y habilidad manejando y configurando a tu gusto este plugin. Trabajare ya con la segunda parte del manual que incluira Listas de Reproducción y Multiformatos. Asi como trabajar con un Skin Personalizado en la Tercera parte de este manual.

 

Shares

Share