Ajax - jPlayer

scriptType

Zdravím

obraciam sa na vás s prosbou po bezúspešnom googlovaní.
Mám na webstránke viac malých pesničiek a ku každej je prehrávač s dizajnom na mieru - použitý plugin jPlayer. No momentálne sú len na pevno pridané pesničky v kóde a chcem aby sa načítavali s DB - robí mi problém JavaScript výpis všetkých pesničiek. Konkrétne mi robí problém toto:

Jeden prehrávač ku pesničke má takéto html:

Kód: Vybrať všetko

<div id="jquery_jplayer_1" class="jp-jplayer"></div>

<div id="jp_container_1" class="jp-audio">
// atď atď. - túto časť html majú rovnakú všetky prehrávače
</div>

a potom na to ID jquery_jplayer_1 sa pripojí takýto js:

Kód: Vybrať všetko

$("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                title: "Stirring of a fool",
                m4a: "http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a",
                oga: "http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg"
            });
        },
        play: function() { // To avoid multiple jPlayers playing together.
            $(this).jPlayer("pauseOthers");
        },
        swfPath: "js",
        supplied: "m4a, oga",
        wmode: "window",
        globalVolume: true,
        smoothPlayBar: true,
        keyEnabled: true
    });

a tu začína byť problém, napr. jednoducho cyklom vypíšem s DB html aké potrebujem pre každý song, ale neviem vypísať takýto JS pre každý song. Každý prehrávač potrebuje takúto časť kódu s nastaveniami. Je potreba vždy načítať Link na mp3 s DB a idcko toho playera. Ostatné nastavenia môžu byť na pevno. Chcem sa spýtať, akým spôsobom môžem ten JavaScript dostať alebo nejakým spôsobom načítať aby som ho nemusel ručne vypisovať pre každý zobrazený HTML s prehrávačom. Ďakujem

Adam

awtt · Príspevok od používateľa **awtt** » 19 apr 2014, 20:50

Normalne si vypis v cykle wrappre tych prehravacov napriklad takto:

Kód: Vybrať všetko

<div class="jp-jplayer"
  data-mp3="http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a" 
  data-ogg ="http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg" 
  title="title">
</div>

<div class="jp-jplayer"
  data-mp3="http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a" 
  data-ogg ="http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg" 
  title="title">
</div>

<div class="jp-jplayer"
  data-mp3="http://www.jplayer.org/audio/m4a/Miaow-08-Stirring-of-a-fool.m4a" 
  data-ogg ="http://www.jplayer.org/audio/ogg/Miaow-08-Stirring-of-a-fool.ogg" 
  title="title">
</div>
...

a potom ich inicializuj:

Kód: Vybrať všetko

$('[data-mp3]').each(function(){
  var $this = $(this);

   $this.jPlayer({
        ready: function () {
            $this.jPlayer("setMedia", {
                title: $this.attr('title'),
                m4a: $this.data('mp3'),
                oga: $this.data('ogg')
            });
        },
        play: function() { // To avoid multiple jPlayers playing together.
            $this.jPlayer("pauseOthers");
        },
        swfPath: "js",
        supplied: "m4a, oga",
        wmode: "window",
        globalVolume: true,
        smoothPlayBar: true,
        keyEnabled: true
    });

});

AK ti to nepojde skus prepisat:

Kód: Vybrať všetko

$this.jPlayer("setMedia", {

na

Kód: Vybrať všetko

 $(this).jPlayer("setMedia", {

a

Kód: Vybrať všetko

 $this.jPlayer("pauseOthers");

na

Kód: Vybrať všetko

$(this).jPlayer("pauseOthers");

Pretoze neviem jak jPlayer funguje a co je context v tych dvoch funkciach.

scriptType

Vďaka moc tá vychytávka s .data(...) je super!

Vďaka

Ajax - jPlayer

Ajax - jPlayer

Re: Ajax - jPlayer

Re: Ajax - jPlayer