Canvas - HTML5 - page 183

context.strokeRect(x1,0,107,80);
}
else {
window.clearInterval(running);
running = null;
}
},35);
}
};
Listing 5.4: Code zur Animation der Videopostkarte
Wie im ersten Animationsbeispiel enthält die Variable running die eindeutige
Intervall-ID von window.setInterval() und erlaubt die Steuerung der Anima-
tion. Ist running belegt, stoppen wir das versteckte Video mit video.pause() ,
beenden durch Entfernen des Intervalls das Kopieren von Frames und setzen
running wieder auf null .
Im Gegenzug starten wir beim ersten oder nächsten Klick das Video mit video
.play() und kopieren in der Callback-Funktion des Intervalls alle 35 Milli-
sekunden den aktuellen Video-Frame auf den Canvas. Das Ganze setzen wir so
lange fort, bis das Video zu Ende ist oder ein weiterer Klick auf den Canvas er-
folgt. Bei der Überprüfung, ob die aktuelle Abspielposition noch kleiner als die
Gesamtdauer des Videos ist, helfen uns die beiden Attribute video.currentTime
und video.duration des Video-Objekts in der Variablen video .
Das Zeichnen des kopierten Videos rechts oben geschieht analog zum Zeichnen
des ersten Frames. Für die Leiste mit verkleinerten Schnappschüssen ermit-
teln wir hingegen aus der Gesamtlänge des Videos und der gewünschten An-
zahl an Ausschnitten jenes Zeitintervall gap , nach dem wir den Anfasspunkt x1
mit einer kleinen Lücke tx weiter nach rechts verschieben müssen. Solange x1
denselben Wert besitzt, läuft die Animation auch beim verkleinerten Ausschnitt
mit. Wird x1 nach rechts verschoben, bleibt der letzte Frame statisch zurück
und die Animation läuft an der neuen Stelle weiter. Nach zirka 40 Sekunden
Laufzeit ist das Video beendet, zehn verkleinerte Ausschnitte sind gezeichnet,
und wir können die Sequenz durch einen Klick auf den Canvas neu starten.
So viel zu unserer Videopostkarte. Mit einem letzten Abschnitt wollen wir das
Canvas-Kapitel ausklingen lassen, wobei Themen wie Barrierefreiheit, Sicher-
heit oder Browser-Unterstützung auf dem Programm stehen.