Video und Audio - HTML5 - page 98

Die Breiten- und Höhenangaben dienen zu Demonstrationszwecken und ver-
größern das nach dem Download von ursprünglich 854 x 480 auf 428 x 240 ver-
kleinerte Originalvideo wieder auf 854 x 480 Pixel. Warum? Erstens eignet sich
die verkleinerte Version mit ihren 39 Mbyte besser zum Testen als das Origi-
nalvideo mit 160 Mbyte, und zweitens kann durch das explizite Setzen der Attri-
bute width und height 80 % des knappen HTMLVideoElement -Interfaces erklärt
werden. Dieses besteht nämlich lediglich aus vier Attributen für die Dimension
des Videos sowie einem weiteren Attribut für die URL des Posterframes, sofern
vorhanden.
Unter der Voraussetzung, dass die Variable video eine Referenz auf unser
video -Element enthält, ergeben sich folgende Attributwerte:
video.width = 854 (angegebene Breite)
video.height = 480 (angegebene Höhe)
video.videoWidth = 428 (Originalbreite)
video.videoHeight = 240 (Originalhöhe)
video.poster = URL zu bbb_poster.jpg (Posterframe)
Diese fünf Attribute reichen natürlich nicht aus, um unseren Player zu realisie-
ren, und tatsächlich sind sie auch nur Zusatzattribute des HTMLVideoElements ,
das zugleich ein HTMLMediaElement repräsentiert - jenes Objekt, hinter dem sich
alle nötigen Methoden und Attribute verstecken. Neugierige finden es in der
Spezifikation unter:
http://www.w3.org/TR/html5/video.html#htmlmediaelement
Mit oncanplay beginnt die eigentliche Arbeit, verweist es doch auf jene Java-
Script-Funktion, die ausgeführt werden soll, sobald der Browser das Video
abspielen kann. Ohne auf weitere Details vorzugreifen - in initControls() pas-
siert vorerst nur eins: Es wird eine Referenz auf das Video erzeugt und in der
globalen Variable video gespeichert. Im Zuge der Implementierung unseres
Players werden wir initControls() noch öfter um Einträge ergänzen müssen,
jetzt reicht aber folgender Code:
var video;
var initControls = function() {
video = document.querySelector("VIDEO");
};
Die Methode document.querySelector() ist Teil der CSS Selectors API und liefert
uns in der Variablen video eine Referenz auf das erste video -Element im Doku-