Hallo Forum,
ich stehe vor der Aufgabe, eine Animation zu steuern. Das besondere daran ist, dass diese Animation aus mehreren Teilen und vollständig in Form eines mp4 besteht. Das Ganze hat sich jemand mal so überlegt, dass der eine Event (bspw. einem click auf irgendwas) der Film von Frame 100-150 abgespielt werden soll, bei einem anderen Event von 250-300. Bei 25fps bedeutete das also 2 Sekunden, in denen sich so einiges bewegt. Das Ganze läuft bisher unrund und ich habe mich nun mal damit auseinandergesetzt, um zu gucken, was das Problem und was die Lösung sein könnte …
Mein Testcode sieht wie folgt aus:
$('#launch').on('click', function(){
$video = $('#video').get(0);
$video.currentTime = 4;
$video.play();
console.log($video.currentTime);
$video.addEventListener("timeupdate", function(){
console.log($video.currentTime);
if(this.currentTime>=6)$video.pause();
});
});
Die Ausgabe in der Konsole sieht so aus:
(index):163 4 (index):163 4.188322 (index):163 4.444308 (index):163 4.700294 (index):163 4.95628 (index):163 5.190934 (index):163 5.44692 (index):163 5.702906 (index):163 5.958892 (index):163 6.214878
Daran sieht man das Problem:
Ich kann den Film zwar problemlos exakt bei Sekunde 4 starten, aber nicht exakt bei Sekunde 6 anhalten. Wenn man sich den Code durchliest, ist klar warum. Der Videoplayer "sagt" mir durch den Eventhandler regelmässig, an welcher Stelle er sich gerade befindet. Aber diese Regelmässigkeit bedeutete eben in bestimmten zeitlichen Abständen.
Frage in die Runde: Kriege ich den Film dazu exakt bei Sekunde 6 zu stoppen?
ich würde mich wundern aber es wäre toll, wenn jemand weiss wie.
dank und
beste gruesse, heinetz