带有单选按钮问题的 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

此代码在页面加载时触发一次。单击复选框时不会触发任何代码。 https://api.jquery.com/click/.

需要一个 jquery 点击事件

如果您只想更改单选按钮检查时的媒体元素，则再次指定所有选项也没有意义。

如果你只有一个 jPlayer 实例（就像你上面的代码），你也不需要 '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/

带有单选按钮问题的 JPlayer 流

JPlayer stream with radio buttons issue

javascript

html

radio-button

jplayer