Question

我正在创建一个推荐页面，并且有许多jPlayer加载的实例。

我使用此功能初始化玩家：

initializePlayer: function (playerId,audio) {

    $("#" + playerId).jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: audio
            });
        },
        play: function() {
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "/assets/scripts",
        supplied: "mp3"
    });
},

渲染玩家的html如下所示：

<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
    <img id="jp_poster_1" style="width: 0px; height: 0px; display: none;">
    <audio id="jp_audio_1" preload="metadata" src="/assets/images/testimonials/Melva"></audio>
</div>
<div id="jp_container_1" class="jp-audio span3">...</div>

注意：我没有显示jp_container_1的内容，因为它是标准的jplayer。我根本没有调整它。

每个玩家之间的唯一区别是ids中的int和src：

<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;">
    <img id="jp_poster_2" style="width: 0px; height: 0px; display: none;">
    <audio id="jp_audio_2" preload="metadata" src="/assets/images/testimonials/Mark.mp3"></audio>
</div>
<div id="jp_container_2" class="jp-audio span3">...</div>

如果我包含初始值设定项的play部分，则不会播放它们。如果我将其排除，则所有这些游戏都会在第二个玩家jquery_jplayer_1上播放，而不会在其余玩家中播放。

我错过了什么？为什么全部链接到1玩家？

Answer 1

您似乎未设置cssSelectorAncestor值。如果你在这里阅读文档：

http://jplayer.org/latest/developer-guide/#jPlayer-option-cssSelectorAncestor

您将看到默认值为jp_container_1，这可以解释为什么他们都在同一个播放器上播放。我相信为每个玩家设置该值将使其按预期工作。

Answer 2

首先设置 cssSelectorAncestor：＆＃34; #jp_container_1＆＃34; 对于所有玩家1,2,3然后在jplayer功能的底部

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

给所有球员这样的话

只有1个jPlayer播放，但它播放全部

2 个答案: