jquery - jPlayer - 简化多个实例的功能

Question

我在一个音乐比赛网站上工作，该网站在同一页面上有很多 jPlayer 实例 (90)。播放器工作，但不幸的是我必须等待 5 秒到 30 秒才能加载和播放歌曲。

这是每个播放器的 jQuery 代码:

$("#jquery_jplayer_2").jPlayer({
    ready: function () {
        $(this).jPlayer("setMedia", {
            m4a: "url/contest/sounds/radioacoustik-rita.m4a",
            ogg: "url/contest/sounds/radioacoustik-rita.ogg"
        });
    },
    play: function() { // To avoid both jPlayers playing together.
        $(this).jPlayer("pauseOthers");
    },

    swfPath: "url/contest/js/Jplayer.swf",
    supplied: "m4a, ogg",
    solution: "html, flash",
            preload: 'metadata',
    cssSelectorAncestor: "#jp_container_2",  
    wmode: "window"
});

有没有办法简化这段代码并让我更快地加载所有歌曲？

编辑

好的，所以我尝试通过将一些参数传递给变量来简化代码:

 $(document).ready(function(){   

 $(".lecteur").each(function(i){
            var lecteurNum = $(this).addClass("" + (i+1));
  }); //loop through audio and assign a unique class for each

var wrapPlayer = $(".wrap-player"); 
    var classLecteur = wrapPlayer.parent().attr('class').split(' ')[1];
var newPlayerId = "jquery_jplayer_" + classLecteur; // create id jquery_player
var jpContainerId = "#jp_container_" + classLecteur; // create id for jp-container
var songPath = wrapPlayer.attr("rel"); // get url of current sound 

$("#" +  newPlayerId).jPlayer({
            ready: function () {
                    $(this).jPlayer("setMedia", {
            m4a: "http://www.url.com/" + songPath + ".m4a",
                    oga: "http://www.url.com/" + songPath  + ".ogg",
                    });
            },
            play: function() { // To avoid both jPlayers playing together.
    $(this).jPlayer("pauseOthers");
},


          swfPath: "http://www.url.com/contest/js/Jplayer.swf",
    solution: "html, flash",
    supplied: "m4a, oga",
    cssSelectorAncestor: "",
    wmode: "window"

}); 

});

它似乎有效，但所有实例一起播放同一首轨道(第一个).. 有什么解决办法吗？

Answer 1

好的，我解决了这个问题，这个功能有效:

HTML/

<div class="lecteur">
    <!--PLAYER #1-->
    <div class="wrap-player" rel="contest/sounds/lord-fauttafer">
           <div id="jquery_jplayer_<?php echo $player_id1; ?>" class="jp-jplayer"></div>
                <div id="jp_container_<?php echo $player_id1; ?>" class="jp-audio">
                    <div class="jp-type-single">
                        <div class="jp-gui jp-interface">
                            <!--section title - volume bar -->
                                <div class="wrap-volume-bar-title">
                                    <div class="jp-title">
                                        <ul>
                                            <li><?php echo $title_sound_1; ?></li>
                                        </ul>
                                    </div>
                                    <div class="wrap-volume-bar">
                                        <div class="jp-volume-bar">
                                            <div class="jp-volume-bar-value"></div>
                                        </div>
                                    </div>
                                </div>
                                <!--section controllers -->
                                <ul class="jp-controls">
                                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                    <li style="display:none"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                </ul>
                                <!--section ptogress bar -->
                                <div class="jp-progress">
                                    <div class="jp-seek-bar">
                                        <div class="jp-play-bar"> </div>
                                    </div>
                                    <div class="jp-current-time"></div>
                                    <div class="jp-duration"></div>
                                </div>
                               <div class="wrap-time-duration"></div>
                       </div>
                       <!-- end jp-UI--> 
                       <div class="jp-no-solution">
                           <span>Mise à jour requise</span>
                          Vous devez mettre à jour votre navigateur en téléchargeant la dernière version de falsh player <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                       </div>
                   </div>
               </div>
               <!-- end player1-->  
      </div>
      </div>

和 javascript :

$(document).ready(function(){

$(".lecteur").each(function(i){
            var vidNum = $(this).addClass("" + (i+1));
}); //loop and assign a unique class for each



$(".lecteur").each(function(){
    var wrapPlayer = $(".wrap-player"); 
    var classLecteur = $(this).attr('class').split(' ')[1]; //get the class number of current lecteur
    var newPlayerId = "jquery_jplayer_" + classLecteur; // create id jquery_player
    var songPath = $(this).find(".wrap-player").attr("rel"); // get url of current sound 

    $("#" +  newPlayerId).jPlayer({
            ready: function () {
                    $(this).jPlayer("setMedia", {
                            m4a: "http://url/" + songPath + ".m4a",
                            oga: "http://url/" + songPath  + ".ogg",
                    });
            },
            play: function() { // To avoid both jPlayers playing together.
    $(this).jPlayer("pauseOthers");
},


    swfPath: "http://url/contest/js/Jplayer.swf",
    solution: "html, flash",
    supplied: "m4a, oga",
    cssSelectorAncestor: "#jp_container_" + classLecteur,
    wmode: "window"

}); 

}); 


});