HTML5 und Video Wiedergabe


Grünfinken am Futterhäuschen
Grünfinken am Futterhäuschen

Mit HTML5 ist die Einbettung von Mediendateien in HTML durch spezielle Tags definiert. Browser, die den HTML5 Standard beherrschen, sollten in der Lage sein, diese Medieninhalte korrekt wiederzugeben. Am Beispiel einer Videodatei wird gezeigt, dass das Einbetten auf der eigenen Homepage trotzdem ein schwieriges Unterfangen ist, wenn man nicht auf YouTube setzen möchte.

Mit YouTube könnte es so einfach sein

w3schools empfiehlt, sich ggf. der einfachsten Möglichkeit zuzuwenden, wenn man Videos in seine Homepage einbetten möchte, nämlich den Verweis auf ein YouTube Video. Der Vorteil: das Video wird einmal bei YouTube hochgeladen und der Link in die Homepage mittels iframe oder embed eingebettet. Es funktioniert praktisch mit allen Browsern. Nachteile an dieser Methode: man muss sich bei Google bzw. YouTube registrieren, Rechte an dem Video werden mehr oder weniger abgetreten, und letztlich stellt niemand sicher, dass das Video, aus welchen Gründen auch immer, nicht irgendwann bei YouTube entfernt wird.

Hier ein Beispiel für die Einbettung:

Einbinden eines YouTube Videos
Einbinden eines YouTube Videos

Und so wird es in WordPress konvertiert und eingebettet:

Das lässt sich dann auch in iPhone und iPad ausführen.

Warum nicht Flash?

Lange Zeit war Flash das Mittel der Wahl, um Videos aus dem Internet im Browser abspielen zu können. Voraussetzung ist allerdings, dass auf dem betreffenden Rechner bzw. Browser das Flash Plug-In eingerichtet ist. Apple unterstützt aber bis heute Flash nicht, und wird es wohl auch nicht mehr tun. Im Prinzip ist das konsequent, unterstützt HTML5 ja das Einbetten von Medien und ist somit nicht auf zusätzliche Plug-Ins oder die Verwendung von Flash-basierten Video-Player angewiesen. Der Vorteil liegt auf der Hand: der Browser selbst kümmert sich um die Wiedergabe der Medien, es muss nicht auf Fremdsoftware vertraut werden. Letztlich zeigt sich die Problematik in der Vergangenheit, wo Flash immer wieder Ziel von Angriffen wurde.

HTML 5 sollte die Lösung sein!

Um Videos im Browser mittels HTML5 abspielen zu können, müssen nur die zulässigen Codecs für MP4 (MPEG 4 mit H264 Video Codec und AAC Audio Codec), WebM (VP8 Video Codec und Vorbis Audio Codec) und OGG (Theora Video Codec und Vorbis Audio Codec) lizenzrechtlich im Browser implementiert sein, und damit steht der Wiedergabe nichts mehr im Wege – eigentlich …

Die unsäglichen Browser Inkompatibilitäten sorgen auch hier wieder für zusätzlichen Aufwand:

  • Das MP4-Format wird nur von Internet Explorer, Chrome und Safari unterstützt,
  • das OGG– und das WebM-Format nur von Firefox, Opera und Chrome (d. h. Chrome unterstützt alle drei Formate).

Der Hintergrund ist, dass der Codec H264 durch Software Patente geschützt ist, der Thedora Codec frei von Patenten ist. Es reicht also nicht, nur genau eine Video-Datei zur Verfügung zu stellen, sondern es müssen mindestens zwei sein, um die Masse der Browser bedienen zu können. U. u. braucht es dann noch Fallback Lösung, die ggf. das Video als Flash-Version einbettet.

Konvertierung in gültigen Videoformate mittels Miro Converter

Je nachdem, in welchem Format eine Videodatei vorliegt, ist es notwendig, diese in die weiteren benötigten Formate zu konvertieren. Ein Tool, mit dem sich das bewerkstelligen lässt, ist der kostenfreie Miro Converter. Damit lassen sich alle benötigten Formate eines Videos herstellen.

Pro:

  • die Anwendung ist sehr einfach aufgebaut und zu bedienen.
  • Durch die Angabe der Zielformate aber auch des Zielgerätes ist es recht einfach ein vorgegebenes Format ins Zielformat zu konvertieren.

Contra:

  • Die Programminstallation braucht ewig, um zu starten
  • Bei der Konvertierung kann keine Größenänderung vorgenommen werden, d. h. wenn das Zielformat kleiner sein soll / muss zuerst das Source File verkleinert werden. Das ist dann irgendwie sehr unpraktisch.
  • Die Konvertierung dauert sehr lange – das Programm ist also nicht sehr performant

Einbindung der Videoformate in HTML5

Im Ergebnis sieht die Einbindung eines einzelnen Videos mittels video Tag dann wie folgt aus:

Video in HTML 5 einbetten
Video in HTML 5 einbetten

Neben der Notwendigkeit verschiedene Formate ein und desselben Videos anzubieten ist auch die Implementierung (insbesondere der Flash Fallback-Lösung) sehr umfangreich und damit aufwändig.

MIME Formate dem IIS bekannt machen!

Wer einen eigenen Web-Server (IIS) betreibt, muss außerdem dafür sorgen, dass dem Browser die Formate korrekt im HTTP-Header übermittelt werden. Hierzu werden die Formate wie folgt registriert:

MIME Dateitypen im IIS
MIME Dateitypen im IIS
Quellen:

Stefan Münz/Clemens Gull, HTML5 Handbuch

http://www.w3schools.com

Advertisements

Was meinst Du dazu?

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s