jPlayer 多个流实例答案

【问题标题】：jPlayer Multiple Stream InstancesjPlayer 多个流实例
【发布时间】：2013-07-27 12:11:27
【问题描述】：

我需要使用this 播放器在jPlayer 中使用多个流实例。默认情况下它没有，所以我尝试进行一些更改，但仍然无法使其正常工作。第一个播放器工作，但它一起播放所有其他流，第二个播放器根本无法触发。任何想法？我的代码如下：

脚本

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

【问题讨论】：

标签： jplayer

【解决方案1】：

设置 cssSelectorAncestor：“#jp_container_2” cssSelectorAncestor: "#jp_container_1"

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

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

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

【讨论】：