HTML 5 Video Api

[heinetz]

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

[Richard Rüfenacht]

Hallo heinetz

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.

Ein Video ist keine Animation! Eine Animation kann viel besser gesteuert werden.

Frage in die Runde: Kriege ich den Film dazu exakt bei Sekunde 6 zu stoppen?

Beim HTML5 Video-Element mit dem EventListener dürfte das kaum zu schaffen sein. Es gibt HTML5-Player, die einzelne Frames genau ansteuern können und sich problemlos einbinden lassen. Das ist aber vermutlich nicht der Sinn der Sache.

Du könntest das Video in einzelne Sequenzen schneiden und dann die verschiedenen Videos starten. Die Schwierigkeit dabei ist, dass nicht alle Browser beim letzten Bild stehen bleiben.

Mit besten Grüssen
Richard

[heinetz]

Hallo heinetz

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.

Ein Video ist keine Animation! Eine Animation kann viel besser gesteuert werden.

Ich weiss und ich wäre auch nicht auf die Idee gekommen, eine Animation aus einem Video zu bauen weil sich bei einer konventionellen Animation mit entweder CSS und/oder Flash die Frage nicht gestellt hätte. Nun ist das aber alles so aufgebaut und es zeigt sich, a) dass es nicht funktioniert aber auch b) sehr genau, an welcher Stelle es hakt.

Frage in die Runde: Kriege ich den Film dazu exakt bei Sekunde 6 zu stoppen?

Beim HTML5 Video-Element mit dem EventListener dürfte das kaum zu schaffen sein. Es gibt HTML5-Player, die einzelne Frames genau ansteuern können und sich problemlos einbinden lassen. Das ist aber vermutlich nicht der Sinn der Sache.

Wenn Du damit einen JS bzw jQ - Video-Player meinst und der genau das Problem löst, nämlich ein Video genauso reibungslos aber exakt von Frame bis Frame abspielt, wäre das Problem ja gelöst. Also warum nicht Sinn der Sache.

Du könntest das Video in einzelne Sequenzen schneiden und dann die verschiedenen Videos starten.

Genau das bzw. so etwas ähnliches war meine Idee, um die "Kuh vom Eis" zu kriegen.

In meinem Versuchsaufbau zeigt sich, dass ich das Video nicht BEI exakt z.b. Frame 150 (Sekunde 6) anhalten kann, sondern erst wenn der Eventlistener mir NACH Frame 150 ein Zeichen gibt...

Ich muss also dafür sorgen, dass das in dem Video NACH Frame 150 und BIS der Listener von dem Event "gehört" hat nichts passiert. Das könnte ich indem ich die einzelnen Sequenzen im Video nicht nahtlos aneinanderreihe, sondern, wie Du sagst, in einzelne MP4 aufteile oder Pausen einbaue.

Die Schwierigkeit dabei ist, dass nicht alle Browser beim letzten Bild stehen bleiben.

Sondern? Weiterlaufen, obwohl das Video zuende ist oder vorher stehen bleiben?

Interessant daran finde ich übrigens zu sehen, wie ein Eventlistener funktioniert und dass der Ereignisse nicht just_in_time erfasst, sondern regelmässig prüft, ob ein Ereignis bereits eingetreten war.

Mit besten Grüssen
Richard

Danke!

Ich bin mir immernoch nicht sicher, ob nicht ausser diesem, für den die Lösung einfach zu sein scheint, noch weitere Fallstricke lauern. Bevor ich mich daran setze, das umzuschreiben und konventionell zu lösen, will ich es gerne ausprobieren.

gruss, heinetz

[Richard Rüfenacht]

Hallo heinetz

In meinem Versuchsaufbau zeigt sich, dass ich das Video nicht BEI exakt z.b. Frame 150 (Sekunde 6) anhalten kann, sondern erst wenn der Eventlistener mir NACH Frame 150 ein Zeichen gibt...

Du könntest nach $video.pause(); das Video mit so etwas wie $video.currentTime = 6.000; auf den exakten Frame zurücksetzen. Das führt zwar zu einem Ruckeln, zeigt aber zumindest den korrekten Frame an.

Mit besten Grüssen
Richard