Inzwischen kennen alle modernen Browser das HTML5-Videotag und können damit ohne irgendwelche Zusatzprogramme oder Plugins Videos abspielen. Hier soll kurz erklärt werden, wie das funktioniert.
Man braucht allerdings das Video in zwei verschiedenen Formaten, wenn man alle Browser abdecken möchte. Das freie Format Ogg Theora mit der Endung .ogg wird von Firefox, Opera und Chrome unterstützt, während das proprietäre Format H.264 mit der Endung .mp4 unter dem Internet Explorer, Safari, Chrome und den beiden großen mobilen Plattformen iPhone und Android läuft.
Die einfachste Version zum Einbinden eines Videos geht so:
<video src=”videobeispiel.ogg”></video>
Das würde dann aber nur mit Firefox, Opera und Chrome klappen, bei den anderen Browsern gäbe es ein leeres Fenster. Zusätzlich kann man aber einen Hinweis einbinden:
<video src="videobeispiel.ogg"> <div>Mit Firefox, Opera oder Chrome klappt das…</div> </video>
Eine bessere Lösung ist es, beide Formate zu ermöglichen, das geht so:
<video> <source src="videobeispiel.ogg" type="video/ogg" /> <source src="videobeispiel.mp4" type="video/mp4" /> </video>
Allerdings braucht man dann auch das Videobeispiel in beiden Formaten auf dem Server. Natürlich lassen sich mit den Attribute width und height Breite und Höhe und mit poster ein Standbild einstellen. Das Attribut autobuffer sorgt für eine Zwischenspeicherung für ruckelfreie Videos, mit autoplay läßt sich der sofortige Start des Videos beim Aufruf einstellen und controls blendet die Steuerelemente ein, mit denen das Video gestartet, gestoppt, pausiert und an eine andere Stelle gesprungen werden kann.
Eine umfassende Einbindung sieht dann so aus:
<video width="320" height="240" poster="standbild.jpg" autobuffer autoplay controls> <source src="videobeispiel.ogg" type="video/ogg" /> <source src="videobeispiel.mp4" type="video/mp4" /> <div>Mit einem neueren Browser, der HTML5 unterstützt, klappt das…</div> </video>
Viel Spaß beim Ausprobieren!
