Problem running Jplayer when there is more than one item

Asked

Viewed 121 times

1

I have a list 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 first item, it runs the 3 that are on the same page.

Code http://jsfiddle.net/felipestoker/yNxAL/

jquery
  • 1

    Used the same class to name them all?

  • In fact, I realized that I used the same ID, inside a repeat loop. I just don’t know how to solve this =/

2 answers

4


From what I understand jPlayer, particularly for the demonstrations present on the site for multiple instances versions on the same page, they all have to be instantiated independently.

The problem is that with multiple instances we have to pass the parameter cssSelectorAncestor to jPlayer for him to work each player independently.

Example

View demo in 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 containing the CSS class jp-player.

  • Ball show, what happens is that this class jquery_jplayer_1 She’s in the loop loop, and he doesn’t change the name, so he’s repeating, what happens is I don’t know how to change it. I took the test you generated and keep repeating.

  • 1

    @Felipestoker I assume you’re generating HTML with some PHP-like language, right? If yes, the ID for each jPlayer can be generated dynamically through each passage of the cycle, but not knowing the language you are using is difficult ;)

  • Exactly, I’m using PHP. = D

  • All of this repeats http://jsfiddle.net/felipestoker/fC3E9/

  • @Felipestoker In PHP, you can manage your cycle following this example. So you get different Ids for each player.

  • updated my initial question, found a solution. Thanks. = D

  • 1

    @Felipestoker Do not put the solution in the question, you can answer your question with your solution, it can help future visitors with the same problem.

Show 2 more comments

0

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.