Damit wir alle kurz in Erinnerungen schwelgen können, hier ein Beispiel dafür, wie man Videos klassischerweise in eine Webseite einbindet:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Eine solche Syntax ist natürlich alles andere als schön.
Aber selbst wenn man den ästhetischen Gesichtspunkt einmal außen vor lässt: Die Syntax ist in dieser Form schlichtweg zu fehleranfällig und zu komplex. In HTML5 lassen sich Videos viel einfacher einbinden. Verwendet wird dafür das video-Element.
Hier ein Beispiel dafür, wie sich eben jenes video-Element einbinden lässt:
<video src="video.ogv" width="300" height="200"> Ihr Browser ist leider nicht HTML5-kompatibel </video>
Das ist in dieser Form die einfachste Variante. Drei Attribute sind bei dieser Syntaxform allerdings entscheidend. Über src wird das einzubindende Video angegeben. Achtet hier unbedingt auf die richtige Pfadangabe. Die beiden Attribute width und height bestimmen die Breite und Höhe des Videos. Wird keiner der beiden Werte angegeben, wird das Video in seiner Originalgröße angezeigt. Notiert man nur einen der beiden Werte, wird der andere Wert vom Browser automatisch berechnet. Das autoplay-Attribut weist den Browser an, das Video automatisch zu starten, sobald die Seite geladen wurde. Dieses Attribut sollte man normalerweise nicht setzen, da die automatische Wiedergabe von den Nutzern normalerweise nicht gewünscht wird. Das gilt umso mehr für Nutzer, die mobile Endgeräte mit geringer Bandbreite einsetzen.
Ein weiteres interessantes Attribut ist controls. Verwendet man dieses, werden vom Browser native Steuerungselemente für Wiedergabe und Lautstärke angezeigt.
<video src="video.ogv" width="300" height="200" controls> Ihr Browser ist leider nicht HTML5-kompatibel </video>
Hier das Ergebnis im Browser:
Über die eingeblendete Leiste lässt sich das Video nicht nur anhalten und wieder starten, auch die Lautstärkereglung ist darin enthalten.
Ihr könnt über das poster-Attribut ein Bild angeben, das bis zum Start des Videos angezeigt wird. Verwendet wird dafür das poster-Attribut.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Ihr Browser ist leider nicht HTML5-kompatibel </video>
Achtet auch hier wieder auf die richtige Pfadangabe, damit das Bild dann tatsächlich zu sehen ist.
Vorsicht ist beim Einsatz des autoplay-Attributs geboten. Denn dieses Attribut legt fest, dass das Video automatisch abspielen soll, sobald es verfügbar ist.
<video src="video.ogv" width="300" height="200" autoplay> Ihr Browser ist leider nicht HTML5-kompatibel </video>
Hinsichtlich des Traffics kann das preload-Attribut interessant sein. Denn dieses Attribut steuert das Vorladeverhalten. Dabei kann das Attribut die folgenden Werte annehmen:
• auto – Der Browser kann die gesamte Datei vorladen.
• none – Die Datei muss nicht vorgeladen werden.
• metadata – Die Datei kann vorgeladen werden.
Fehlt das preload-Attribut, greifen die Voreinstellungen der Browser.
Videos und die Codecs
Wer sich mit dem Einbetten und der Wiedergabe von Videos in Webseiten beschäftigt, wird früher oder später auf die Problematik mit den verschiedenen Codecs stoßen. Dank dieser Codecs lassen sich Videos effizient komprimieren und dekomprimieren. Das Problem dabei: Die Browserhersteller konnten sich bis heute nicht auf ein gemeinsames Codec-Format einigen. Für HTML5 (und somit letztendlich auch für euch) bedeutet dies, dass es keine einheitlichen Codecs für Videos und Audiodateien gibt.
Für Videos haben sich mittlerweile die beiden Formate Ogg und MP4 etabliert. Daher ist man eigentlich immer auf der sicheren Seite, wenn man das Video in diesen beiden Format anbietet. Dazu weist man dem video-Element zwei source-Elemente zu.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Ihr gebt hier also die Videoquelle nicht innerhalb des video-Elements an. Stattdessen werden dort nur allgemeine Angaben zur Darstellung gemacht. Welches Video angezeigt werden soll, bestimmt man über das source-Element. Dem src-Attribut weist man das entsprechende Video zu. Hinter type folgt die Angabe, um welche Art Video es sich handelt bzw. in welchem Format das Video vorliegt.
Sind mehrere source-Elemente angegeben, wird vom Browser immer das erste Video abgespielt, das "passt". Was es mit diesem "passt" auf sich hat, wird nachfolgend beschrieben.
Welcher Browser beherrscht nun aber eigentlich welches Format? Die Antwort auf diese Frage liefert die folgende Tabelle.
| Browser | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Ab Version 9 | |
| Mozilla Firefox | Ja | |
| Google Chrome | Ja | Ja |
| Opera | Ja | |
| Safari | Ja | |
| iPhone | Ja | |
| Android | Ja |
Die Tabelle macht das Dilemma deutlich: Die Interpretation der Formate verteilt sich fast gleichmäßig auf die einzelnen Browser. Daher ist man fast schon dazu gezwungen, Videos in beiden Formaten anzugeben.
Über das media-Attribut, das ausschließlich dem source-Element zugewiesen werden darf, kann man übrigens explizit angeben, für welchen Medientyp das Video geeignet ist. Um Videos speziell für bestimmte Endgeräte anzugeben, muss dem src das media-Attribut zugewiesen werden. Über dieses media-Attribut gibt man den gewünschten Medientyp an.
Eine mögliche Anwendung für das source-Element könnte folgendermaßen aussehen:
<video width="400" height="300">
<!-- Nur für mobiele Endgeräte -->
<source src="video_mobil.ogg" media="handheld" />
<!—Alle anderen Geräte -->
<source src="video_normal.ogg" media="all" />
</video>
Hier wird anhand des media-Attributs überprüft, ob es sich um ein mobiles Endgerät handelt. In diesem Fall wird ein Video in kleinerer Größe abgespielt. Handelt es sich um ein anderes Endgerät, greift der all-Wert.
Videos sicher einbinden
HTML5 wird bekanntermaßen längst noch nicht von allen Browsern unterstützt. Das gilt natürlich auch für das video-Element. Eine Lösung bietet die Kombination verschiedener Einbindetechniken. Dabei werden die altbekannten object- und embed-Elemente mit video kombiniert. Das könnte folgendermaßen aussehen:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Auf diese Weise eingebundene Videos werden in den meisten Browsern abspielbar sein. Browser, die das video-Element kennen, greifen darauf zu. Die anderen Browser nutzen hingegen die Angaben im object- oder eben im embed-Element.
