Entwicklung & Design
Grundlagen und Tipps für Codierung, Gestaltung und Effekte: HTML5 und Video
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.
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
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.
| 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 | ||
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.
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 |
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.
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
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.
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.