Html5 Video

Seit im Juli bekanntgegeben wurde das XHTML 2.0 nicht mehr weiterentwickelt wird, wird über nichts anderes mehr als HTML5 geredet. Ein Boom ähnlich dem von Ajax vor einigen Jahren.  Einige ganz fanatische/begeisterte Leute haben ihre eigenen Seiten bereits umgeschrieben und auch erste HTML5 Showcase Galleries gibt es bereits.

Die neuen Elemente wie: article, aside, dialog,figure,footer,header, nav und section sind auch wirklich sinnvoll und erlauben in Zukunft einen noch schöner strukturierten code. Ein neues Element dem besonders viel Aufmerksamkeit gewidmet wird ist das neue video element, mit dem man in Zukunft bequem Filme einbinden kann. Derzeit wird dies von  Firefox (ab 3.5), Safari 4, Opera 9.52preview und Chrome 3 beta (Ogg Vorbis und H 264) unterstützt.

HTML5 Video Element

Die einfachste Variante ein Video in Zukunft einzubinden lautet:

<video src="meinfilm.ogg"></video>

Zwischen dem Tag kann man eine Nachricht platzieren, die angezeigt wird wenn ein Browser das Video Element nicht unterstützt:

<video src="meinfilm.ogg">Ihr Browser unterstützt den video tag leider nicht.</video>

HTML5 Video Attribute

Das Video Element unterstützt natürlich einige sehr nützliche Attribute:

• autoplay (true or false) – startet das Video sobald als möglich
• controls (true or false) – ein/ausblenden der Videosteuerung
• start (nummer) – angabe wo das video gestartet werden soll
• end (nummer) – angabe zu welchem zeitpunkt das video stoppen soll
• height (pixel) – höhe des videos
• width (pixel) – breite des videos
• loopstart (nummer) – definiert einen startpunkt des videos
• loopend (nummer) – definiert einen endpunkt des videos
• playcount (nummer) – gibt an, wie oft das video wiederholt werden soll
• poster (url) – Url eines Bildes, das angezeigt wird bevor das Video bereit ist
• src (url) – pfad zum Video

Ein Video das also von Haus aus stoppen und Controller haben soll würde so aussehen:

<video src="meinfilm.ogg" autoplay="false" controls="true"></video>

Javascript Play, Pause & Stop

Wem die eingebaute Videosteuerung nicht gefällt (ich finde sie sehr hübsch im Firefox) kann sich auch ganz simple eigene Buttons bauen. Dazu einfach dem Video eine ID mitgeben – und dann den button oder link per onclick event mit .play(); .pause(); und stop(); aufrufen. Einfacher gehts nicht, wobei das stoppen im Firefox offensichtlich noch nicht funktioniert. Play & Pause funkt perfekt.

<video src="meinfilm.ogg" autoplay="false" controls="false" id="myVideo"></video><input type="button" onclick="document.getElementById('myVideo').play();" value="Play" /><input type="button" onclick="document.getElementById('myVideo').pause();" value="Pause" /><input type="button" onclick="document.getElementById('myVideo').stop();" value="Stop" />

HTML 5 Video Fun

Natürlich dürfen auch ein paar Spielerein nicht fehlen. Mit ein paar CSS Anweisungen kann man ein Video auch transparent machen oder lustig verdrehen oder verzerren (nur in Firefox sichtbar).

Das neue Video Element ist also wie zu sehen wirklich klasse und erlaubt in Zusammenhang mit javscript, svg und css auch noch viel viel mehr, wie man hier oder hier sehen kann. Und auch bei YouTube gibts bereits eine HTML5 Testversion.