Bueno avanzando con este articulo sobre jPlayer este reproductor HTML 5 y JavaScript de Audio y Video para webs, ya que en el anterior articulo les enseñe a usar lo basico para poder implementarlo de manera individual, ahora les enseñare a implementarlo con Listas de Reproducción tanto para Audio como para Video
Ahora bien jPlayerPlaylist es una Extension o Add-on como lo menciona el autor, dado que no viene integrado en el código de la versión simple de jPlayer, pero que podemos utilizar incluyendo el archivo js, dependiendo el uso que le vallamos a dar a este plugin.
Empecemos, bien primero que nada debemos de tener nuestras pistas ya definidas, bueno en este caso yo utilizare las que salen en la web de jPlayer para poder avanzar, también les recomiendo que apliquen lo que les mostrare en una plantilla nueva ya que es mejor no saturar las demos que ya tienen ustedes hechas, así se organizaran mejor. Otra cosa que se recomienda es tener carpetas donde organizar los archivos.Manos a la Obra:
1.- Agregando el Código que debería quedar asi:
<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> <script type="text/javascript" src="/js/add-on/jplayer.playlist.min.js"></script> </head>
2.- Declarando el constructor del Reproductor (jPlayer) y de la lista de Reproducción (jPlaylist).
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1", // ESTE ES EL ID DEL DIV CONTENEDOR, PERZONALIZABLE
cssSelectorAncestor: "#jp_container_1" // ESTE ES EL ID DEL DIV CONTENEDOR, PERZONALIZABLE
}, [
{
title:"Cro Magnon Man",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
},
{
title:"Item 2",
artist:"The Stark Palace",
mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png"
}
], { playlistOptions: { enableRemoveControls: true }, swfPath: "/js", supplied: "ogv, m4v, oga, mp3", smoothPlayBar: true, keyEnabled: true, audioFullScreen: true // Allows the audio poster to go full screen via keyboard });
EXPLICACIÓN: Bien en este código:
– Se definen los selectores CSS, tanto para el reproductor como el contenedor de el playlist.
{
jPlayer: "#jquery_jplayer_1", // ESTE ES EL ID DEL DIV CONTENEDOR, PERZONALIZABLE
cssSelectorAncestor: "#jp_container_1" // ESTE ES EL ID DEL DIV CONTENEDOR, PERZONALIZABLE
}
– Se establecen el Playlist y sus elementos, en un array dentro de otro array, lo que quiere decir que el array mostrado es solo un item dentro de la lista de reproducción.
[
{
title:"The Title",
artist:"The Artist", // Opcional
free: Boolean, // Opcional - Genera acceso al tipo de audio
mp3:"MP3 URL", // Dependiendo si especificaste MP3 en SUPPLIED
oga:"OGA URL", // Dependiendo si especificaste OGA en SUPPLIED
poster: "URL de imagen Poster" // Opcional
}
]
– Y se establece la configuración general del reproductor osea el jPlayer(las que se tocaron en el articulo pasado) y del playlist.
{
playlistOptions: {
autoPlay: true, // Iniciara a reproducir el audio automáticamente.
enableRemoveControls: true // No mostrara los controles del reproductor en HTML 5
},
swfPath: "/js",
supplied: "mp3, oga"
}
— Ademas de las configuraciones anteriores tambien existen estas otras configuraciones que te pueden servir:
playlistOptions: {
autoPlay: false,
loopOnPrevious: false, // Reinicia la Reproduccion al final de la lista
shuffleOnLoop: true, // Reinicia la Reproduccion al final de la lista en orden ALEATORIO
enableRemoveControls: false, // Remueve los controles del Reproductor de Video en HTML 5
displayTime: 'slow', // Tiempo para ejecutar la anicacion Slide-up y el Slide-down cuando una nueva lista es añadida o visualizada
addTime: 'fast', // Tiempo de duracion de la animacion Slide-down cuando un nuevo Item es añadido.
removeTime: 'fast', // Tiempo de duracion de la animacion Slide-up cuando un nuevo Item es removido.
shuffleTime: 'slow' // Tiempo de duracion de la animacion Slide-up y Slide-down cuando la lista esta en Aleatorio.
}
— Hay mas opciones de configuracion para este add-on como añadir y quitar item’s a la lista de reproduccion en tiempo de ejecucion mediante javascript, mas informacion en la pagina oficial de jPlayer jPlaylist
3.- Ahora que ya tenemos los archivos js y las instancias declaradas, solo el HTML. La cual tiene más elementos justamente para el playlist, en realidad unos cuantos mas, colocare códigos para Vídeo y Audio y así resultara mas fácil la implementación.
<!-- RECUERDA QUE ESTOS ID'S SE PUEDEN CAMBIAR, PERSONALIZABLE --> <div id="jquery_jplayer_audio" class="jp-jplayer"></div> <div id="jp_container_audio" class="jp-audio" role="application" aria-label="media player"> <!-- ######################################################### --> <div class="jp-type-playlist"> <div class="jp-gui jp-interface"> <div class="jp-controls"> <button class="jp-previous" role="button" tabindex="0">previous</button> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-next" role="button" tabindex="0">next</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-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-time-holder"> <div class="jp-current-time" role="timer" aria-label="time"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> </div> <div class="jp-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> <button class="jp-shuffle" role="button" tabindex="0">shuffle</button> </div> </div> <div class="jp-playlist"> <ul> <li> </li> </ul> </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>
<!-- RECUERDA QUE ESTOS ID'S SE PUEDEN CAMBIAR, PERSONALIZABLE --> <div id="jp_container_video" class="jp-video jp-video-270p" role="application" aria-label="media player"> <div class="jp-type-playlist"> <div id="jquery_jplayer_video" 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"> </div> <div class="jp-duration" role="timer" aria-label="duration"> </div> <div class="jp-controls-holder"> <div class="jp-controls"> <button class="jp-previous" role="button" tabindex="0">previous</button> <button class="jp-play" role="button" tabindex="0">play</button> <button class="jp-next" role="button" tabindex="0">next</button> <button class="jp-stop" role="button" tabindex="0">stop</button> </div> <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-toggles"> <button class="jp-repeat" role="button" tabindex="0">repeat</button> <button class="jp-shuffle" role="button" tabindex="0">shuffle</button> <button class="jp-full-screen" role="button" tabindex="0">full screen</button> </div> </div> <div class="jp-details"> <div class="jp-title" aria-label="title"> </div> </div> </div> </div> <div class="jp-playlist"> <ul> <!-- The method Playlist.displayPlaylist() uses this unordered list --> <li> </li> </ul> </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>
Bueno finalmente si se dan cuenta en ambos bloques de códigos hay diferencias, tanto en orden como en numero de los elementos, ahora como ya habrán dado cuenta, esto es solo cuestión de LEER, este plugins y su diseño pueden ser modificados a nuestro gusto, en el siguiente articulo de jPlayer les enseñare a modificar el estilo(Skin) de este reproductor y adecuarlo a su gusto, para poder crear alguna web de streaming o algo parecido, si desean saber lo básico del plugin visiten el articulo anterior o para una amplia documentación visiten la web oficial de jPlayer Docs
Sobre el Autor
Soy un joven entusiasta, autodidacta, Técnico en Informática, comparto mi conocimiento y deseo que los demás hagan lo mismo. Únete a mi y a la comunidad y hagamos que todos aprendan con nosotros.
