jQuery “jPlayer”

Template-help.com Team marzo 17, 2011

jQuery player

Rating: 5.0/5. From 1 vote.

Please wait...

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

"; listItem += ""+ myPlayList[i].name +"

"; $("#jplayer_playlist ul").append(listItem); $("#jplayer_playlist_item_"+i).data( "index", i ).click( function() { var index = $(this).data("index"); if (playItem != index) { playListChange( index ); } else { $("#jquery_jplayer").jPlayer("play"); } $(this).blur(); return false; }); } } function playListInit(autoplay) { if(autoplay) { playListChange( playItem ); } else { playListConfig( playItem ); } } function playListConfig( index ) { $("#jplayer_playlist_item_"+playItem).removeClass("jplayer_playlist_current").parent().removeClass("jplayer_playlist_current"); $("#jplayer_playlist_item_"+index).addClass("jplayer_playlist_current").parent().addClass("jplayer_playlist_current"); playItem = index; $("#jquery_jplayer").jPlayer("setFile", myPlayList[playItem].mp3, myPlayList[playItem].ogg); } function playListChange( index ) { playListConfig( index ); $("#jquery_jplayer").jPlayer("play"); } function playListNext() { var index = (playItem+1 = 0) ? playItem-1 : myPlayList.length-1; playListChange( index ); } });

HTML

Aquí se puede revisar la representación general de script HTML:



  
    play
      pause
      stop
      min volume
      max volume
    

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

Esta entrada fue publicada el Misc, Trabajar con scripts de jQuery y etiquetada jQuery, player. Agregar enlace permanente a marcadores.

Categories

FAQs

General Tutorials

Categories

FAQs

General Tutorials

MonsterONE Subscrioption

jQuery “jPlayer”

JavaScript

HTML

CSS

Artículos Relacionados

Submit a ticket