Problem with running Jplayer when there is more than one item

1

I have a listing of 3 audio players per page, I did all with Jplayer.

What's happening is that when I run the first item, it runs all together.

That is, if I click on the 1st item, it executes the 3 that are on the same page.

Code link

    
asked by anonymous 24.06.2014 / 03:25

2 answers

4

From what I understood jPlayer , particularly for the demos present on the site for multi-instance versions on the same page, they all have to be instantiated from independently.

The problem is that with multiple instances we have to pass the cssSelectorAncestor parameter to jPlayer so that it works independently of each player .

Example

View demo on JSFiddle

/* Por cada classe "jp-jplayer" vamos
 * instanciar um jPlayer
 */
$(".jp-jplayer").each(function() {

  var $this      = $(this),                         // colocar referência ao player em cache
      myAncestor = "#" + $this.next().attr("id");   // recolher o ID do "cssSelectorAncestor"

  $this.jPlayer({
    ready: function (event) {
        $(this).jPlayer("setMedia", {
            title: "Bubble",
            m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
        });
    },
    swfPath: "js",
    supplied: "m4a, oga",
    cssSelectorAncestor: myAncestor,    // passar a referência de ID recolhida
    wmode: "window",
    smoothPlayBar: true,
    keyEnabled: true,
    remainingDuration: true,
    toggleDuration: true
  });
});

This link to one of the jPlayer demo pages evidence, if we look at the source code, which is all instantiated with reference to unique identifiers.

In the example above, we use a code snippet to instantiate several players that contain the% css class of%.

    
24.06.2014 / 12:15
0

The problem has been solved, I found the solution here: link

    
26.06.2014 / 19:07