Das HTML5 video-Element — Stand 2014 2016
Vor einer gefühlten Ewigkeit habe ich über meinen ersten Versuch mit dem nativen video-Element berichtet. Firefox war damals bei Version 3.5, also muss das so um das Jahr 2009 gewesen sein.
Was hat sich seitdem getan?
- HTML5 wurde veröffentlicht, ist also jetzt Standard
- Die Entwicklung bei den Browsern ist weiter fortgeschritten. Praktisch alle aktuellen Browser unterstützen Standards.
- Smartphones und Tablets werden zunehmend zum Surfen eingesetzt. Viele davon mit dem Apple Betriebssystem iOS. iOS unterstüzt kein Flash. Glücklicherweise ist auch Android inzwischen von Flash abgerückt. Um dennoch auf Smartphones und Tablets Videos abzuspielen, können Webseiten also nicht mehr auf Flash setzen.
Die Syntax
Vor HTML5 war das Einbinden von Videos sehr aufwendig. Mit HTML5 ist das fast so einfach wie das Einbinden einer Grafik:
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
(M)eine fertige Lösung:
Mehr als nur das Allernötigste
In der Demo gibt es einige Erweiterungen, die über die oben gezeigte einfache Syntax hinausgehen:
- Die Buttons zur Steuerung wurden per JavaScript dupliziert, d. h. zusätzlich unterhalb des Players eingebaut. Der Grund hierfür: Die Zugänglichkeit mit der Tastatur sicherstellen.
- Es wurden Untertitel eingefügt. Dazu dient das <track>-Attribut.
- Eine Beschreibung des Videos, sowie eine Transkription können zusätzlich angezeigt werden.
- Der Internet Explorer Version 8 und früher unterstützt das video-Element nicht. Für diesen Fall muss ein Fallback vorgesehen werden.
zu 1.: Die Syntax ist im Quellcode der Demo nachzulesen. Ebenso die CSS-Anweisungen, um den Fokus beim Durchtabben mit der Tastatur zu kennzeichnen.
Die zusätzlichen Buttons habe ich per Media Queries vor iPhones versteckt. Da HTML5 Videos im iPhone grundsätzlich in einem eigenen Fenster angezeigt werden, macht die externe Steuerung keinen Sinn.
zu 2.: Die Unterstützung für das <track>-Attribut ist leider von Browser zu Browser unterschiedlich, und insgesamt sehr unvollkommen.
Im Firefox gibt es keinen Button zum Deaktivieren von Untertiteln (auch 2016 noch nicht!); in einigen Versionen des Internet Explorer gibt es zwar diesen Button, aber Untertitel werden nicht angezeigt.
Noch schlechter sieht es derzeit mit Audio-Description aus. Barrierefreie Einbindung von Videos kann man folglich mit dem nativem video-Element heute noch nicht realisieren. Falls wirklich Barrierefreiheit gewünscht wird, dann muss nach wie vor mehr Aufwand getrieben werden.
Einen schönen Accessible HTML5 Video Player gibt es bei PayPal Engineering. Hier die Demo des PayPal Players.
zu 3.: Anstelle von Untertiteln und Audio-Description könnte auch eine Beschreibung des Videos in Textform, sowie eine Transkription der Dialoge dienen. In der Demo wurden Beschreibung und Transkription ein- und ausblendbar gemacht (jQuery).
zu 4.: Als Fallback für alte Browser eignet sich ein einfacher Link zu einer Videodatei im .mp4 Format. Die Datei kann dann entweder heruntergeladen werden, oder in einem auf dem System verfügbaren Player, z. B. dem Windows Media Player, abgespielt.
Die Syntax zum Einbinden einer Fallback-Lösung ist wiederum ganz einfach:
<video controls>
<source src="movie.mp4" type="video/mp4">
Hierher Fallback, z. B. ein Link
</video>
Fazit
- HTML5 Video verwenden an Stelle von Flash!
- Bei hohen Ansprüchen an Barrierefreiheit: Eine Transkription in Textform für Menschen mit Hörbeeinträchtigungen, und eine Beschreibung für blinde Menschen.
Stand 2016:
Alle modernen Browser unterstützen das MPEG-4/H.264 Format (.mp4). caniuse.com
-Ein alternatives Format ist heute nicht mehr nötig. Alles im Folgenden geschriebene ist daher obsolet.
Das funktioniert. Leider konnten sich die Browserhersteller nicht auf ein einheitliches Videoformat einigen. So funktionieren z. B. Videos im MPEG-4/H.264 Format (.mp4) nicht im aktuellen Firefox (bis einschließlich Version 33), und nicht im Opera Browser.
Daher müssen leider mehrere Videoformate von ein und demselben Film erstellt werden. Die Einbindung erfolgt dann mit folgender Syntax:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
</video>
Der Browser sucht sich dann einfach das Format aus, das er unterstützt. Sehr cool.
Und warum habe ich als Alternativformat .webm gewählt?
Weil ich mit diesen beiden Formaten praktisch alle Browser abdecke. Und weil ich es einfacher finde, ein .webm in ordentlicher Qualität aus einem vorhandenen Film zu konvertieren, als dies bei .ogg der Fall ist. Aber das mag eine persönliche Vorliebe sein. Grundsätzlich ist als Alternativformat auch .ogg geeignet.
Ein wunderbares Online-Tool, das all diese Informationen ausspuckt, ist canisuse.com
Anmerkung: Ich verwende zum Konvertieren von Videoformaten übrigens den Miro Video Converter.
Ein Fallstrick
Wenn das Video nicht gespielt wird, und anstelle des Videos nur eine Fehlermeldung angezeigt wird, dann ist häufig der Server der Schuldige.
Viele Server müssen erst explizit angewiesen werden, damit sie einen bestimmten MIME Type ausliefern. Dies geschieht bei Apache Servern in der .htaccess Datei, mit einer Anweisung folgender Art:
AddType video/webm .webm
Mehr zu MIME Types
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
3 Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.
Benno Faltin schrieb am Sonntag, 07.02.16 19:41 Uhr:
Um das Video auf allen wichtigen Browsern anzeigen zu können, mußte ich folgenden Html5-Code mit 3 verschiedenen Video-Formaten eingeben.
<video id=0 controls width=640><source src="gerda-wandert-durchs-karwendel.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="gerda-wandert-durchs-karwendel.webm" type='video/webm' >
<source src="gerda-wandert-durchs-karwendel.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
<object>
<embed src="gerda-wandert-durchs-karwendel.mp4" type='application/x-shockwave-flash'>
</object>
<p>Video is not visible, most likely your browser does not support HTML5 video</p>
</video>
Ist das korrekt? Die 3 Videos belegen dann schon 1GB an Speicherplatz, eine Idiotie der Browser-Hersteller.
Fritz schrieb am Sonntag, 07.02.16 20:46 Uhr:
@Benno Faltin
Diese Lösung war vor einigen Jahren tatsächlich nötig. Inzwischen unterstützen praktisch alle Browser mp4.
Es genügt also das Einbinden eines einzigen Formats.
M. Kruse schrieb am Donnerstag, 24.11.16 15:33 Uhr:
Da ich bis jetzt noch nicht wusste, dass alle aktuellen Browser neuerdings MP4 lesen, war ich schon wieder kurz davor, ein fertiggestelltes MP4 Video zusätzlich in webm zu konvertieren, um es in eine Webseite einzubetten. Das kann ich mir jetzt endlich sparen. Toll!
Vielen Dank für diese und andere wertvolle Informationen zum Video Einbetten.