HTML5 Video einbinden – Browser-unabhängig – Schritt-für-Schritt Anleitung

HTML5 Video einbinden: Warum nicht Flash?

In diesem Artikel zeige ich auf, wie einfach man mittlerweile mit Hilfe von HTML5 und dem damit eingeführten <video>-Tag ein Video auf einer Website oder Homepage Cross-Browser-kompatibel und damit browser-unabhängig einbinden kann – und dieses Video dann auch wirklich auf allen heutzutage verwendeten Geräten (PC, Mac, Smartphones und Tablets) und den verschiedenen gängigen Browsern im Markt (Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari und Opera) abgespielt werden kann.

Wer heutzutage auf einer Website für die Besucher ein Video integrieren möchte, musste bis vor nicht allzu langer Zeit teilweise ziemliche Hürden überwinden. Am häufigsten wurden die Videos auf YouTube hochgeladen und von dort mit dem von YouTube direkt zur Verfügung gestellten Embedded-Code in die eigene Webseite eingebaut.

Hier ein Beispiel wie das typischerweise aussieht:

<iframe src="//www.youtube.com/embed/cBRDcTX3vCk?feature=player_detailpage"
   width="640"
   height="360"
   frameborder="0"
   allowfullscreen>
</iframe>

Das Hauptproblem dieser Lösung: YouTube verwendet die Adobe Flash-Technologie zum Abspielen des Videos, und damit sind alle Geräte außen vor, die kein Flash innerhalb des Browsers unterstützen – allen voran die meisten Smartphones auf dem Markt, inklusive des Apple iPhone.

Da aber immer mehr Internetnutzer mobil surfen (alleine in Deutschland Stand 2013 ca. 30% der Internet-Surfer), sperrt man damit all diese Besucher und potentielle Interessenten oder Kunden aus.

HTML5 Video einbinden: Die Lösung – Schritt-für-Schritt-Anleitung

Schritt 1: Video-Konvertierung für alle benötigten Zielformate der Browser

Warum benötigt man überhaupt mehrere Video-Formate um das Video in allen gängigen Browsern abspielen zu können? Das liegt daran, dass verschiedene Video-Formate (Video-Codecs) meistens durch verschiedene Patente geschützt und meist auch mit rechtlichen Einschränkungen zur Nutzung versehen sind. Deshalb haben sich verschiedene Browser-Hersteller jeweils nur für eines oder mehrere der verschiedenen Formate entschieden – und das macht es nötig, das Video in all die unterstützten Formate zu konvertieren und anschließend auf der Webseite mit Hilfe des HTML5 Video-Tags korrekt einzubauen.

Hier eine Übersicht, welche Browser welche Video-Streaming-Formate unterstützen:

Quelle: http://www.w3schools.com/tags/tag_video.asp

• MP4 = MPEG 4 Dateien mit H264 Video-Codec und AAC Audio-Codec
• WebM = WebM Dateien mit VP8 Video-Codec und Vorbis Audio-Codec
• Ogg = Ogg Dateien mit Theora Video-Codec und Vorbis Audio-Codec

Eine detailliertere Übersicht der von den verschiedenen Browsern unterstützten Video-Formate findet Ihr auch auf Wikipedia.

Um nun – ausgehend vom vorliegenden Video-Stream-Format – die weiteren benötigten Video-Formate zu erstellen, bieten sich im Web verschiedenste Video-Konvertierungs-Tools an, z.B. XMedia Recode oder Any Video Converter. Letzteres Programm habe ich selbst genutzt, denn es hat auch den Vorteil, dass ein bisher nur über YouTube in der Website integriertes Video direkt im Programm von YouTube heruntergeladen und dann direkt über das integrierte “HTML5 Embed Video”-Profil in alle drei HTML5-Zielformate konvertiert werden kann.

Sobald alle benötigten Formate produziert wurden, lädt man diese mit Hilfe seines FTP-Programms in einen Ordner auf dem Webspace hoch. Von dort werden sie im nächsten Schritt innerhalb der Website verlinkt.

Schritt 2: Integration der Video-Formate mit HTML5

Im einfachsten Fall sieht die Integration mit dem HTML5 Video-Tag wie folgt aus:

<video>
   <source src="video.mp4" type="video/mp4" />
   <source src="video.webm" type="video/webm" />
   <source src="video.ogg" type="video/ogg" />
   <div>Ihr Browser unterstützt das HTML5-Video-Tag leider nicht. Bitte 
   aktualisieren Sie Ihren Browser um das Video ansehen zu können.</div>
</video>

Die Angabe des Type-Attributs sollte grundsätzlich erfolgen, da dies dem Browser mitteilt, welche Formate zur Verfügung stehen, und der Browser dann selbst festlegen kann, welches Format heruntergeladen und wiedergegeben wird – was wiederum die Ladezeit der gesamten Seite verringern kann, und ein Smartphone-Besucher ohne Datentarif mit Flat-Rate wird Ihnen dankbar sein, wenn Sie sein Daten-Budget nicht unnötig belasten.

Jeglicher Text innerhalb der beiden Video-Tags wird im Browser angezeigt falls dieser das HTML5 Video-Tag nicht unterstützt.

Natürlich kann man die Darstellung und Benutzerführung des Videos durch weitere Attribute für das HTML5 Video-Tag beeinflussen. Einige dieser Attribute sollen hier kurz erläutert werden.

Attribute des Video-Tags:

width: hiermit wird die Breite des Videos festgelegt
height: hiermit wird die Höhe des Videos festgelegt
poster: hier kann über eine URL ein Bild festgelegt werden welches angezeigt wird, so lange das Video noch nicht gestartet wurde
controls: bei Angabe dieses Attributs werden Steuerelemente angezeigt, mit denen das Video u.a. gestartet und gestoppt werden kann
autobuffer: damit wird die Zwischenspeicherung des Videos aktiviert, damit das Video möglichst ruckelfrei abgespielt wird
autoplay: mit diesem Attribut wird festgelegt, ob das Video automatisch startet, wenn die HTML-Seite geladen wurde
loop: das Video wird so lange wiederholt bis der Besucher dies stoppt (siehe auch controls) oder das Fenster schließt
muted: die Audio-Ausgabe des Videos wird unterdrückt bis der Besucher die Stummschaltung aufhebt

Attribute des Source-Tags:

src: Angabe des relativen oder absoluten Pfades zur jeweiligen Videodatei
type: Angabe des korrekten MIME-Typs (“video/mp4”, “video/webm”, “video/ogg”) für die bei src angegebene Videodatei

Einige der Video-Tag-Attribute, z.B. controls, autobuffer und autoplay, benötigen keine Werte; ist das Attribut vorhanden, ist es quasi eingeschaltet. Fehlt es, ist es ausgeschaltet. Manche HTML-Validatoren stören sich daran, dies kann man jedoch verhindern, indem diese Attribute in der Form attribut=”attribut” angegeben werden, also z.B. controls=”controls”.

HTML5 Video einbinden: Beispiel-Integration

Hier einmal ein umfangreicheres Beispiel der HTML5-Video-Integration von der Homepage unserer eigenen Website, www.fx-web.de:

<video controls="controls" preload="metadata" autobuffer="autobuffer"
   poster="FX-Web-Consulting_Webdesign-Muenchen_Worldsoft-Trailer.jpg"
   width="620" height="360">
   <source src="FX-Web-Consulting_Webdesign-Muenchen_Worldsoft-Trailer_x264.mp4" 
      type='video/mp4' />
   <source src="FX-Web-Consulting_Webdesign-Muenchen_Worldsoft-Trailer_VP8.webm" 
      type='video/webm' />
   <source src="FX-Web-Consulting_Webdesign-Muenchen_Worldsoft-Trailer_x264.mp4" 
      type='video/ogg' />
</video>

Und so sieht dann die Darstellung des Video-Containers mit Steuerelementen und Poster auf unserer Webseite mit dem Internet Explorer 11 aus:

Fallback-Lösung mit Flash für Browser ohne Unterstützung des HTML5 Video-Tags:

Die Anzahl der Internet-Nutzer, die noch mit Browsern arbeiten, die kein HTML5-Video unterstützen (z.B. IE8 und älter) wird von Tag zu Tag weniger. Trotzdem empfiehlt es sich, auch an diese Nutzer zu denken, und ihnen zumindest die Flash-Version des Videos als Fallback-Lösung anzubieten. Falls das Video bisher schon über YouTube eingebettet war, ist der Aufwand sowieso minimal, ansonsten muss das Video zuvor noch zu YouTube hochgeladen werden. Dies kann auch so erfolgen, dass das Video in YouTube nicht öffentlich sichtbar ist.

Wir haben die Flash-Fallback-Lösung so integriert, dass Sie nur für den Internet Explorer vor Version 9 zum Tragen kommt. Hierzu sind zwei Teile notwendig:

1. Integration des YouTube-Videos mit Hilfe des Object-Tags und conditional commments, die dafür sorgen, dass der Object-Tag nur auf dem IE8 und älter angezeigt wird:

<!--[if lt IE 9]>
<object width="620" height="360" style="margin: 0px 25px;">
   <param name="movie"
   value="http://www.youtube.com/v/cBRDcTX3vCk?version=3&amp;hl=de_DE&amp;rel=0">
   </param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed 
      src="http://www.youtube.com/v/cBRDcTX3vCk?version=3&amp;hl=de_DE&amp;rel=0"
      type="application/x-shockwave-flash"
      allowscriptaccess="always" 
      allowfullscreen="true"
      width="620" height="360">
   </embed>
</object>
<![endif]-->

2. Ausblenden des Video-Tags mit Hilfe eines conditional comments und entsprechender CSS-Anweisung:

<style type="text/css" media="all">
<!--[if lt IE 9]>
   video { display: none; }
<![endif]-->
</style>

HTML5 Video einbinden: Mögliche Fehlerquellen / Fallstricke

Bei manchen Webspace-Providern fehlt im Web-Server (größtenteils Apache) die notwendige Zuordnung der Videoformat-Dateinamenserweiterung zu den entsprechenden Video-Stream-Formaten (content-types bzw. MIME-Types). So lange diese Zuordnung fehlt ist der Web-Server nicht in der Lage, das Video im richtigen Format an den Browser des Besuchers zu übermitteln, und dementsprechend passiert nichts, wenn der Besucher versucht das Video abzuspielen.

Falls dies der Fall sein sollte, kann man sich bei fast allen Webspace-Providern damit behelfen, dass die Zuordnung von Content-Type und Dateinamenserweiterung (file extension) in der Datei .htaccess erfolgt.

Dazu ist es notwendig, dass man auf die Dateien auf dem Webspace mit Hilfe von FTP zugreifen kann (z.B. mit dem Programm FileZilla). Wenn auf dem Webspace (meistens im obersten Verzeichnis, der sogenannten “Root“) schon eine .htaccess-Datei existiert, fügt man dort – am besten gleich am Anfang der Datei – folgende Zeilen ein (die Zeilen mit ### am Anfang sind Kommentarzeilen und können weggelassen werden):

### Eventuell notwendige Modifikation in der .htaccess damit der Apache-Server 
### den Video-Stream korrekt interpretiert und streamt 
### (bzw. den korrekten Encoding-Type übermittelt)
AddType video/mp4 .mp4
AddType video/x-m4v .m4v
AddType video/webm .webm
AddType audio/webm .weba
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Sollte noch keine .htaccess-Datei existieren, muss man diese erst lokal erstellen, obige Zeilen einfügen, und die Datei dann in die Root hochladen. Speziell unter Windows erstellt man am besten lokal mit dem Editor eine Datei htaccess.txt, trägt dort die Zeilen ein, speichert die Datei, und lädt sie dann mit FTP hoch. Anschließend kann man die Datei im FTP-Programm auf dem Server in .htaccess umbenennen.

Hat man direkten Zugriff auf den Apache-Server bzw. dessen Konfigurationsdateien, so können obige AddType-Anweisungen direkt in der httpd.conf eingetragen werden, was die Eintragung in der .htaccess dann überflüssig macht.

Fazit

Ja, es ist im Vergleich zur reinen Integration eines YouTube-Flash-Videos etwas mehr Aufwand vonnöten, um ein Video HTML5-konform in die Website zu integrieren.

Angefangen vom Konvertieren und Server-seitigen Vorhalten von drei verschiedenen Video-Formaten, über die Implementation der Fallback-Lösung bis hin zur ggf. notwendigen Erstellung einer .htaccess-Datei und dem finalen Testen des Videos mit verschiedenen Browsern auf verschiedenen Plattformen und Endgeräten (Desktop, Tablet und Smartphone).

Aber der Aufwand lohnt sich, wenn man möglichst allen Besuchern der eigenen Website das Ansehen des Videos ermöglichen möchte. Und wenn man obige Schritte einmal erfolgreich umgesetzt hat, geht es einem beim nächsten Mal schon leichter von der Hand.

In diesem Sinne wünsche ich viel Spaß beim HTML5 Video einbinden in der eigenen Webseite, und würde mich über Beispiel-Integrationen mit URL zur Seite in Form eines Kommentars zu diesem Artikel sehr freuen!

Herzlichst,
Ihr Franz X. Kohl