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 - 为倍数实例简化函数

回答

相关问题