JPlayer流單選按鈕問題

Question

我試圖用3個單選按鈕來控制JPlayer的單個實例，所以如果一個按鈕被選中，它就開始播放，而未選中的流停止播放。 第一個流開始播放，當頁面加載時，但如果我檢查其他2個按鈕之一，則第一個流不會更改。可能是什麼問題？

我的代碼如下：

<script> 
$(document).ready(function(){ 

    if(document.getElementById('blue').checked) { 
    //Blue radio button is checked 
     $("#jquery_jplayer_1").jPlayer({ 
      ready: function (event) { 
       $(this).jPlayer("setMedia", { 
        mp3:"http://s6.voscast.com:10522/;stream/1" 
       }).jPlayer("play"); // Attempts to Auto-Play the media; 
      }, 
      play: function() { // To avoid both jPlayers playing together. 
      $(this).jPlayer("pauseOthers"); 
      }, 
      swfPath: "js", 
      supplied: "mp3", 
      wmode: "window", 
      smoothPlayBar: true, 
      keyEnabled: true 
      }); 
    }else if(document.getElementById('orange').checked) { 
    //Orange radio button is checked 
     $("#jquery_jplayer_1").jPlayer({ 
     ready: function (event) { 
      $(this).jPlayer("setMedia", { 
       mp3:"http://stream.tilos.hu/tilos_32.mp3" 
      }).jPlayer("play"); // Attempts to Auto-Play the media; 
     }, 
     play: function() { // To avoid both jPlayers playing together. 
     $(this).jPlayer("pauseOthers"); 
     }, 
     swfPath: "js", 
     supplied: "mp3", 
     wmode: "window", 
     smoothPlayBar: true, 
     keyEnabled: true 
     }); 
    }else if(document.getElementById('purple').checked) { 
    //Purple radio button is checked 
     $("#jquery_jplayer_1").jPlayer({ 
     ready: function (event) { 
      $(this).jPlayer("setMedia", { 
       mp3:"http://mr-stream.mediaconnect.hu/4738/mr2.mp3" 
      }).jPlayer("play"); // Attempts to Auto-Play the media; 
     }, 
     play: function() { // To avoid both jPlayers playing together. 
     $(this).jPlayer("pauseOthers"); 
     }, 
     swfPath: "js", 
     supplied: "mp3", 
     wmode: "window", 
     smoothPlayBar: true, 
     keyEnabled: true 
     }); 
    } 
}); 
</script> 

這些按鈕：

<div id="radiobox"> 
     <div class="cc-selector"> 
      <input checked="checked" id="blue" type="radio" name="rtype" value="blue" /> 
      <label class="radio-cc blue" for="blue"></label> 
      <input id="orange" type="radio" name="rtype" value="orange" /> 
      <label class="radio-cc orange"for="orange"></label> 
      <input id="purple" type="radio" name="rtype" value="purple" /> 
      <label class="radio-cc purple"for="purple"></label> 
     </div> 
</div> 

，這裏是玩家：

<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
     <div id="jp_container_1" class="jp-audio-stream"> 
      <div class="label"></div> 
       <div class="jp-type-single"> 
        <div class="jp-gui jp-interface"> 
         <ul class="jp-controls"> 
          <li><a href="javascript:;" class="jp-play" tabindex="1" id="playBtn"></a></li> 
          <li><a href="javascript:;" class="jp-pause" tabindex="1"id="stopBtn"></a></li> 
         </ul> 
        </div> 
       </div> 
     </div> 

Answer 1

此代碼閃光一次，當頁面加載。單擊複選框時不會觸發代碼。你需要一個jQuery點擊事件https://api.jquery.com/click/。

如果您只想更改單選按鈕檢查中的媒體元素，則再次指定所有選項是沒有意義的。

如果你只有一個jPlayer實例（就像上面的代碼一樣），你也不需要'pauseOthers'func。

$("input#blue").click(function(){ 
streamSrc = "http://s6.voscast.com:10522/;stream/1"; 

//Makes sure we don't set media again if already set to the correct one 
if ($("#jquery_jplayer_1").data().jPlayer.status.src != streamSrc) 
{ 
     $("#jquery_jplayer_1").jPlayer("setMedia", {mp3: streamSrc}).jPlayer("play"); 
} 
}); 

$("input#orange").click(function(){ 
streamSrc = "http://stream.tilos.hu/tilos_32.mp3"; 

//Makes sure we don't set media again if already set to the correct one 
if ($("#jquery_jplayer_1").data().jPlayer.status.src != streamSrc) 
{ 
     $("#jquery_jplayer_1").jPlayer("setMedia", {mp3: streamSrc}).jPlayer("play"); 
} 
}); 

$("input#purple").click(function(){ 
streamSrc = "http://mr-stream.mediaconnect.hu/4738/mr2.mp3"; 

//Makes sure we don't set media again if already set to the correct one 
if ($("#jquery_jplayer_1").data().jPlayer.status.src != streamSrc) 
{ 
     $("#jquery_jplayer_1").jPlayer("setMedia", {mp3: streamSrc}).jPlayer("play"); 
} 
}); 

http://jsfiddle.net/chq6uu16/18/