jPlayer - 爲倍數實例簡化函數

我正在一個音樂比賽站點上，在同一頁面上有很多jPlayer實例（90）。球員的工作，但不幸的是我必須在加載和播放歌曲之前等待5至30秒。jPlayer - 爲倍數實例簡化函數

這是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" 
});

有我的方式來簡化這個代碼，並允許我加載的所有歌曲更快？

EDIT

確定，所以我嘗試通過一些參數通入變量簡化的代碼：

$(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" 

});

}）;

它似乎工作，但所有的實例一起玩相同的軌道（第一）.. 任何解決方案？

來源

2012-07-21 user1092395

我是否理解正確的話，一個5-30s延遲一個連接問題，你想在當前播放的時候預載下一個音軌？ – Dmitriy 2012-07-24 10:06:45

是的。基本上，我在同一頁面上有90個jplayer實例;對於第一種情況它可以正常工作，但是如果我想爲exple播放播放器42，則在加載前需要太多時間。順便說一下，代碼非常大，所以我問我是否有可能只有一個函數的所有實例。（ty和對不起我的英文！） – user1092395 2012-07-24 22:28:07

是否有理由不使用[播放列表]（http://jplayer.org/latest/demo-02-jPlayerPlaylist/）？ – Dmitriy 2012-08-06 16:46:51

好吧，我解決了這個問題，該功能的工作原理：

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

}); 

}); 


});

來源

2012-08-08 15:44:21 user1092395

jPlayer - 爲倍數實例簡化函數

回答

相關問題