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:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer / Edge |
Ja | Nein | Nein |
| Chrome | Ja | Ja | Ja |
| Firefox | Ja | Ja | Ja |
| Safari | Ja | Nein | Nein |
| Opera | Ja | Ja | Ja |
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&hl=de_DE&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&hl=de_DE&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
Danke für den Tipp. Jetzt weiß ich auch warum meine Videos auf smartphones nicht funktionieren.
Hallo Andreas,
vielen Dank für den Kommentar! Ich freue mich, dass ich mit dem Artikel helfen konnte.
Beste Grüße,
Franz X. Kohl
Wenn ich den Code bei Joomla eingebe, löscht Joomla ihn nach dem Speichern wieder raus. Kann man das abschalten?
Hallo Renee,
mit so wenigen Infos (z.B. keine Joomla Version) kann ich eigentlich nur raten bzw. vermuten… ich würde jetzt mal als erstes überprüfen, ob
a) Deine Joomla-Version HTML5 unterstützt, und falls ja, ob
b) der in Deiner Joomla-Installation genutzte WYSIWYG-Editor HTML5-konform ist.
Ich hab es vor ein paar Jahren mal erlebt, dass ein WYSIWYG-Editor auf XHTML konfiguriert war, und deshalb die eingebaute HTML-Code-Validierung alle ihm unbekannten Tags (also auch alle nur in HTML5 verfügbaren bzw. neu hinzugekommenen Tags wie das VIDEO-Tag) automatisch beim Speichern entfernt hat.
Über eine Rückmeldung, ob ich mit meiner Vermutung richtig gelegen habe, würde ich mich freuen.
Freundliche Grüße
Franz X. Kohl
Hallihallo,
mich würde jetzt noch interessieren, wie man die Videowiedergabe beeinflussen kann…
Mir geht es hauptsächlich um das Stoppen des Videos.
Es ist nämlich so, dass bei Einbindung mehrerer Videos über den tag alle Videos der Seite gleichzeitig
laufen können und somit, auch wenn sie ausgeblendet sind der Ton aller Videos zu hören ist, falls der Nutzer
es nicht selbst anhält – das blanke Chaos.
Wie ist es Möglich, das Video, sofern nicht im Sichtbereich (ähnlich wie bei Facebook, wenn man rausscrollt)
automatisch stoppen zu lassen?
Dies konnte mir bislang noch niemand beantworten…
Vielen Dank!
Chris
Hallo Chris,
ich nehme mal an Du sprichst davon, dass auf einer Seite mehrere Videos eingebunden sind, und diese alle mit dem autoload-Attribut automatisch gestartet werden. Mir leuchtet zwar nicht ein, warum Du in diesem Fall mehr als ein Video von der Seite automatisch starten solltest, aber vielleicht hast Du ja Gründe dafür, die mir im Moment nicht in den Sinn kommen.
Wenn es Dir in dieser Konstellation „nur“ darum geht, die parallele Tonausgabe von mehreren Videos auf der Seite zu verhindern, kannst Du das Attribut muted=“muted“ einsetzen – also bei allen außer dem Video, bei dem der Ton gleich mit ausgegeben werden soll. Dieses Attribut gab es zum Zeitpunkt der Erstellung dieses Artikels noch nicht, ich habe das Attribut nun aber auch im Artikel zur Liste der Attribute hinzugefügt.
Einen automatischen Stop oder automatisches Pausieren eines Videos, wenn es beim Scrollen aus dem sichtbaren Bereich verschwindet, wirst Du mit den „Bordmitteln“ des HTML5-Video-Tags nicht erreichen können. Entweder Du programmierst Dir selbst diese Funktionalität (mit JavaScript oder jQuery; am besten Mal zuvor mal auf die Suche nach Beispielcode machen, dann musst Du nicht bei Null beginnen), oder Du suchst Dir eine HTML5-Video-Player-Bibliothek, welches solch ein Feature integriert hat. Ich selbst kenne bislang keine solche Bibliothek, hatte aber bisher auch nicht den Bedarf dafür und deshalb bisher auch nicht danach recherchiert.
Vielleicht reicht Dir ja schon der Tipp mit dem muted-Attribut – und falls nicht wünsche ich Dir viel Glück bei der Recherche nach einer geeigneten Lösung!
Mit freundlichen Grüßen
Franz X. Kohl