I try to control a single instance of JPlayer with 3 radio buttons, so if one button is checked, it begins to play, while the unchecked stream stops to play. The first stream is starting to play, when the page loads, but if I check one of the other 2 buttons, the first stream doesn't change. What could be the issue?
My code is the following:
<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>
These are the buttons:
<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>
And here is the player:
<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>
This code fires once when the page is loaded. There is no code fired when the checkbox is clicked. You would need a jquery click event for that https://api.jquery.com/click/.
It makes no sense to specify all the options again either if you just want to change only the media element on radio button check.
If you only have one instance of jPlayer (like in ur code above) you don't need the 'pauseOthers' func either.
$("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");
}
});