audio video onended

[Palmovitsch]

Ich hab ein Problem mit "onended". Ich baue gerade einen Player für die Website meiner Band. Wenn das erste Lied fertig ist, soll er das zweite abspielen. Das klappt auch. Aber wenn das zweite fertig ist, spielt er das dritte nicht ab. Kann mir jmd. helfen?



function newSong1(lisId) {
pause();
rewind();
audio = document.getElementById('audio' + lisId);
play();
$("#1").css({"color": "#AAAAAA"});
$("#2").css({"color": "#AAAAAA"});
$("#3").css({"color": "#AAAAAA"});
$("#4").css({"color": "#AAAAAA"});
$(document.getElementById(lisId)).css({"color": "#FFFFFF"});
}

audio.onended = function() {
switch(audio.id) {
case "audio1":
newSong1('2');
break;
case "audio2":
newSong1('3');
break;
case "audio3":
newSong1('4');
break;
case "audio4":
newSong1('1');
break;
}
};

 

[Sempervivum]

Du registrierst das onended-Event nur beim ersten Player. Du musst es bei allen Playern registrieren und dann brauchst Du keinen Switch, sondern musst nur immer das nächste starten.
Am einfachsten geht das mit einer Schleife:

for (var i = 1; i <= 4; i++) {
    var audio = document.getElementById("audio" + i);
    audio.onended = function(idx) {return function() {
        if (idx == 4) var nextIdx = 1; else var nextIdx = idx+1;
        var nextAudio = document.getElementById("audio" + nextIdx);
        nextAudio.play();};
        document.getElementById(nextIdx).style.color = "#FFFFFF";
    }(i);
};

Eleganter wäre es aber IMO, wenn Du nur einen Player hättest und jeweils das src-Attribut ändern würdest.

 

[Palmovitsch]

Danke für deine Antwort.
Warum brauch ich für jedes Lied einen neuen Player? Bisher hat alles mit diesem einen Player funktioniert. Jedes neue Lied wird immer wieder in der Variable "audio" gespeichert. Das funktioniert ja auch für das manuelle Aufrufen eines Liedes per Doppelklick.

Hier mal der gesamte Player falls es hilft:

$(document).ready(function(){
//prepare
var audio = document.getElementById('audio1');
var playing = false;
$("#1").css({"color": "#FFFFFF"});
//blink();

//button events
$("#playpause").click(playpause);
$("#rewind").click(rewind);

//volume events
$("#volume").click(setVolume);

//progress events
$("#progress").click(setProgress);

//playlist events
$("div#playlist ol li").hover(function(event) {
$(document.getElementById(event.target.id)).css({"background-color": "#444444"});
}, function(event) {
$(document.getElementById(event.target.id)).css({"background-color": "transparent"});
});
$("div#playlist ol li").dblclick(newSong);

function newSong(event) {
//alert("newsong");
var lisId = event.target.id;
newSong1(lisId);
}

function newSong1(lisId) {
pause();
rewind();
audio = document.getElementById('audio' + lisId);
play();
$("#1").css({"color": "#AAAAAA"});
$("#2").css({"color": "#AAAAAA"});
$("#3").css({"color": "#AAAAAA"});
$("#4").css({"color": "#AAAAAA"});
$(document.getElementById(lisId)).css({"color": "#FFFFFF"});
}

//audio.addEventListener('ended', audioEnded);

audio.onended = function() {
alert("ended");
switch(audio.id) {
case "audio1":
alert("sw1");
newSong1('2');
break;
case "audio2":
alert("sw2");
newSong1('3');
break;
case "audio3":
alert("sw3");
newSong1('4');
break;
case "audio4":
alert("sw4");
newSong1('1');
break;
}
};

//basic functions
function playpause() {
if(playing) {
pause();
} else {
play();
}
}

function play() {
playing = true,
$("#playpause").val("||");
audio.play();
updateTime();
updateProgress();
}

function pause() {
playing = false;
$("#playpause").val(">");
audio.pause();
//blink();
}

function rewind() {
audio.currentTime = 0;
}

var minute = 0;
var second = 0;
var sec = "00";
var currTime = 0;

function updateTime() {
setInterval(function() {
if(playing) {
refreshTime()
} else {
clearInterval();
}
}, 100);
}

function refreshTime() {
currTime = Math.floor(audio.currentTime);
minute = Math.floor(currTime / 60);
second = currTime % 60;
if(second < 10) {
sec = "0" + second;
}
else {
sec = second;
}
$("#time span").html(minute + ":" + sec);
}

function setVolume() {
audio.volume = $("#volume").val();
}

function updateProgress() {
setInterval(function() {
if(playing) {
$("#progress").attr("max", audio.duration);
$("#progress").val(audio.currentTime);
} else {
clearInterval();
}
}, 100);
}

function setProgress() {
audio.currentTime = $("#progress").val();
refreshTime();
}
});

 

[Sempervivum]

Darauf dass Du mehrere Player hast, bin ich wegen dieser Codezeile gekommen:

audio = document.getElementById('audio' + lisId);

Das heißt doch, dass Du verschiedene Playerelemente hast mit den IDs audio1 audio2 audio3 audio4. Verstehe ich da etwas falsch?

 

[Palmovitsch]

Ja richtig. Aber alle Elemente werden doch immer wieder in der Variable audio gespeichert. Da müsste doch audio.onended jedes mal wenn es am Ende ist ausgelöst werden, oder?

 

[Sempervivum]

Nein, leider nicht. Das Event wird nicht für die Variable registriert, sondern für das Element, das gerade in der Variablen gespeichert ist, d. h., da Du am Anfang audio1 in die Variable schreibst, wird das Event für dieses registriert. Schreibst Du eine anderes in die Variable, hat dieses keinen Listener registriert. Das erkennst Du ja daran, dass es nicht funktioniert:

Aber wenn das zweite fertig ist, spielt er das dritte nicht ab.

Daher mein Vorschlag, für alle Elemente einen Listener zu registrieren.

 

[Tronjer]

Räume erst mal den Code auf. Ein jQuery-Objekt benötigt kein document.getElement und außerdem kann man identische Methoden für mehrere Selektoren zusammenfassen, bsw. $('#a1, #a2, #a3').css().

Anschließend reduziere das Script auf den Level, der für die Problemstellung erforderlich ist. Wozu du hier ein switch-case benötigst und 10x Pro Sekunde abfragen muss, ob der Player gerade läuft, erschließt sich mir nicht. Wenn die Reihenfolge der abzuspielenden Songs vorgegeben ist, kann man diese per Array übergeben anstatt, sie aus dem DOM zu fischen.

Ich habe vor längerer Zeit mal ein Script geschrieben, das mehrere Youtube Streams in zufälliger Reihenfolge und Endlosschleife abspielt. Kannst dich ja daran orientieren.

http://jsfiddle.net/LzpbF/

 

[Palmovitsch]

Danke Sempervivum. Jetzt hab ichs verstanden.

Warum denn gleich so pampig Tronjer. Das ist das erste Mal, dass ich JQuery nutze und das zweite Mal Javascript. Das zehn mal abfragen pro Sekunden hat schon seinen Sinn. Damit wird der Slider aktualisiert, der den Fortschritt des Liedes wiederspiegelt und an anderer Stelle wird die Laufzeit aktualisiert. Aber danke auch an dich für den Tipp mit den mehreren Selektoren.