2013-12-09 61 views
1

我正在創建一個感言頁面,並且有多個jPlayer加載實例。只有jPlayer播放,但播放全部

我初始化玩家使用此功能:

initializePlayer: function (playerId,audio) { 

    $("#" + playerId).jPlayer({ 
     ready: function() { 
      $(this).jPlayer("setMedia", { 
       mp3: audio 
      }); 
     }, 
     play: function() { 
      $(this).jPlayer("pauseOthers"); 
     }, 
     swfPath: "/assets/scripts", 
     supplied: "mp3" 
    }); 
}, 

的渲染玩家的HTML看起來像這樣:

<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;"> 
    <img id="jp_poster_1" style="width: 0px; height: 0px; display: none;"> 
    <audio id="jp_audio_1" preload="metadata" src="/assets/images/testimonials/Melva"></audio> 
</div> 
<div id="jp_container_1" class="jp-audio span3">...</div> 

注:我不顯示的jp_container_1的內容,因爲它是標準jplayer。我沒有調整過。

每個玩家之間的唯一區別是在IDS中的int和Src:

<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;"> 
    <img id="jp_poster_2" style="width: 0px; height: 0px; display: none;"> 
    <audio id="jp_audio_2" preload="metadata" src="/assets/images/testimonials/Mark.mp3"></audio> 
</div> 
<div id="jp_container_2" class="jp-audio span3">...</div> 

如果我包括play部分初始化的,沒有一個他們一起玩。如果我排除它,所有人都會在第二個球員jquery_jplayer_1上進行比賽,而不是其他任何球員。

我錯過了什麼?爲什麼全部鏈接到1播放器?

回答

0

先設置 cssSelectorAncestor:「#jp_container_1」 所有玩家爲1,2,3,然後在的jplayer功能底部

$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")}); 
$("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")}); 

給這樣所有玩家