HTML5 im Einsatz

Markus Lezaun – 20. Juli 2009

Das neue Video-Tag aus HTML5 wird seit Juli auch von Firefox unterstützt, Safari 4 und Google Chrome bieten diese Unterstützung schon etwas länger. Nach einigen internen Tests war schnell klar, das mit dem neuen Video-Tag die Videos in den Kopfgrafiken der Website von BLANKO eingebunden werden. Denn der Flash-Player, der in solchen Fällen normalerweise eingesetzt wird, glänzt nicht immer durch Performance, weshalb eine native Lösung ohne Plugins als die bessere Alternative erscheint. Für alle Browser, die die neue Methode zum Einbinden der Videos noch nicht unterstützen, kommt natürlich weiterhin eine Flash-Lösung zum Einsatz.

Video for Everybody

Die neue Website von BLANKO kommt mit noch etwas weniger Zeilen HTML-Code aus, als die Lösung von Carmen Design in dem Artikel „Video for Everybody”. Möglicher Nachteil des Lösungsweges: JavaScript wird vorausgesetzt, doch da es sich bei dem Videos im Kopf der Seite nur um Design-Elemente handelt und Benutzer mit deaktiviertem JavaScript die Seite weiterhin problemlos verwenden können, erscheint das unproblematisch.

Wie funktioniert diese Lösung nun?

<video width="940" height="360" autoplay="autoplay" loop="loop">
  <source src="/files/videos/start.ogv" type="video/ogg" />
  <source src="/files/videos/start.mp4" type="video/mp4" />
  <div id="flash_video"></div>
</video>

Es gibt derzeit zwei Videoformate: Firefox setzt beim Video-Element auf OGG-Theora, Apple hingegen präferiert in Safari 4 H.264-Video in einem MPEG-4-Container. Deswegen muss das Video in beide Formate konvertiert werden und nacheinander eingebunden werden. Hierbei hilft ffmpeg2theora, das die Umwandlung eines H.264-Videos in Theora erledigt. Kann ein Browser mit den Source-Einträgen nichts anfangen, greift er auf das innenliegende Div zu. Dieses wird mittels SWFObject durch einen Flash-Player ersetzt, der wiederum das bereits für den Safari vorbereitete H.264-Video lädt. Diese Lösung funktioniert in allen gängigen Browsern (Internet Explorer 6-8, Firefox 2-3.5, Safari 2-4).

Noch mehr HTML5

Die Website wurde, wegen des Einsatzes der Video-Tags, mit einem HTML5-Doctype erstellt, auf weitere HTML5-Nettigkeiten wie <header>, <nav> und <aside> wurde allerdings verzichtet, u.a. weil Firefox 2 es aufgrund eines Bugs nicht ohne Weiteres schafft, für ihn noch unbekannte HTML-5 Elemente zu schliessen, sobald ein Block-Element auftaucht.

Der Internet Explorer wäre ausnahmsweise mal nicht das Problem gewesen: Mit einem kleinen JavaScript kann man dem Browser aus Redmond die neuen HTML-Elemente beibringen.

Weitere Posts in