Hallo Experten,
ich bin in Javascript sehr neu und nutze den JWPlayer aus dem Hause Longtailvideo für eine Musiksuchmaschine. Der User kann in einer Top-Liste und Suchfunktion Lieder suchen und diese in seine Playlist hinzufügen.
Die Playlist ist nur ein div im DOM Baum und wird nicht in eine DB gepflegt oder sonstiges. Im JS Code wird nun aus dem DIV der Titel und die ID per match extrahiert und daraus dann die Playlist erstellt.
Der Player hat ein onComplete() Event welches aufgerufen wird wenn ein Titel zuende ist. In diesem Event wird die Playlist neu gematcht (der User kann ja während
dem hören den Playlistinhalt oder die Reihenfolge verändert haben) und die Position des aktuellen Titels (getPlaylistItem() des players) mit
indexOf im Array der Titel bestimmt. Daraufhin wird der nächste titel abgespielt.
Nun weiß ich nicht wie ich folgende Problematik umgehen kann:
Wenn ein Titel mehrfach in der Playlist vorhanden ist findet indexOf ja das erste Vorkommen. Immer wenn der Player dann bei dem Titel, der
mehrfach in der Playlist ist, angekommen ist springt er natürlich zum Lied nach dem ersten Vorkommen zurück.
Und wenn der aktuell abgespielte Titel gelöscht wird fängt die Playlist bei Index 0 an (wegen Zeile 47-51 im Script, wo der geklickte Titel + die PlaylistTitel aufsteigend eingetragen werden wenn der aktuelle Titel nicht oder nicht mehr in der Playlist ist.)
Jetzt die sicherlich erwartete Frage:
Wie konnte ich diese "bugs" fixen?
Vielen Dank für euere Hilfe !
Ich stell mal noch das Script in nen Codeblock:
jwplayer().onPlaylistItem(
function(){
var item = jwplayer().getPlaylistItem();
var itemx = item.title;
document.getElementById('player_titel').innerHTML = 'Sie hören: '+itemx;
}
);
jwplayer().onComplete(
function() {
var completePlaylist = document.getElementById('playlist').innerHTML;
var matches = [];
var matchesTitel = [];
matches = completePlaylist.match(/playVid\('.{11}/gi);
matchesTitel = completePlaylist.match(/,\s'.{1,40}'\);">/gi);
if(matches == null){} else {
var result = [];
for(var i = 0, il = matches.length;i < il; i++){
var string = matches[i];
result.push(string.substring(9));
}}
if(matchesTitel == null){} else {
var resultTitel = [];
for(var i = 0, il = matchesTitel.length;i < il; i++){
var stringTitel = matchesTitel[i];
var endOfTitel = stringTitel.length - 5;
resultTitel.push(stringTitel.substring(3, endOfTitel));
}}
var links = [];
var currentVidItem = jwplayer().getPlaylistItem();
var currentVidUrl = currentVidItem.file;
var currentVidShort = currentVidUrl.substring(25);
var currentVidTitel = currentVidItem.title;
if(result == null) {links.push({file:'http://www.youtube.com/v/'+currentVidShort , title: currentVidTitel});}
else if (result.indexOf(currentVidShort) != -1) {
var posInPlaylist = result.indexOf(currentVidShort);
var nextPos = posInPlaylist + 1;
if(nextPos == result.length){links.push({file:'http://www.youtube.com/v/'+result[0] , title: resultTitel[0]});}
else {links.push({file:'http://www.youtube.com/v/'+result[nextPos] , title: resultTitel[nextPos]});}
}
else {
links.push({file:'http://www.youtube.com/v/'+currentVidShort , title: currentVidTitel});
}
jwplayer().load(links);
}
);
