Сжатие потока с радиокнопками

Question

Я пытаюсь управлять одним экземпляром JPlayer с помощью 3 переключателей, поэтому, если одна кнопка отмечена, она начинает воспроизводиться, а неконтролируемый поток перестает играть. Первый поток начинает играть, когда страница загружается, но если я проверю одну из двух других кнопок, первый поток не изменится. В чем может быть проблема?

Мой код выглядит следующим образом:

<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 click для этого https://api.jquery.com/click/.

Нет смысла указывать все варианты снова, если вы просто хотите изменить только элемент мультимедиа при проверке радиокнопки.

Если у вас есть только один экземпляр jPlayer (например, в коде ur выше), вам также не нужна функция pausePothers.

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