Anzeige
Anzeige
UX & Design
Artikel merken

Grundlagen und Tipps für Codierung, Gestaltung und Effekte: HTML5 und Video

Wer glaubt, HTML5-Videos seien unausgereift und umständlich, der irrt. Dank kostenloser Tools sind sie genauso leicht einzurichten wie Flash-Videos – und lassen sich dabei auch noch vielfältig gestalten. Wir haben die wichtigsten Grundlagen und praktische Tipps zusammengetragen.

6 Min. Lesezeit
Anzeige
Anzeige

Trotz einiger Versuche konnte sich lange Zeit keine offene Alternative für das Abspielen von Online-Videos zum proprietären Flash durchsetzen. Zwei wesentliche Gründe waren YouTube als Vorreiter für Online-Videos und die enorme Verbreitung des
Flash-Players. Doch im mobilen Zeitalter hat Flash schlechte Karten: Flash-Videos greifen auf das HTML-Element <embed> zurück, das der W3C-Standard nie enthielt. Die zusätzliche Abstraktionsebene erhöht den Datendurchsatz und Stromverbrauch – für mobile Plattformen ungeeignet. Mit Apples Entscheidung, Flash auf iOS nicht zuzulassen, war das Ende von Flash-Videos absehbar. Seit Mitte letzten Jahres ist nun der Flash Player auch für Android-Geräte im Google Play Store nicht mehr erhältlich. Windows Phone 7 und 8 unterstützen Flash-Inhalte ebenfalls nicht mehr. Stattdessen setzt sich das vom W3C und Opera entwickelte HTML5-Video-Element durch. Aber ist damit jetzt alles einfacher und besser? Leider (noch) nicht ganz. Im Folgenden geht es um die wichtigsten Grundlagen und praktische Tipps.

Das Video-Element

Anzeige
Anzeige

Die Definition eines HTML5-Videos erfolgt über das <video>-Element. Darunter definiert das Element <source> eine oder mehrere Quelldateien. Leider gibt es kein eindeutiges Videoformat, das von allen Browsern unterstützt wird. Daher empfiehlt sich die Angabe mehrerer Quelldateien. Die drei gängigsten Formate sind WebM (*.webm), Ogg Theora (*.ogv) und Mp4 (*.mp4).

Ein HTML5-Video mit drei Source-Angaben

<video> 
 <source xsrc="hello.mp4" /> 
 <source xsrc="hello.webm" /> 
 <source xsrc="hello.ogv" /> 
</video>

Listing 1

Videoformate

Jedes der Formate hat Vor- und Nachteile, weswegen sich die Browser-Hersteller nicht auf einen einzigen Standard einigen konnten. Wer generell auf Nummer sicher gehen möchte, kann an letzter Stelle einen Skript-Block in das Video-Objekt einfügen. Sollte der Browser das Video-Tag nicht erkennen, greift dieser Block als Fallback und spielt das Flash-Video ab.

Anzeige
Anzeige
Welcher Browser unterstützt welches Videoformat?
Firefox Opera Chrome Safari IE
WebM X X X
Ogg Theora X X X
MPEG4H.264 X X X

Tools zur Konvertierung

Um ein Video in die genannten Formate zu konvertieren, empfiehlt sich der Einsatz der kostenlosen Kommandozeilenwerkzeuge ffmpeg und ffmpeg2theora. ffmpeg kann alle drei Videoformate erzeugen. Allerdings muss man sehr genaue Einstellungen verwenden, um ein optimales ogv-Ergebnis zu erhalten. ffmpeg2theora ist hingegen allein auf die Konvertierung ins ogv-Format spezialisiert. Wer keine Kommandozeilenwerkzeuge verwenden möchte, kann auch auf Tools wie „Easy HTML5 Video“ zurückgreifen. Die Konvertierung in HTML5-Videos gelingt hier mit wenigen Klicks und ist für nicht-kommerzielle Zwecke kostenfrei.

Anzeige
Anzeige

Wichtige Attribute

Das Video-Element stellt zahlreiche Attribute bereit, die das Aussehen und Verhalten eines Videos genauer spezifizieren. Mit dem Flag „autoplay” startet ein Video automatisch. Durch das Attribut „loop“ wiederholt sich ein Video endlos. Und mit Hilfe des Flags „controls“ erhält ein Video eine einfache, vom Browser abhängige, grafische Oberfläche.

Wichtige Attribute des <video> Elements
autoplay Spielt Videos automatisch ab
loop Wiederholt Videos endlos
controls Zeigt vom Browser vorgegebene Video-Bedienelemente
poster=“preview.png“ Liefert ein Vorschaubild
width=“320″ height=“240″ Definiert die Video-Auflösung, im Internet Explorer ist auch
eine prozentuale Angabe möglich
preload= „none|metadata|auto“ Lädt das Video beim Seitenaufruf komplett (auto) oder
nur die Metadaten (metadata), noch
kaum unterstützt
Wichtige Attribute des <source> Elements
src=“myvideo.mp4″ Definiert die URL der Videodatei
type=“video/mp4″ Gibt MIME Types an, erspart Browser das Auslesen des Videoheaders
zur Kompatibilitätsprüfung
media=“screen and (min-device-width:100px)“ Bestimmt auflösungsabhängige Verwendung, nur von Opera und Safari
unterstützt

Grafische Oberflächen

Eigene grafische Oberflächen zum Starten, Pausieren oder Vorspulen lassen sich durch Angabe von regulären HTML-Elementen erzeugen – eine der Stärken von HTML5-Videos. So kann man mit HTML, CSS und JavaScript einen kompletten Videoplayer erstellen. Im Netz finden sich daher auch viele kostenfreie Varianten. Im Vollbildmodus können Entwickler die Oberfläche jedoch noch nicht gestalten. Um das zu tun, müssen sie den gesamten Browser in den Vollbildmodus versetzen.

Anzeige
Anzeige

HTML5-Videos auf mobilen Geräten

Auf mobilen Geräten kann es mehrere Probleme geben: Noch nicht alle Systeme unterstützen das HTML5-Video-Element. iPhone und Windows Phone 7 spielen HTML5-Videos nur im Fullscreen-Modus ab. Inline-Videos laufen nur in Apps – beim iPhone muss man dazu das Attribut „allowsInlineMediaPlayback“ auf „true“ setzten. Zudem unterstützt nicht jedes mobile Device hohe Videoauflösungen. Auf älteren Android-Geräten lassen sich solche HTML5-Videos aufgrund von Hardware-Problemen und vorinstallierten Browsern nicht so einfach abspielen. Das mp4-Format mit niedriger Auflösung wird jedoch von Browsern gut unterstützt, hat eine sehr gute Performance und verbraucht wenig Strom.

Paralleles Abspielen und Werbung

Das iPad kann mehrere Videos auf einer Seite nicht zeitgleich abspielen. Ein Werbevideo kann das Content-Video also ausschalten. Für das Buffering ergibt sich ein ähnliches Problem: Werbevideos, die alle paar Minuten ein Content-Video pausieren, um Werbung anzuzeigen, löschen den Buffer des Hauptvideos. Auch wenn HTML5-Videos kein echtes Streaming unterstützen, sorgt ein „Pseudo Streaming“ seit HTTP/1.1 dafür, dass das Video nicht komplett neu geladen werden muss. Dabei nutzt der Client das Response-Header-Feld „Accept-Ranges: bytes“. Es signalisiert dem Client, dass er bei Anfragen eine Range mitsenden kann (etwa „Range: bytes=0-777“), um nur einen Teil des Videos zu laden.

Untertitel und Tonspuren

Untertitel lassen sich in HTML5-Video einfach realisieren, indem man eine oder mehrere WebSRT-Dateien unter dem Video-Elements angibt (<track label=“English SUB“ kind=“subtitles“ srclang=“en“ xsrc=“video_english.wsrt“>) – oder mit Hilfe der Timed Text Markup Language (TTML). Außerdem ist es möglich, mehrere – etwa anderssprachige – Tonspuren einzubinden. Mit Hilfe von JavaScript können Entwickler auch separate Audioquellen ansprechen. Diese Technik lässt sich auch nutzen, um Tonspuren für Sehbehinderte zu verwenden. Je nach Ausgabemedium oder Verbindungsqualität kann man darüber hinaus auch eine höhere oder niedrigere Video-Qualität anzeigen. Extended HTTP Streaming (m3u8, Apple Live, Microsoft
Smooth, Adobe HTTP Dynamics) bietet drei Qualitätsstufen: low, medium und high.

Anzeige
Anzeige
Beispiele für Effekte bei HTML5-Videos. Links: Reflexionseffekt, mitte: Schwarz-Weiß-Modus, rechts: Emboss-Effekt.

Beispiele für Effekte bei HTML5-Videos. Links: Reflexionseffekt, mitte: Schwarz-Weiß-Modus, rechts: Emboss-Effekt.

Video-Effekte

Auch Effekte sind leicht realisiert. Wer Videos mit Hilfe von JavaScript mit Canvas-Elementen kombiniert, erhält Spiegelungen, Reflexionseffekte, Schwarz-Weiß-Versionen und andere Spezialeffekte. Das Grundprinzip ist relativ simpel: Das aktuelle Bild wird aus dem Video-Element ausgelesen und auf einem Canvas-Element dargestellt. Der Fantasie sind hier nur wenige Grenzen gesetzt, da durch eine pixelweise Manipulation selbst aufwändigste Effekte möglich sind. Einzig die Performance kann im Einzelfall zum Problem werden. Eine performante Alternative zur Canvas-Methode sind CSS3-Filter per Image-Styles. Unterstützt durch die GPU laufen sie auch auf mobilen Systemen deutlich performanter und sind der Canvas-Methode daher im Zweifel vorzuziehen.

Bildverarbeitung und Videoaufnahme

Die Kombination von Canvas- und Video-Elementen ermöglicht auch Anwendungen für die Bildverarbeitung und -erkennung. Da sich jeder Pixel eines Frames auslesen und mit geeigneten Verfahren auswerten lässt, ist es zum Beispiel möglich, Gesichter oder Muster zu erkennen. Ein Gesichtserkennungsverfahren auf HTML5-Basis beschreibt Silvia Pfeiffer in ihrem Buch „The Definitive Guide to HTML5 Video“. Für Bildverarbeitungsanwendungen empfehlen sich der Performance zuliebe so genannte „Web Workers“. Das sind Hintergrundskripte, durch die sich Multikernprozessoren deutlich besser nutzen lassen. Eine standardisierte API der „Web Workers“ wird derzeit durch W3C und WHATWG (Web Hypertext Application Technology Working Group) entwickelt.

Das Video-Element ist zwar nicht für die Aufzeichnung von Videos vorgesehen. Mit Hilfe des Elements <device> kann man die Ausgabe einer Webcam aber dennoch anzeigen. Dieses Video lässt sich dann mittels der Websockets-API (1-n) oder der Connection-Peer-API (n-n) an andere Rechner übertragen. So können Nutzer zum Beispiel eine Videokonferenz realisieren. Zu bedenken ist allerdings, dass selbst aktuelle Browser nur Teile dieser Features unterstützen. Der Grund: Das <device>-Element gehört nicht zum offiziellen HTML5-Standard, sondern ist als so genannte „Addition“ noch in der Entwicklung.

Anzeige
Anzeige

Fazit

Das HTML5-Video-Element bietet zahlreiche interessante Funktionen. Mit HTML, CSS und JavaScript lässt sich ein vollständiger Videoplayer entwickeln. Durch die Angabe mehrerer Quellformate und des für ältere Browser möglichen Fallbacks auf Flash ist eine nahezu vollständige Abdeckung aller Browser möglich. Für mobile und leistungsschwache Geräte empfiehlt sich die Verwendung niedrig codierter Videos, wobei man grundsätzlich mehrere Formate eines Videos anbieten sollte. Die Kombination des Video- und Canvas-Elements erlaubt darüber hinaus Effekte und komplexe Bildverarbeitungsanwendungen. Ganz klar: Die Zukunft gehört dem HTML5-Video.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
2 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Novi

Kennt jemand eine Möglichkeit oder Anleitung, wie man mit ffmpeg2theora eine Batch Konvertierung vornehmen kann?

Ich habe schon mehrfach gute Erfahrungen mit http://sublimevideo.net/ gemacht. Man lädt die Videos auf den eigenen Server und das Script von SublimeVideo sorgt dafür, dass ein Flashplayer geladen wird, wenn kein HTML5 vorhanden ist. Nach einmaliger Einrichtung muss man sich nicht mehr um Browserkompatibilität oder ähnliches kümmern.

Antworten
Dirk

Will ich HTML5-Video nutzen, muss ich jedes Video in drei Formaten vorhalten und am besten noch zusätzlich als Flash. Damit erhöht sich der Arbeitsaufwand für die Videoeinbindung um den Faktor 4. In dieser Entwicklung kann ich auch mit viel gutem Willen keine Verbesserung zum bisherigen Quasi-Standard Flashvideo sehen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige