- Plantillas Web
- Plantillas E-commerce
- Plantillas de CMS y Blog
- Plantillas Facebook
- Constructor Web
jQuery “jPlayer”
marzo 17, 2011
Jplayer es una solución flexible y funcional para reproducir y controlar ficheros multimedia en su página web. Es compatible con HTML5 y reproduce flash en los navegadores que aún no son compatibles con HTML 5. Entre otras ventajas hay una posibilidad de personalizarla mediante HTML y CSS. Para obtener más información, visite la página web oficial http://www.jplayer.org
JavaScript
Debemos incluir framework jQuery y jplayer.min.js señalando el atributo src de la etiqueta de script a esos ficheros .js.<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script> <script type="text/javascript" src="js/jplayer.min.js"></script>Colocamos el script de inicialización en la sección <head>. Defina la lista de canciones en array myPlayList (línea 4-6). Nótese, que necesita especificar dos ficheros de audio: mp3 y ogg. Se puede utilizar cualquier herramienta de conversión de sonido para esto (por ejemplo, http://media.io)
$(document).ready(function(){ var playItem = 0; var myPlayList = [ {name:"Black Plant",mp3:"audio/black_plant.mp3",ogg:"audio/black_plant.ogg"}, {name:"Hidden",mp3:"audio/hidden.mp3",ogg:"audio/hidden.ogg"}, {name:"The Separation",mp3:"audio/separation.mp3",ogg:"audio/separation.ogg"} ]; // Local copy of jQuery selectors, for performance. var jpPlayTime = $("#jplayer_play_time"); var jpTotalTime = $("#jplayer_total_time"); $("#jquery_jplayer").jPlayer({ ready: function() { displayPlayList(); playListInit(true); // Parameter is a boolean for autoplay. }, oggSupport: true }) .jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) { jpPlayTime.text($.jPlayer.convertTime(playedTime)); jpTotalTime.text($.jPlayer.convertTime(totalTime)); }) .jPlayer("onSoundComplete", function() { playListNext(); }); $("#jplayer_previous").click( function() { playListPrev(); $(this).blur(); return false; }); $("#jplayer_next").click( function() { playListNext(); $(this).blur(); return false; }); function displayPlayList() { $("#jplayer_playlist ul").empty(); for (i=0; i " : "
HTML
Aquí se puede revisar la representación general de script HTML:
- Bubble
CSS
Incluya el tema por defecto para el jugador (player) mediante la conexión del fichero .css en la sección <head> del fichero .html&tl;link href="path/to/file/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />