Jplayer Playlist hinzufügen auf Kontrollkästchen aktiviert

Question

Ich möchte Playlist zu jplayer mit Kontrollkästchen hinzufügen und wenn ich das Kontrollkästchen die URL zu Jplayer Playlist hinzugefügt werden, habe ich URL, wenn ich das Kontrollkästchen Ich bekomme bestimmte URL aber ich bin nicht in der Lage fügen sie bitte MyPlaylist einem helfen sie mir, wenn ich hinzufügen, es zeigt mir undefined

//This array object  
var playList = new Array(); 

//this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" 
self.Selected= function (item) { 
var url = Voiceurl(); 
playList.push(url); 
console.log(playList); 
//this function i am calling to add to playlist 
JplayerWithPlaylist(playList) 
} 


function JplayerWithPlaylist(playList) { 
console.log(playList); 
var cssSelector = { 
    jPlayer: "#jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1" 
}; 
var options = { 
    swfPath: "./js", 
    supplied: "oga" 
}; 
var myPlaylist = new jPlayerPlaylist(cssSelector, playList, options); 
for (i = 0; i < playList.length; i++) { 

    myPlaylist.add(playList[i]) 
}; 
}; 

<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
    <div id="jp_container_1" class="jp-audio"> 
    <div class="jp-type-playlist"> 
    <div class="jp-gui jp-interface"> 
    <div class="my-row btn-group jp-controls"> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-backward jp-previous" tabindex="1"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-play jp-play" tabindex="1"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-pause jp-pause" tabindex="1"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-step-forward jp-next" tabindex="1"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-stop jp-stop" tabindex="1"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-off jp-mute" tabindex="1" title="mute"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-down jp-unmute" tabindex="1" title="unmute"></button> 
    <button href="javascript:;" class="btn btn-default glyphicon glyphicon-volume-up jp-volume-max" tabindex="1" title="max volume"></button> 
    </div> 
    </div> 
    <div class="jp-playlist"> 
    <ul class="list-unstyled"> 
    <li></li> 
    </ul> 
</div> 
</div> 

Answer 1

Bitte lesen sie http://jplayer.org/latest/demo-02-jPlayerPlaylist/.

Warum erstellen Sie eine neue Playlist für jedes Add? Dies ist sehr teuer und überschreibt einfach Ihre andere.

Erstellen Sie die Playlist beim Laden der Seite und fügen Sie sie zur Playlist hinzu, wenn das Kontrollkästchen aktiviert ist.

Es sieht so aus, als ob du eine URL auf die Playlist drückst und dann jede URL zu der Playlist hinzufügst, die falsch ist.

Die add() Methode für jPlayerPlaylist nimmt ein Objekt und nicht eine Zeichenfolge, wie es Parameter ist:

Z.B.

myPlaylist.add({ 
    title:"Your Face", 
    artist:"The Stark Palace", 
    mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3", 
    oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg", 
    poster: "http://www.jplayer.org/audio/poster/The_Stark_Palace_640x360.png" 
}); 

Auch ist item in Ihrer Funktion nicht verwendet.

Versuchen Sie folgendes:

$(function() { 
    var jPlayerPlaylistConfig = { 
     cssSelector: { 
      jPlayer: "#jquery_jplayer_1", 
      cssSelectorAncestor: "#jp_container_1" 
     }, 
     options: { 
      swfPath: "./js", 
      supplied: "oga" 
     }, 
     playlist: [] 
    }; 

    var myPlaylist = new jPlayerPlaylist(jPlayerPlaylistConfig.cssSelector, jPlayerPlaylistConfig.playList, jPlayerPlaylistConfig.options); 

    //this check box selected event, when i click on checkbox i am having item which bring the url "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg" 
    self.Selected = function() { 
     var url = Voiceurl(); 
     console.log(url); //Make sure URL actually exists 

     myPlaylist.add({ 
      mp3: url, 
     }); 
    } 
}); 

Frag mich bitte, wenn Sie weitere Hilfe benötigen.