Wie kann man ein Video so einbinden, damit es auf möglichst allen Geräten (Computer, iPad, Smartphone) abgespielt werden kann?

In Zeiten der vielen Gratis-Videos im Internet, YouTube, Vimeo und Dailymotion könnte man auf den Geschmack kommen, auf den Zug zu springen und ein eigenes Video auf die eigene Homepage zu stellen. Die Stichworte HTML5 und Flash haben hier einfach zu fallen. Welche Technologie nun besser ist oder sich durchsetzt, versuchen wir in diesem Artikel nicht zu klären. Ganz im Gegenteil: Um sowohl auf Desktop-Computern als auch auf mobilen Endgeräten Videos abspielen zu können, wird momentan eine friedliche Koexistenz angestrebt, in der sich das proprietäre Flash-Plugin und der Newcomer HTML5 optimal ergänzen.

HTML5 mit Flash-Fallback

Das Zauberwort heißt Fallback. Wir nehmen an, dass der Browser HTML5 und den <video>-Tag versteht. Wenn er hingegen zu alt oder nicht ausgereift ist und mit <video> nichts anfangen kann, müssen wir auch annehmen, dass er den Tag ignoriert. Diese Tatsache können wir jedoch zum Vorteil nutzen: Wir “verstecken” das Flash-Object einfach im <video>-Tag:

<video controls>
<source src="beispiel.ogg" type="video/ogg">
<source src="beispiel.mp4" type="video/mp4">
<embed src="beispiel.swf" type="application/x-shockwave-flash" width="400" height="300"></embed>
</video>

Welcher Codec? Welcher Player?

Die Wahl des Codecs ist von entscheidender Bedeutung. Es ist nämlich bei aller Verwirrung um Flash und HTML5 zudem auch noch so, dass sich die unterschiedlichen Browser-Hersteller nicht auf einen gemeinsamen Standard einigen können, jeder sieht (s)einen bestimmten Codec als beste Lösung.

Um dennoch eine möglichst vollständige Kompatibilität zu gewährleisten, sollte man das vorliegende Video in verschiedene Formate konvertieren.

Was sofort auffällt: Fast alle Browser unterstützen H.264, außer Firefox. WebM ist ein offener Standard und dazu gedacht, ein gemeinsamer Codec der Zukunft für alle Browser zu werden — aber eben der Zukunft.

Es ist tatsächlich eine halbe Wissenschaft, heutzutage ein einfaches Video einzubinden. Hat man es aber geschafft, kann man seinen Besuchern einen unschlagbaren Mehrwert bieten, vorausgesetzt man zeigt auch entsprechend ansprechende Inhalte.

Nähere Informationen zur Technik, zu Codecs und allgemein detailliert aufbereitete Informationen zur Darstellung von Videos im Internet gibt es hier. Aber bitte schonen Sie die Umwelt und drucken Sie die 52 Seiten nicht aus.

Update (3. September 2011):

Videos per YouTube oder Vimeo einbinden

Um dem Dilemma um die richtige technische Lösung auszuweichen, gibt es natürlich auch die Möglichkeit, Videos per YouTube, Vimeo oder ähnlichen Video-Hostern hochzuladen — das ist zumeist kostenlos und funktioniert prächtig.

Ein zusätzlicher Vorteil aus dieser Lösung ergibt sich in der verringerten Datenübertragung, weil die Videos extern gespeichert sind und zudem meist mit sehr hoher Bandbreite und Verfügbarkeit ausgeliefert werden.

Nachteilig sehe ich die externe Lösung nur dann, wenn sich das Video möglichst in die eigene Design-Umgebung einfügen soll und nicht von fremden Elementen geprägt sein soll.