0

I need to use multiple stream instances with jPlayer using this player. By default it didn't so I tried to make several changes but still can't get it work. First player works but it plays all the other streams together and the second player can't be triggered at all. Any idea? My code is as follows:

SCRIPT

<script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready(function(){

        var stream = {
            title: "ABC Jazz",
            mp3: "http://listen.radionomy.com/abc-jazz"
        },
        ready = false;

        jQuery("#jquery_jplayer_11").jPlayer({
            ready: function (event) {
                ready = true;
                jQuery(this).jPlayer("setMedia", stream);
            },
            pause: function() {
                jQuery(this).jPlayer("clearMedia");
            },
            error: function(event) {
                if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
                    // Setup the media stream again and play it.
                    jQuery(this).jPlayer("setMedia", stream).jPlayer("play");
                }
            },
            swfPath: "js",
            supplied: "mp3",
            preload: "none",
            wmode: "window",
            keyEnabled: true
        });

        var stream2 = {
            title: "Second",
            mp3: "http://stream.x-x-x-x.com:1234/stream"
        },
        ready = false;

        jQuery("#jquery_jplayer_12").jPlayer({
            ready: function (event) {
                ready = true;
                jQuery(this).jPlayer("setMedia", stream2);
            },
            pause: function() {
                jQuery(this).jPlayer("clearMedia");
            },
            error: function(event) {
                if(ready && event.jPlayer.error.type === jQuery.jPlayer.error.URL_NOT_SET) {
                    // Setup the media stream again and play it.
                    jQuery(this).jPlayer("setMedia", stream2).jPlayer("play");
                }
            },
            swfPath: "js",
            supplied: "mp3",
            preload: "none",
            wmode: "window",
            keyEnabled: true
        });
    });
    //]]>
</script>

HTML

<div id="jquery_jplayer_11" class="jp-jplayer" style="width: 0px; height: 0px;">
    <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
    <audio id="jp_audio_0" preload="none"></audio>
</div>

<div id="jquery_jplayer_12" class="jp-jplayer" style="width: 0px; height: 0px;">
    <img id="jp_poster_0" style="width: 0px; height: 0px; display: none;">
    <audio id="jp_audio_0" preload="none"></audio>
</div>

<div id="jp_container_1" class="jp-audio-stream">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li class="pp-li"><a href="javascript:;" class="jp-play" tabindex="1" style="">play</a></li>
                        <li class="pp-li"><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a></li>
                        <li class="mu-li"><a href="javascript:;" class="jp-mute" tabindex="1" title="mute" style="">mute</a></li>
                        <li class="mu-li"><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
                        <li class="vo-li"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume" style="">max volume</a></li>
                    </ul>
                    <div class="jp-volume-bar" style="">
                        <div class="jp-volume-bar-value" style="width: 80%;"></div>
                    </div>
                </div>
            </div>

<div id="jp_container_2" class="jp-audio-stream">
                <div class="jp-gui jp-interface">
                    <ul class="jp-controls">
                        <li class="pp-li"><a href="javascript:;" class="jp-play" tabindex="1" style="">play</a></li>
                        <li class="pp-li"><a href="javascript:;" class="jp-pause" tabindex="1" style="display: none;">pause</a></li>
                        <li class="mu-li"><a href="javascript:;" class="jp-mute" tabindex="1" title="mute" style="">mute</a></li>
                        <li class="mu-li"><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute" style="display: none;">unmute</a></li>
                        <li class="vo-li"><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume" style="">max volume</a></li>
                    </ul>
                    <div class="jp-volume-bar" style="">
                        <div class="jp-volume-bar-value" style="width: 80%;"></div>
                    </div>
                </div>
            </div>
4

1 回答 1

0

设置 cssSelectorAncestor: "#jp_container_2" cssSelectorAncestor: "#jp_container_1"

对于所有玩家和播放列表选项之后（这意味着在代码的底部）都这样

 $("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
 $("#jplayer_inspector_2").jPlayerInspector({jPlayer:$("#jquery_jplayer_2")});

对所有玩家都这样放它会起作用，如果不是意味着把所有代码都放在这里，那么我会纠正错误

于 2014-07-15T09:23:36.733 回答