JPlayer-Stream mit Optionsfeldern Ausgabe

Question

Ich versuche, eine einzige Instanz von JPlayer mit 3 Optionsfeldern zu steuern. Wenn also eine Schaltfläche aktiviert ist, beginnt sie zu spielen, während der ungeprüfte Stream nicht mehr abgespielt wird. Der erste Stream beginnt zu spielen, wenn die Seite geladen wird, aber wenn ich eine der anderen 2 Tasten überprüfe, ändert sich der erste Stream nicht. Was könnte das Problem sein?

Mein Code ist folgende:

<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> 

Dies sind die Tasten:

<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> 

Und hier ist der Spieler:

<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

Dieser Code wird einmal ausgelöst, wenn die Seite geladen. Wenn das Kontrollkästchen angeklickt wird, wird kein Code ausgelöst. Sie würden ein jquery click-Ereignis für das https://api.jquery.com/click/ benötigen.

Es macht auch keinen Sinn, alle Optionen erneut zu spezifizieren, wenn Sie nur das Medienelement beim Radiobutton-Check ändern möchten.

Wenn Sie nur eine Instanz von jPlayer haben (wie im obigen Code), benötigen Sie auch nicht die Funktion 'pauseOther'.

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