Only 1 jPlayer plays, but it plays all

Question

I am creating a testimonials page and have numerous instances of jPlayer loading.

I initialize the players with this function:

initializePlayer: function (playerId,audio) {

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

The html for rendered players look like this:

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

NOTE: I am not showing the contents of jp_container_1 because it is the standard jplayer. I have not adjusted it at all.

The only difference between each player is the int in the ids and the 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>

If I include the play portion of the initializer, none of the them play. If I exclude it, all of them play on the second player jquery_jplayer_1 and not on any of the rest.

What am I missing? Why are the all linked to the 1 player?

Answer 1

it appears that you have not set the cssSelectorAncestor value. If you read the documentation here:

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

You will see that the default is jp_container_1, which would explain why they are all playing on the same player. I believe that setting that value for each player will make it work as you expect.

Answer 2

first set the cssSelectorAncestor: "#jp_container_1" for all player as 1,2,3 then at the bottom of the jplayer functionality

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

give like this for all players