ラジオボタンの付いたJPlayerストリーム

Question

3つのラジオボタンでJPlayerの1つのインスタンスを制御しようとしているので、チェックされていないストリームの再生が停止している間に1つのボタンが再生されます。 ページが読み込まれたときに、最初のストリームが再生を開始していますが、他の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

ページがある場合は、このコードは、一度発射ロードされる。チェックボックスをクリックすると、コードは実行されません。そのhttps://api.jquery.com/click/のjqueryクリックイベントが必要です。

ラジオボタンチェックでメディア要素だけを変更したい場合は、すべてのオプションを再度指定することは意味がありません。

jPlayerのインスタンスが1つしかない場合（上記のurコードのように）、 'pauseOthers'関数は必要ありません。

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