HTML5 - Multimedia-Inhalte - Video

1. Andere Formate, selbe Probleme

Oder anders gesagt, was für Audio gilt, kann für Video so schlecht nicht sein. Dachten zumindest wohl ein paar Firmen. Und das hat auch hier dazu geführt, dass es mal wieder ein paar unterschiedliche Formate gibt. Und ist es sogar noch eines mehr als im vorherigen Abschnitt. Auch die Unterstützung durch die einzelnen Browser lässt Entwickler graue Haare wachsen.

Die Unterstützung

Browser	h.264 (.mp4)	Quicktime (.mov)	Ogg Theora (.ogg)	WebM (.webm)

2. Die Formate

Tja, da hat man mal wieder die Qual der Wahl. Und die Unterstützung ist auch wieder sehr unterschiedlich. Kommen wir zunächst mal zu Quicktime. Das könnt ihr komplett ignorieren, da nur der Safari von Hause damit umgehen kann. Andere Browser benötigen dafür ein Plug-In. Konzentrieren wir uns nun auf den Rest.

h.264

Dieses Format ist durch zahlreiche Patente geschützt und im Normalfall sind dafür Lizenzgebühren fällig. Für eine nicht-kommerzielle Verwendung werden bis 2015 keine Gebühren verlangt. Ob man danach blechen muss, ist derzeit noch fraglich. Aus diesem Grund haben sich sowohl die Mozilla Foundation als auch Opera von diesem Format verabschiedet. Und selbst Google wird wohl die Unterstützung in einer der nächsten Versionen einstellen.

Ogg Theora

... gehört genau so wie Vorbis zum so genannten Containerformat OGG. Denn Theora und auch Vorbis sind nur Teilmengen dieses patentfreien und offenen Standards. Leider ist die Komprimierungsqualität in Vergleich zu den anderen Formaten eher schlecht.

WebM

Dabei handelt es sich um ein von Google initiiertes Projekt, um einen weiteren offenen Standard zu etablieren, denn als OpenSource steht es unter der BSD-Lizenz. Unterstützung gibt es von der Mozilla Foundation und Opera. Mittlerweile werden alle neuen Videos auf Youtube in diesem Format angeboten und es ist zu erwarten, dass es sich gegenüber Ogg Theora schon mittelfristig durchsetzen wird.

Außerdem unterstützt der Internet Explorer ab Version 9 ebenfalls WebM, wenn der verwendete Codec VP8 installiert ist. Hoffen wir mal, dass sich die Porno-Industrie dieses Formats annimmt. Dann ist es nur noch eine Frage der Zeit, bis man das derzeit dominierende h.264 in die Tonne kloppen kann.

3. Die Einbindung

16.0
12.0
5.1
22.0
9.0/10.0

Das geschieht mit dem <video>-Tag. Die Verarbeitung der unterschiedlichen Formate läuft wie bei Audio-Dateien. Der Browser geht einfach so lange die Liste durch, bis er was Passendes findet.

Ein Beispiel

OK, ist vielleicht kein besonderes Video, aber versucht mal, so was im Internet zu finden, wo nicht irgendeine Verwertergesellschaft ihre Gichtgriffel im Spiel hat. Und zig tausend Anwälte in der Hinterhand.


<video width="352" height="288" controls>
  <source src="../../misc/data/flutsch_ei_neppstar.mp4" type="video/mp4">
  <source src="../../misc/data/flutsch_ei_neppstar.webm" type="video/webm">
  <source src="../../misc/data/flutsch_ei_neppstar.ogv" type="video/ogv">
  Sorry, is nich.
</video>

Erläuterung

Der grundsätzliche Aufbau ist (fast) genau so wie beim <audio>-Tag. Nur gibt es ein paar Attribute mehr.

autoplay spielt das Video sofort ab.
controls blendet eine Steuerungsleiste ein. Die Darstellung ist in jedem Browser anders und kann auch kaum per CSS geändert werden.
loop kann auch bei Videos genau so nerven wie bei Audio-Dateien.
mute schaltet den Ton aus.
poster blendet ein Bild ein, so lange das Video nicht abgespielt wird.
preload ist wegen der mangelhaften Browserunterstützung auch hier ziemlich überflüssig.
width und height geben die Größe an.

4. Muy importante!!!

Der Firefox hat leider eine sehr unangenehme Eigenschaft, was Videos angeht. Denn der spielt die nur dann ab, wenn ihm serverseitig der Typ mitgeteilt wird. Lokal gibt es also keine Probleme, aber sobald man über http geht, muss zum Beispiel in einer .htaccess-Datei ein entsprechender Eintrag vorhanden sein.


AddType video/ogg .ogv
AddType video/webm .webm

Denn sonst bekommt der geneigte Betrachter Folgendes zu sehen.

Firefox ohne addType

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt