HTML 5: Video Tag Beispiele

Der <video>-Tag ist eine Neuerung von HTML 5 und dient dazu, Filme und Videos abzuspielen. Videos können — wie Bilder mit dem <img>-Tag — direkt in eine HTML-Seite eingebettet werden. Selbstverständlich können die Videos deshalb auch mit CSS und JavaScript kombiniert werden.

Nach den ersten Video-Tag Demos mit HTML 5 wird in diesem Artikel gezeigt, wie man Videos selbst einbaut und den <video>-Tag aus HTML 5 mit aktuellen Browsern bereits einsetzen kann.

Keine Plugins, aber unterschiedliche Video-Codecs

Zum Abspielen sind mit HTML 5 keine Browser-Plugin wie z.B. Silverlight oder Flash Player nötig. Voraussetzung für den <video>-Tag ist lediglich ein aktueller Browser wie Firefox (ab 3.5) oder Safari (ab 4).

Leider wurde bisher kein gemeinsamer Nenner von den Browserherstellern gefunden, welche Video-Codecs eingesetzt werden dürfen/müssen. Die möglichen Codecs hängen deshalb vom Browser ab.

Firefox setzt auf Theora

Firefox Browser LogoFirefox kann Videos mit Theora-Codec in einem Ogg-Container (.ogv) abspielen. Der dazugehörige Ton muss als Vorbis vorliegen. Für die Tonspur wäre auch das Wave-Format möglich, das aufgrund der fehlenden Kompression jedoch in der Regel im Web wenig sinnvoll ist.

Safari kann MPEG-4

safari-browser-logoSafari hingegen setzt auf das MPEG-4-Format mit dem bekannten und effizienten Codec-Duo H.264 (Video) und AAC (Audio). Dies verspricht eine bessere Qualität als Theora, allerdings stoßen die MPEG-4-Lizenzgebühren bei den anderen Herstellern wie Opera nicht auf Gegenliebe.

Erwähnenswert: Die beschriebenen HTML 5-/Video-Features sind auch in der mobilen Safari-Version für das iPhone verfügbar und einsetzbar (ab iPhone OS 3).

Google Chrome spielt Theora und MPEG-4

Google Chrome Browser LogoGoogle Chrome unterstützt in der aktuellen Beta (ab 3.0.182.2) sowohl Theora als auch H.264. Allerdings gibt es den H.264-Support nur in der von Google selbstvertriebenen Browser-Variante (also Google Chrome), wohingegen das zugrundeliegende Open Source Projekt Chromium dies aus besagten Lizenzkosten nicht kann.

Internet Explorer noch offen

Von Microsoft gibt es bisher noch keine Informationen, wie die Firma zu diesem Thema steht. Für den IE muss deshalb ein Fallback definiert werden (siehe unten). Update: Internet Explorer unterstützt H.264.

MIME-Type für den Server

Serverseitig muss beim Progressive Download, also dem Abspielen von einem gewöhnlichen Webserver, nichts besonderes beachtet werden.

Bei Ogg-Dateien (.ogv) könnten eventuell noch serverseitige Probleme entstehen, wenn der MIME-Type für Ogg-Videos nicht gesetzt ist. Dies lässt sich jedoch beheben, wenn man eine htaccess-Datei mit dem Befehl AddType video/ogg .ogv angelegt. Hinweis: Nach dem Anlegen der htaccess-Datei zum Ausprobieren den Browser-Cache löschen!

Die Basics

Videodatei einbinden

Das erste Beispiel zeigt, wie man ein Video auf einfachste Weise einbindet. Es wird lediglich die Größe festgelegt. Der Parameter autoplay sorgt dafür, dass das Video sofort abgespielt wird.

PLAIN TEXT
XML:
  1. <video src="test.ogv" width="320" height="240" autoplay>
  2.     This browser is not compatible with HTML 5
  3. </video>

Je nach Codec-Unterstützung des Browser (siehe oben) ist sieht das Ergebnis so aus: Beispiel anschauen (Ogg-Video) bzw. Beispiel anschauen (MPEG-4)

Nicht besonders toll, wenn man jeden Browser unterschiedlich behandeln muss, oder? Doch es geht einfacher, wie das nachstehende Beispiel zeigt. Gibt man mehrere Quelldateien an, kann der Browser sich die unterstützten Formate selbst heraussuchen.

Firefox nimmt Ogg, Safari nimmt MPEG-4. Und was macht Chrome, der beides kann? Hier wird das oberste verwendet.

PLAIN TEXT
XML:
  1. <video  width="640" height="480" autoplay>
  2.     <source src="test.mp4" type="video/mp4" />
  3.     <source src="test.ogv" type="video/ogg" /> 
  4.     This browser is not compatible with HTML 5
  5. </video>

Beispiel anschauen (Ogg und MPEG-4)

Fallback für ältere Browser

Für ältere Browser, die kein HTML 5 unterstützen, lässt sich ein alternativer Code für einen Fallback definieren. Dieser wird — in Form eines gewöhnlichen HTML-Codes — einfach innerhalb des <video>-Tags geschrieben.

Öffnet man eines der beiden Beispiel oben im Internet Explorer oder einem älteren Browser, wird lediglich der Text „This browser is not compatible with HTML 5” angezeigt. Selbstverständlich können an dieser Stelle auch komplexere HTML-Elemente oder JavaScript-Befehle stehen.

Besser als ein Text wäre natürlich eine wirkliche Alternative anzubieten. Dies könnte beispielweise ein Code sein, der das Video im Flash Player abspielt.

Steuerung (Controls)

In der Regel werden Bedienelemente benötigt, damit der Nutzer das Video z.B. pausieren oder darin spulen kann. Die Browser bringen deshalb von Haus aus eine „Standard-Bedienleiste” mit, die allerdings alle unterschiedlich aussehen (links: Firefox, rechts: Safari). Beim iPhone öffnet sich der (integrierte) Mediaplayer, der auch für die YouTube-Wiedergabe verwendet wird.

firefox-safari-controls

Damit das Player-Skin erscheint, aktiviert man dieses über controls

PLAIN TEXT
XML:
  1. <video  width="320" height="240" controls>
  2.     <source src="test.mp4" type="video/mp4" />
  3.     <source src="test.ogv" type="video/ogg" /> 
  4.     This browser is not compatible with HTML 5
  5. </video>

Beispiel anschauen (Controls)

Um Verwirrung zu vermeiden (der ich ebenfalls erlegen bin): Man könnte meinen, dass die Eigenschaft über controls="true"oder controls="false" ebenfalls aktiviert bzw. deaktiviert werden kann. Dies ist jedoch nicht so! Die Begründung:

A number of attributes in HTML5 are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Also: Einfach das Attribut weglassen oder hinzufügen, dann sobald die Eigenschaft verwendet wird, gilt sie als aktiviert.

Weitere Attribute des video-Tag

Mit width und height wählt man die Größe, in der das Video abgespielt werden soll. Idealerweise sollte die Größe mit der nativen Auflösung der Videodatei übereinstimmen.

Die Eigenschaft autoplay legt fest, ob das Video automatisch gestartet werden soll oder nicht.

Die Eigenschaft autobuffer ist normalerweise deaktiviert. Das Video wird deshalb erst dann heruntergeladen, wenn der Nutzer auf den Play-Button drückt (oder autoplay verwendet wird). Aktiviert an das automatische Buffering jedoch, wird das Video beim HTML-Seitenaufruf sofort komplett heruntergeladen. Beispiel anschauen.

Mit poster kann man ein Bild hinterlegen (z.B. poster=poster.jpg). Dies wird zum einen angezeigt, solange das Video noch nicht geladen ist. Zum anderen wird es auch dargestellt, wenn es Probleme mit dem Videofile (z.B. nicht vorhanden).

Beispiel anschauen (Bild wird angezeigt, weil das Videofile nicht existiert)

Hinweis: Allerdings funktioniert dies zurzeit noch nicht mit Firefox, da es dort in Version 3.5 nicht implementiert ist.

Ausblick

In einem weiteren Artikel werde ich zeigen, wie sich der Video-Tag mit JavaScript/CSS kombinieren lässt, um z.B. ein eigenes Player-Skin zu implementieren. Stay tuned …

Linkliste

Link: W3C
Link: Media formats supported by the audio and video elements
Link: Codecs for <audio> and <video>