Vorteile und Verbesserungen

HTML5 - Neuerungen bei Video, Audio und Vektorgrafik

01.03.2011 von Simon Hülsbömer

Kaum eine Website wird in Zukunft ohne HTML5 auskommen. Noch ist die neue Web-Sprache allerdings kein offizieller Standard. Das sollte nicht davon abhalten, schon jetzt in HTML5 zu entwickeln. Wir zeigen, welche Vorteile HTML5 für Entwickler und Anwender bietet.

Apple-Chef Steve Jobs hat ihn bereits vor fast einem Jahr angekündigt - den Tod von Adobe Flash. Und jetzt könnte die Multimedia-Entwicklungsplattform tatsächlich schneller sterben, als Adobe lieb sein kann. HTML5 bietet viele der Features von Haus aus, die Webseiten-Betreiber bisher meistens nur in Flash umsetzen konnten - Audio, Video und interaktive Grafiken: Die Installation von Plug-ins auf Seiten der Anwender ist nicht länger nötig.

Dabei ist HTML5 an sich keine ganz neue Idee. Ihren Ursprung hat die Auszeichnungssprache in einer Arbeitsgruppe, die die Browser-Hersteller Mozilla und Opera gemeinsam mit Apple gründeten. Anfangs arbeitete diese WHATWG (Web Hypertext Application Technology Working Group) an dem Entwurf für HTML5 noch ohne Unterstützung des World Wide Web Consortium (W3C), das über alle Web-Standards wacht.

Das W3C wollte sich lieber der Weiterentwicklung des XHTML-Standards widmen. Doch dann beugte es sich dem Druck der Browser-Hersteller und akzeptierte HTML5 als so genannten Working Draft, also einen Entwurf für einen zukünftigen Web-Standard. Mit der Unterstützung von HTML5 durch den kommenden Microsoft Internet Explorer 9 sind die Weichen endgültig in Richtung HTML5 und weg von XHTML gestellt

Dass es noch bis zum Jahr 2022 brauchen könnte, bis der Web-Standard tatsächlich reif für den Markt ist, behaupten nur wenige Skeptiker wie Ian Hickson, Google-Mitarbeiter und W3C-Mitglied. Jüngst hat das W3C seinen Fahrplan für die Standardisierung von HTML5 veröffentlicht. Die Verabschiedung der Spezifikation wird demnach auf das Jahr 2014 vertagt.

Weitere elf Jahre zu warten möchte sich in der Industrie niemand zumuten und so werden bereits jetzt viele HTML5-Features in die Webbrowser implementiert. So stehen zumindest den Nutzern der neuesten Browser viele Möglichkeiten offen, die HTML5 bietet, sofern sie auf den Websites auch schon ausgenutzt werden.

Vier Kernbereiche

Die neuen Features lassen sich grob in vier Bereiche unterteilen:

Präsentationsformen: Webdesigner bekommen dank neuer oder verbesserter Tags wie <video> und <canvas> mehr Möglichkeiten, beispielsweise Grafiken interaktiver und aufwändiger zu gestalten.
Datenaufbereitung: Ohne Internet-Verbindung ließen sich Web-Seiten bisher nicht anzeigen. Mit neuen Tools für die Datenverarbeitung wandeln sich Websites vom Rahmen für die reine Inhaltedarstellung zu Stand-alone-Applikationen. Daten lassen sich mit HTML5 lokal zwischenspeichern und später anzeigen, ohne dass dann noch eine Verbindung zum Internet bestehen muss.
Lokalisierung: Funktionen für die Lokalisierung sollen es erleichtern, Standort-abhängige Web-Inhalte anzubieten.
Markup-Verbesserung: Jeder Browser verarbeitet HTML-Quellcode bisher anders. HTML5 soll diese Unterschiede ausräumen und für ein einheitliches Bild sorgen. Unstimmige Tags entfallen, umstrittene werden verbessert. Verkürzte Schreibweisen sollen für mehr Überblick im HTML-Code sorgen.

Auf den folgenden Seiten lesen Sie alle Details über die neuen Präsentationsformen. Die weiteren Bereiche stellen wir in gesonderten Artikeln vor.

Canvas

Das neu eingeführte <canvas>-Tag ist streng genommen ein Sündenfall. Damit wird ein rechteckiger Bereich auf der Website erstellt, in dem JavaScript-Code eingebaut werden kann, um Bitmap-Grafiken dynamisch zu rendern. Ursprünglich war HTML als reine Auszeichnungssprache gedacht, um Daten grafisch darstellen zu können. Die Umsetzung dieser Darstellung blieb dem Browser überlassen. Das jetzt direkt im Code implementierte Rendering bricht mit dem alten Prinzip.

Canvas nein: Der veraltete IE6 unterstützt kein HTML5.

Vor allem für grafisch anspruchsvolle Webdesigner ist das Tag eine gute Sache, weil sie es nun selbst in der Hand haben, wie bestimmte Seitenelemente aussehen sollen. Die Idee für das<canvas>-Element stammt von Apple. Alle Hersteller kopierten sie - schlussendlich auch Microsoft, das sich lange gesträubt hatte. Der dem Internet Explorer 9 soll das <canvas>-Element unterstützen. Grund: Viele Anwender nutzten bereits Tools von Drittanbietern, die den Browser um die Möglichkeiten von <canvas> erweiterten.

Trotz des neuen Standards funktioniert die identische Darstellung der Grafiken bisher nicht in allen Web-Browsern einwandfrei. So nahm Philip Taylor einen vollständigen Canvas-Test vor, der alle Arten prüft, auf die JavaScript mit grafischen Objekten umgehen kann. Sein Ergebnis: Viele Standardvorgänge - wie das Zeichnen einer Linie - sind in allen Browsern nahezu gleich implementiert. Einige andere grafische Routinen wie das Rendering von Text oder Kurven realisieren die Programme jedoch höchst unterschiedlich - sehr komplexe Prozesse können sogar zum Selbstabsturz führen und darin münden, dass Websites in unleserlichen Hieroglyphen enden.

Canvas ja: Firefox 3.6 bietet bereits volle HTML5-Unterstützung.

Wenn Sie selbst testen möchten, ob Ihr Browser <canvas> in HTML5 unterstützt, klicken Sie auf diesen Link. Dort sind einige Links mittels eines jQuery-Plugins animiert worden. Das Plugin sucht sich die Links aus dem Quelltext heraus und gibt sie in Form einer animierten Linkwolke aus, die auf die Bewegungen des Mauszeigers reagiert. Wenn die Animation bei Ihnen funktioniert (vgl. auch die beiden Bilder) nutzen Sie bereits einen HTML5-tauglichen Browser. Internet Explorer 8 oder niedriger kann das nur mithilfe eines speziellen Plug-ins von Google (ExplorerCanvas). Die folgenden Versionen der gängigen Webbrowser unterstützen Canvas von Haus aus:

Apple Safari 5
Google Chrome 8
Microsoft Internet Explorer 9
Mozilla Firefox 3.6
Opera 10.60

Video und Audio

Das Tag <video> erscheint auf den ersten Blick harmlos. Ähnlich wie beim <img>-Element, das für die Einbettung von Bildern sorgt, ist der <video>-Befehl für jedermann einfach nutzbar: eigene Videodatei auf den Webspace hochladen, Adresse des Videos im Tag angeben und fertig.

In der Praxis ist es leider nicht so einfach. Die Vorgehensweise ist in der Tat leicht, wie oben beschrieben: Die unterstützten Videoformate sind jedoch sehr unterschiedlich. Wenn alle Browser die wichtigsten Standardformate unterstützen würden - wie bei den Bildern, wo jeder zumindest JPG, PNG und GIF kann - wäre das prima. Bei der Videowiedergabe hat aber jeder Browser eigene Macken, und standardisierte Videoformate für alle Plattformen gibt es schon gar nicht.

Aktuell sind das von der Open-Source-Community entwickelte Ogg-Format, MPEG H.264 und VP8 von On2, das seit kurzem zu Google gehört, die am weitesten verbreiten Videoformate im Web. Es gibt aber noch viel mehr - Apple-Anwender etwa arbeiten mit QuickTime, und so kann der Safari-Browser auch nur alles auflösen, was auch von QuickTime verarbeitet wird.

Patente und Lizenzen

OGG, H.264 und VP8 liefern vergleichbare Ergebnisse bei der Darstellung von Videos. Das einzige, worüber sich Webentwickler Gedanken machen müssen, ist die Frage nach den Patenten. H.264 ist ein weit verbreitetes Format, kostet aber Lizenzgebühren seitens der MPEG LA Group. Im Gegenzug spart H.264 auch Geld, weil es viele Hardware-Encoder gibt, die die komprimierten MPEG-Dateien mit geringem Aufwand verarbeiten können. So lässt sich besonders bei mobilen Geräten Strom sparen.

Die On2-Patente für das VP8-Format wurden mittlerweile auf Royalty-free-Lizenzen umgestellt (einmalige Nutzung ohne jede Einschränkung), was die Beliebtheit von derart komprimierten Videos keinesfalls schmälert. Die OGG-Dateien unterstehen im Gegensatz zu VP8 und H.264 keinen eingeklagten Patentrechten und werden derzeit noch ziemlich ungeniert eingesetzt. Das kann sich schlagartig ändern, sobald die Patentinhaber hier Ernst machen.

Die Patentfrage ist für viele kleine Unternehmen und ihre Webdesigner und Videoproduzenten jedoch nicht von Belang, da die Lizenzgebühren meist bereits von den Herstellern der zur Weiterverarbeitung des Filmmaterials eingesetzten Werkzeuge bezahlt worden sind. Für große Unternehmen reicht das aber nicht aus, da beispielsweise die MPEG LA Group zusätzlich abkassiert, wenn mit H.264 kodierte Videos einem breiten Publikum zugänglich gemacht werden. Sobald eine bestimmte Zuschauerzahl erreicht wird, werden besondere Lizenzen notwendig, die dann aber zumindest bis ins Jahr 2015 hinein unverändert gültig bleiben sollen - so verspricht es eine offizielle Erklärung der Rechteinhaber.

Wer es unterstützt

Wenn Sie jetzt denken: Das ist aber alles kompliziert, dann haben Sie Recht. Am besten spielen Sie einfach ein wenig mit den neuen Möglichkeiten, die HTML5 bezüglich Videoeinbettung bietet. Bieten Sie Ihre Filme in verschiedenen Formaten an - mittels eines Skriptes wird dann browserabhängig entschieden, welches Format ausgegeben wird. Auch für das neue Video-Element gilt: Die aktuellen Versionen der gängigen Browser unterstützen es:

Apple Safari 5
Google Chrome 8
Microsoft Internet Explorer 9
Mozilla Firefox 3.6
Opera 10.60

Um Ihren Browser zu testen, klicken Sie hier. Wenn Sie die Logos fliegen sehen, sind Sie auf der sicheren Seite. Wenn nicht, sollten Sie nach- oder aufrüsten.

Audio

Für das Audio-Tag gilt das Gleiche wie für die Video-Einbindung. . <video> produziert sowohl Sound als auch Bilder, <audio> verarbeitet nur den Sound. Die meisten Audiotracks sind lediglich ein Subset des Videoformats. So ist das beliebte MP3-Format nichts anderes als eine Unterklasse des MPEG-Videoformats.

Es ist davon auszugehen, dass deshalb für das finale Audio-Element die gleichen Regeln gelten werden wie für das Video-Element. Wenn der Firefox-Browser beispielsweise das Ogg-Videoformat unterstützt, solltet er das dementsprechend auch mit dem Ogg-Vorbis-Audioformat machen.

Die einzig bekannte Ausnahme von dieser Regel ist die MPEG4-MP3-Familie. Viele Browser unterstützen MP3-Audios unabhängig vom MPEG4-Video. So bringt Google Chrome 7 zwar MP3 auf die Straße, MPEG4 aber nicht.

Browser im Check

Lesen Sie in folgender Tabelle, welche aktuellen Browser welche der beschriebenen Video- und Audio-Formate in HTML5 unterstützen:

HTML5 Video/Audio
Browser	H.264/MPEG-4	Ogg Theora / Ogg Vorbis	VP8
Apple Safari 5	Ja	Nein	Nein
Google Chrome 8	Ja	Ja	Ja
Microsoft IE 9	Ja	Nein	Nein
Mozilla Firefox 3.6 / 4.0	Nein / Nein	Ja / Nein	Nein / Ja
Opera 10.60	Nein	Ja	Ja

Skalierbare Vektorgrafiken (SVG)

Wie bereits im Textabschnitt über <canvas> beschrieben, war die Intention des HTML-basierten Webs die standardisierte Auslieferung von Daten, die anschließend vom lokalen Rechner (Browser) interpretiert werden sollten. Das SVG-Format (Scalable Vector Graphics) wurde zu genau dem gleichen Zweck entwickelt: einfachen ASCII-Text in grafische Formen umsetzen. Seit 1999 arbeiten verschiedene Fachgremien an dem Format - inzwischen biegen sie auf die Zielgerade ein. Nachdem auch Microsoft mit dem IE9 SVG unterstützt, sind endlich alle wichtigen Browser dabei.

Das SVG-Format soll die gleiche Art von Präzision in die Beschreibung von grafischen Elementen bringen, wie es PostScript für Druckvorlagen sicherstellt. Statt Objekte durch die Spezifikation einzelner Pixel zu beschreiben, sollen sie aus Linien und Formen zusammengesetzt werden, die mithilfe von Tags definiert sind. Wie der Name SVG schon vermuten lässt, handelt es sich also um echte Vektorgrafiken. So stellt folgendes Beispiel einen Kreis mit einem Radius von 40 Pixeln dar:

<circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red">

Weil der Browser die Objekte der Bildschirmauflösung anpasst und der Anwender je nach Bedarf vergrößern und verkleinern kann, ist das Ergebnis immer gleich gut. Filme und Spiele, denen animierte Schemata zugrunde liegen, sind dank der Vektortechnik platzsparend und schnell. Mittels Gzip-Kompression wird der Quellcode noch einmal um bis zu 80 Prozent eingedampft.

SVGB und SVGT

Also SVG gut, alles gut? Bedeutet Microsofts SVG-Einstieg eine einheitliche Vektorsprache? Natürlich nicht. Handy-Hersteller sorgen sich um den hohen Rechenaufwand, der für die Darstellung von SVG-Objekten nötig ist - damit steigt auch der Stromverbrauch der Geräte. Die Unternehmen führten deshalb zwei Subsets ein: SVGB (SVG Basic) und SVGT (SVG Tiny) - beide lassen einige Features außen vor, die für mobile Displays kaum Nutzen bringen: Objektmaße anders zu konfigurieren als über Pixel (über Picas oder Millimeter) beispielsweise. SVGT kann zudem Flächen nur einfarbig füllen.

Es geht auch animiert

Etliche Entwickler experimentieren auch mit einem flexibleren Vektor-Standard. So wurde das <animate>-Tag geboren, das einen Pfad beschreibt, an dem sich Objekte entlang bewegen. Nachdem eine Grafik aus dem Code erstellt worden ist, rechnet die SVG-Engine eine neue Position aus und zeichnet die Grafik an dieser Stelle erneut. Derzeit wird <animate> von allen Gecko- und WebKit-Browsern unterstützt - Internet Explorer 9 kann es hingegen nicht.

Nach dem Willen einiger anderer sollen besondere SVG-Effekte wie Farbfilter und Begrenzungen jedes beliebige Stück HTML eingepflegt werden können. So hat das Mozilla-Team den HTML5-Entwicklern einen Entwurf für Vektoreneffekte für das HTML-Subset CSS (Cascading Style Sheets) vorgelegt. Der Firefox setzt diesen Vorschlag bereits gut um - andere Browser sind hingegen noch sehr fehleranfällig in diesem Punkt. Das ist aber auch kein Wunder, haben die Firefox-Macher doch sowohl den Code als auch die Spezifikationen für die SVG-Einbindung gleichzeitig entworfen.

Ein dritter Bereich, in dem sich die Browser noch sehr unterscheiden, ist die Integration von SVG-basierten Schriften. Anders als PostScript lässt es die Standardversion von SVG nicht zu, dass jeder beliebige Strich in ein Bildzeichen respektive einen Teil eines Buchstabens umgesetzt wird. Nur die WebKit-Browser können das bereits von Haus aus, weil sie die Grundlagen von SVG-Fonts unterstützen; IE und Gecko müssen erst noch angepasst werden.

Obwohl Vektorengrafiken "gestochen scharf" sind, haben es einige Anwender lieber etwas - künstlerisch anspruchsvoll - verschwommener. Blur-Filter, die dies ermöglichen, werden von Chrome, Opera und Firefox angeboten.

Kann Ihr Browser SVG?

Mit diesem schnellen SVG-Test prüfen Sie Ihren Browser, ob er in der Lage ist, eingebettete SVG-Tags zu verarbeiten. Eine gelungene Zusammenstellung von SVG-Beispielen und Browser-Tests von Andre Winter zeigt die verschiedenen Möglichkeiten, die aktuell noch in der Experimentierphase sind.

Lesen Sie in folgender Tabelle, welche aktuellen Browser welche der beschriebenen SVG-Formate in HTML5 unterstützen:

SVG im Browser-Check
Browser	Zeigt SVG an	SVG-Effekte in HTML	SVG-Filter	SVG-Schriften	SVG in CSS	Animierte SVGs
Safari 5.0 / 6.0	Ja / Ja	Teilweise / Teilweise	Nein / Jja	Ja / Ja	Ja / Jja	Ja / Ja
Chrome 8.0 / 9.0	Ja / Ja	Teilweise / Teilweise	Teilweise / Teilweise	Ja / Ja	Ja / Ja	Ja / Ja
IE 8.0 / 9.0	Nein / Ja	Nein / Teilweise	Nein / Nein	Nein / Nein	Nein / Ja	Nein / Nein
Firefox 3.6 / 4.0	Ja / Ja	Ja / Ja	Ja / Ja	Nein / Nein	Nein / Ja	Nein / Ja
Opera 10.60 / 11.0	Ja / Ja	Teilweise / Teilweise	Ja / Ja	Ja / Ja	Ja / Ja	Ja / Ja

WebGL = Canvas 3D

WebGL bringt die Features von OpenGL in das Canvas-Tag. Viele der aktuellen Browser unterstützen es bereits, sofern der Anwender es von sich aus aktiviert, indem er einige Konfigurationsdateien anpasst. Bei Google Chrome wird WebGL beispielsweise über die Kommandozeile eingeschaltet - mit Hilfe des Parameters "--enable-webgl". In Mozilla Firefox lässt sich WebGL über die Konfiguration der "about:config" aktivieren.

WebGL ist kein offizieller Bestandteil von HTML5, wird aber oft mit diesem zusammen beschrieben, weil die 3D-Technologie eng mit dem Canvas-Element verknüpft ist. Die erreichte Performance hängt aber natürlich stark von der Grafikkarte und dem verfügbaren Arbeitsspeicher ab. Wer sich einige WebGL-Routinen anschauen möchte, die zum Browsertest geeignet sind, besucht am besten diese Seite von Andor Salga. (mje)

Dieser Beitrag basiert auf einem Artikel unserer Schwesterpublikation Computerwoche. Grundlage des Artikels bildet eine Veröffentlichung von Peter Wayner in der amerikanischen IDG-Publikation Infoworld.