Information Technology Reference
In-Depth Information
HINWEIS
Das Video wurde dankenswerterweise von YouTube-User
pos315
zur Verfügung
gestellt, mittels
ffmpeg
in
WebM
konvertiert und dabei auf 320 x 240 Pixel ver-
kleinert. Das Original finden Sie im Internet unter:
http://www.youtube.com/watch?v=NmdHx_7b0h0
Im Gegensatz zu Bildern, die bisher immer über die JavaScript-Methode
new
Image()
ihren Weg in den Canvas gefunden haben, bauen wir den Schwenk als
video
-Element direkt in der HTML-Seite ein. Als Zusatzattribute benötigen wir
preload
zum Vorladen,
oncanplay
als Event-Listener, der uns den Zeitpunkt lie-
fert, zu dem wir die Postkarte layouten und das Starten und Stoppen vorberei-
ten können, sowie eine
style
-Anweisung zum Verstecken des eingebetteten
Originalvideos. Dieses benutzen wir nur dazu, um während des Abspielens in
kurzen Intervallen den aktuellen Video-Frame auf den Canvas zu kopieren. Der
alternative Text für Browser ohne Videounterstützung weist noch kurz auf den
Inhalt des Videos hin.
<video src="videos/yosemite_320x240.webm"
preload="auto"
oncanplay="init(event)"
style="display:none;"
>
Rundblick vom Taft Point aus ins Yosemite Valley
</video>
Um sicherzustellen, dass die Funktion
init(event)
beim Verweis im
oncanplay
-
Attribut auch tatsächlich existiert, setzen wir das
script
-Element vor unser
video
-Element. Der schematische Aufbau dieser zentralen Funktion, die so-
wohl das Layout als auch die Funktionalität der Videopostkarte implementiert,
ergibt sich damit folgendermaßen:
var init = function(evt) {
// Referenz zum video-Element speichern
// Hintergrundbild erzeugen
image.onload = function() {
// Hintergrundbild zeichnen
// Titel hinzufügen
// ersten Frame zeichnen
canvas.onclick = function() {
// Starten und Stoppen implementieren
// beim Abspielen Video-Frames kopieren
// beim Abspielen regelmäßig Icons erzeugen
};
}
};
