Video und Audio - HTML5 - page 106

4.7.7 Weitere Attribute und Methoden des

»HTMLMediaElement«-Interfaces

Alle Medienelemente (und dazu zählt nicht nur Video, sondern auch Audio) be-
sitzen fünf gemeinsame Attribute, die im HTMLMediaElement -Interface abgebil-
det sind. Neben src als Quelle für den Mediastream sind es die boolean -Attri-
bute autoplay , loop und controls sowie preload mit seinen drei Werten none ,
metadata oder auto . Der Code zum dynamischen Erzeugen eines Videos könnte
damit so aussehen:
var video = document.createElement("VIDEO");
video.src = 'videos/bbb_240p_stereo.ogv';
video.autoplay = false;
video.loop = false;
video.controls = true;
video.preload = 'metadata';

Geladen wird dieses Video allerdings noch nicht, denn erst mit der nächsten Me-
thode des HTMLMediaElement -Interfaces, video.load() , beginnt der eigentliche
Ladevorgang. Damit wir das Video im Browser auch sehen können, müssen wir
es in den DOM-Baum einhängen. Ergänzen wir unser Listing also um zwei Zeilen:
video.load();
document.documentElement.appendChild(video);

Das dynamische Gegenstück zum oncanplay -Attribut des video -Elements un-
seres Video-Players ist ein Event-Listener mit Ereignistyp, Callback-Funktion
sowie einem Flag, das festlegt, ob das Event in der Capture -Phase aktiv werden
soll oder nicht. Verwirrt? Verwenden Sie beim dritten Argument einfach false ,
und aktivieren Sie den Event-Listener damit in der Bubbling -Phase. Wer es ge-
nau wissen will, der kann auch im Netz nachlesen: http://www.quirksmode.org/
js/events_order.html hat die Details. Unser Event-Listener hört auf das Ereig-
nis canplay und beginnt dann sogleich mit dem Abspielen des Films:

video.addEventListener("canplay", function() {
video.play();
}, false);

HINWEIS

Die HTML-Version dieses kurzen Code-Beispiels finden Sie natürlich auch on-
line:

http://html5.komplett.cc/code/chap_video/js_dynamicVideo.html