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
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
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 .
/* 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%.
The problem has been solved, I found the solution here: link