Ohne Plugin geht es auch

HTML5-Videos richtig nutzen

Mit HTML5 geht der Wettbewerb um den Standard für Webvideo in die nächste Runde. HTML5-Video macht Browser-Plugins allesamt überflüssig, hat jedoch seine eigenen Tücken.

internet, webdesign, video, html5, html5-video, plugin

© Anna Kobylinska, Filipe Pereira Martins, Daniela Schrank

internet, webdesign, video, html5, html5-video, plugin

Dank der in HTML5 neu eingeführten Tags <audio> und <video> lassen sich nun endlich Inhalte in Webseiten einbetten ohne die Besucher zum Download eines Plugins zu zwingen (das Video-Element funktioniert in Safari seit der Version 3.1, in Firefox seit 3.5 und in allen aktuellen Builds von Opera und Chrome, siehe Tabelle "Unterstützung von HTML5- Video durch führende Webbrowser"). Webbrowser, welche diese beiden Tags unterstützen, können die Medien abspielen, falls sie das Dekodieren der verwendeten Codecs beherrschen. Das klingt erst einmal ganz gut.

Nicht ohne Wenn und Aber

Leider besteht gar keine Übereinkunft darüber, was ein HTML5-kompatibles Video eigentlich ausmacht. Bei all dem Bestreben, Web-Standards zu verabschieden, konnte man sich weder auf die zu unterstützenden Codecs, noch auf das Container-Format einigen.Diese Flexibilität hilft kurzfristig leider niemandem, denn sie hat zur Folge, dass sich die verschiedenen Browser einmal wieder auseinanderentwickeln; das Gegenteil von dem, was ein Standard erreichen sollte. Website- Betreiber müssen demnach herausfinden, mit welchen Codecs und Container-Formaten sich bei einem akzeptablen Aufwand die größte Zielgruppe erreichen lässt.Bisher hat sich der Krieg um HTML5-Video zwischen zwei führenden Browserstandards ausgetragen:

  • H.264-Video mit AAC-Audio in einem MP4-Container und
  • Theora-Video mit Vorbis-Audio in einem Ogg-Container.

Die Unterscheide zwischen diesen Ansätzen liegen in der Unterstützung durch Browser und Authoring-Werkzeuge, in der resultierenden Encoding-Qualität und nicht zuletzt in den Lizenzbedingungen. Zu den Vorzügen von Ogg Theora zählen die vergleichsweise liberalen Lizenzbedingungen und der quelloffene Code. Leider kann sich aber die Qualität des resultierenden Videos mit H.264 nicht messen und es fehlt auch die Unterstützung durch professionelle Authoring-Werkzeuge.

internet, webdesign, video, html5, html5-video, plugin

© Anna Kobylinska, Filipe Pereira Martins, Daniela Schrank

Die ersten HTML5-Videos im WebM-Standard codiertem MPEG-Video sind auf YouTube zu bestaunen. Google möchte H.264 schrittweise ersetzen.

H.264-Video mit AAC-Audio liefert bisher die bessere Qualität und genießt eine breite Unterstützung durch professionelle Authoring-Werkzeuge. Theora-Video mit Vorbis-Audio kann in diesen beiden Kategorien leider nicht trumpfen, sie haben jedoch einen anderen Vorteil: Sie sind quelloffen und garantiert lizenzfrei. Für H.264 müssen vorerst nur Hardwarehersteller in die Tasche greifen. Die Lizenzverwaltungsagentur MPEG-LA hat die kostenlose Phase für Web-Video mit H.264 vom Ende dieses Jahres auf Ende Dezember 2015 verschoben. Was danach kommt, steht noch in den Sternen.Als einer der ersten, großen Softwarehersteller hatte sich Apple für H.264 und AAC ausgesprochen. Vom iTunes-Store über Apples eigene Authoring-Werkzeuge aus dem Paket Final Cut Studio bis hin zum iPad, iPhone und iPod setzt der Hersteller durchgängig auf H.264 mit AAC. Inzwischen hatte Apple Flash-Inhalte aus dem eigenen Ökosystem verbannt.Bei der Entwicklung von Tools für den iStore dürfen jetzt nur noch Apples eigene Werkzeuge zum Einsatz kommen, und diese schließen nicht nur die Flash-Entwicklung aus, sondern auch (nach wie vor) jegliche hardwarebeschleunigte Wiedergabe nicht offiziell unterstützter Video-Formate.Da der mobile Safari-Webbrowser keine Plugins verkraftet, steht den Anbietern von Web-Inhalten für das iPhone, iPad und iPod nur ein Weg offen: HTML5-Video mit H.264 und AAC. Firefox und Opera bieten allerdings keine Unterstützung für H.264/AAC sondern nur für Theora/Vorbis. Nur Google Chrome beherrscht beide Standards: sowohl H.264/ AAC in einem MP4-Container als auch Ogg Theora/Vorbis. YouTube nutzt aufgrund der besseren Qualität H.264-Video.

 

Open Video Alliance

Vor diesem Hintergrund ist es nur allzu verständlich, dass sich Google, Mozilla und Opera zu einer Allianz zusammengeschlossen haben, um eine lizenzfreie Lösung zu finden, die auch künftigen Qualitätsanforderungen des Web gewachsen sein könnte. Die Open Video Alliance stellte auf der Google I/O-Konferenz im Mai 2010 eine neue Technologieplattform für HTML5- Video vor: VP8 mit Vorbis-Audio in einem WebM-Container.

internet, webdesign, video, html5, html5-video, plugin

© Anna Kobylinska, Filipe Pereira Martins, Daniela Schrank

Ausgabe einer Videodatei für HTML5-konforme Wiedergabe aus Premiere Pro CS5: Ein Click auf die Schaltfläche Cue sendet das Video in die Warteschlange von Adobe Media Encoder CS5.

Bei VP8 handelt es sich um einen Videocodec, der eine sehr hohe Wiedergabequalität mit vergleichsweise niedrigen Systemanforderungen kombiniert. Google kam in den Besitz von VP8 im Zuge der Übernahme von On2Technologies. Ähnlich wie Theora unterliegen sowohl Googles VP8- Codec als auch Googles WebM-Containerformat einer BSD-Lizenz.Google-Ingenieure arbeiten auch bereits mit anderen Softwareherstellern, darunter mit dem ffmpeg-Projekt und Sorenson an der Bereitstellung passender Encoding-Software. Einige DirectShow-Filter für Windows wurden bereits veröffentlicht. Dennoch ist WebM-Video noch sprichwörtliche Zukunftsmusik, denn die Umsetzung durch die führenden Webbrowser steht ebenfalls noch aus (siehe Tabelle).Bis dahin müssen Website-Betreiber mehrere Versionen ihrer Videos bereitstellen.

Das <video>-Element

In HTML5 zeichnet für die Video-Wiedergabe auf einer Webseite das extrem flexible <video>-Element verantwortlich:

<video src="Dateiname.mp4" controls>

Das Element benötigt einen Verweis auf eine physikalische Adresse (dynamische Links kommen nicht infrage). Dem Video können Sie ein Startbild aus einer externen Datei zuweisen, zum Beispiel:

<video width="640" height="360" src="http://www.youtube.de/pfad/ Videodatei.mp4" autobuffer controls poster="Startbild.png">

 

Firefox und Opera

Die Tatsache, dass ein Browser-übergreifender Standard bisher noch ausbleibt, hat für Sie praktische Implikationen. Weder mit H.264/AAC-codiertem MPEG-Video noch mit Theora/Vorbis-codiertem Ogg- Video lassen sich alle Webbrowser abdecken. Nur die erste dieser beiden Lösungen ist wirklich unverzichtbar.Professionelle Video-Authoring-Werkzeuge, darunter Adobe Premiere Pro CS5 mit dem Adobe Media Encoder und Apples Final Cut Studio 7 mit dem Compressor, unterstützen die Ausgabe von H.264-Video aber nicht Ogg Theora-codiertes Video. Das Erzeugen von Ogg-Dateien zusätzlich zu H.264- codiertem Video ist daher umständlich und wenig ergiebig. Sie müssten zusätzliche Tools einspannen, die zwei- bis dreifache Zeit in das Encoding investieren und trotzdem nur ein sehr geringes Marktsegment bei vergleichsweise niedriger Qualität abdecken.Ältere Versionen von Firefox und Opera versagen bei der Wiedergabe von Ogg Theora und brauchen eine Ersatzlösung genauso wie der Internet Explorer. Falls Sie auf diese breite Gruppe potenzieller Zuschauer nicht verzichten möchten, sind Sie gut beraten, auf Ogg Theora zu verzichten und andere Ersatzmedien bereitzustellen, die ein größeres Publikum erreichen.Es gibt mehrere Möglichkeiten. Zum einen können Sie eine Version des Video für die HTML-5-kompatiblen Webbrowser mit H.264-Fähigkeiten verfügbar machen und eine H.264-freie Flash-Version für die übrigen Besucher bereithalten. Mit dieser Lösung ließe sich derzeit die größte Zielgruppe bei nur doppeltem Encoding-Aufwand erreichen.Alternativ können Sie eine einzige Version Ihrer Videos als MP4 mit H.264 und AAC encodieren und eben diese Version einmal als HTML5-Video und einmal als Flash-Video bereitstellen. In beiden Fällen lassen sich nicht kompatible Browser berücksichtigen, indem Sie für das Ersatzmaterial ein Plugin laden. Webbrowser mit nativer Unterstützung für HTML5-Video brauchen dann keine Plugins.

Andere Webbrowser

Eine nahe liegende Lösung zur Bereitstellung von Ersatzmedien bietet das bewährte Flash. Benutzer, die keinen aktuellen Browser mit Unterstützung für Ihr HTML-Video nutzen, haben mit höchster Wahrscheinlichkeit bereits das Flash-Plugin ohnehin installiert, sonst könnten sie im Web so gut wie gar kein Video abspielen.Mit der Zeit werden die inkompatiblen Browser abnehmen und der Bedarf nach der Bereitstellung von Ersatzmedien, die Plugins erfordern, wird entfallen.Der benötigte JavaScript-Code könnte etwa wie folgt aussehen:

<script type="text/javascript"> $(document).ready(function() { var v = document.createElement ("video"); // prüfe die Unterstützung von <video>? if ( !v.play ) { // falls nicht gegeben, nutze Flash var params = { allowfullscreen: "true", allowscriptaccess: "always" }; var flashvars = { file: "Video.f4v", image: "Startbild.jpg" }; swfobject.embedSWF("player.swf", "demo-video-flash", "480", "272", "10.1.0", "expressInstall.swf", flash vars, params); } });</script>

Das Skript prüft, ob der betreffende Webbrowser auf das <video>-Tag reagiert. Sollte sich bei dieser Prüfung herausstellen, dass dieses Element nicht unterstützt wird, wird die Flash-Datei abgespielt.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…