[FRAGE] CurrentTime im Video dauerhaft aktualisieren

[oOLupusOo]

Hallo.
Ich wollte fragen, ob mir jemand bei diesen Code helfen kann, sodass die currentime dauerhaft aktualisiert wird, sobald das Video läuft. Wäre super, wenn man meinen Code als Vorlage nehmen könnte, damit ich ihn auch verstehe :d

Bei der Funktion Zeit sieht man meinen kläglichen Versuch mit der While-Schleife. Jedoch stürzt das Video ab und es entsteht eine Endlosschleife. Mit setInterval habe ich auch schon rumprobiert, ohne Erfolg.
Der Code ist echt nicht hübsch und dient jeglich als Übung ^^

function Listener(){
	document.getElementById("play").addEventListener("click",playaktion)
	document.getElementById("pause").addEventListener("click",pauseaktion)
	document.getElementById("zeit").addEventListener("click",duration)
	document.getElementById("Video").addEventListener("play",zeit)
}
function playaktion(event){
document.getElementById("Video").play()
}
function pauseaktion(event){
document.getElementById("Video").pause()
}
function duration(event){
var gesamtZeit = document.getElementById("Video").duration
var Ort = document.getElementById("duration")
var text = document.createTextNode(gesamtZeit) // gibt sekunden aus die das video hat
Ort.appendChild(text)
}
function zeit(event){
var ZeitGerade = document.getElementById("Video").currentTime
var ZeitGesamt = document.getElementById("Video").duration
	while(ZeitGerade < ZeitGesamt){
	document.getElementById("currentTime").innerHTML = document.getElementById("Video").currentTime
	}
}
window.onload = Listener

<video id="Video" src="Videos/SDP - Lied fuer die Fans von den anderen Bands.mp4" style="height:16em; width:20em;"></video></br> 
<button type="button" id="play">PLAY</button> <button type="button" id="pause">STOP</button> <button type="button" id="zeit">Zeit Anzeigen</button>
<span id="currentTime">0</span></br>
<span id="duration"></span>

- - - Aktualisiert - - -

Wie immer löst man das Problem stundenlang nicht, aber sobald man es ins Forum schreibt, schafft man es.
Die Lösung für die, die auch das Problem haben.

setInterval(function zeit(event){
var ZeitGerade = document.getElementById("Video").currentTime
var ZeitGesamt = document.getElementById("Video").duration
document.getElementById("currentTime").innerHTML = document.getElementById("Video").currentTime
},1)

Ich musste doch einfach einen Interval definieren. (Hab den Interval vorher nie genutzt )

 

[mikdoe]

Danke, dass du die Lösung zeigst.

Eine Anmerkung dazu: das ,1 heißt, jede Millisekunde wird was gemacht. Reicht da nicht jede Sekunde? Dann müsste da 1000 hin. Ich bin immer vorsichtig mit so winzigen Intervallen. Browser sind nur bis zu einem gewissen Grad belastbar.

Doku: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

Ganz sicher geht man, wenn man diesen Code kapselt und ihn sich durch setTimeout() wie gewünscht verzögert immer wieder selbst aufrufen lässt. Dann ist zumindest gewährleistet, dass der Code erst dann neu läuft, wenn der alte fertig ist.

 

[oOLupusOo]

Danke für die Antwort.

Falls ich eine Seite mache, wo ich selbst einen Videoplayer designe, dann würde ich natürlich den Intervall in Sekunden ausgeben. Hier war es nur eine Übung die ich mir abspeicher und zum später nachschauen wieder öffne.

 

[kkapsner]

Das <video> hat genau für diese Zwecke ein event: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events -> timeupdate

Darauf zu reagieren ist einfacher, stabiler und verlässlicher als ein Timeout.