praegnanz.de büro für intervernetzte medien

Gerrit, 03.07.2009

Video einbinden, aber wie? (update)

Kaum je war die Verwirrung größer, wenn es um die Frage geht, wie man denn nun im Jahre des Herrn 2009 ein Video auf einer Website einbindet!

Vor fast genau einem Jahr habe ich die Heilige-Gral-Lösung besprochen, die folgende Vor- und Nachteile besitzt:

+ Nur ein Dateiformat (H.264)
+ Schlanker Embed-Code dank JavaScript
+ Hoher Kompatibilitätsgrad durch Flash-Player
– Flash-Plugin notwendig, das nicht auf allen Geräten verfügbar ist
– JavaScipt vermeintlich nötig, um Flash korrekt einzubinden
– H.264-Codec führt ab 2011 zu Lizenzproblemen auf kommerziellen Websites

Die Praxis zeigt, dass man im Grunde JavaScript doch nicht benötigt, um Flash einzubinden. SWFObject ist zwar ein feiner Ansatz, aber bietet eigentlich nur zwei Vorteile:

  • Der Code wird übersichtlicher
  • Man kann auf das hässliche Embed-Element für IE verzichten, was den Code valide und trotzdem kompatibel macht.

Soweit, so gut. Nun gibt es einen neuen Workaround, der ebenfalls hochkompatibel sein soll und dabei stark auf die eingebauten Fallback-Möglichkeiten der jeweiligen HTML-Elemente setzt: Video for everybody. (Bitte jetzt kurz angucken, falls noch nicht bekannt.) Die Vor- und Nachteile:

+ Aktuelle HTML5-Technologie
+ Kein JavaScript und kein Flash nötig
+ Hochkompatibel, auch mit iPhone (obwohl leider buggy derzeit)
+ Potenziell hohe Performance
– Sehr unübersichtlicher Embed-Code
– Flash weiterhin notwendig für volle Kompatibilität
Zwei Dateiformate nötig, um die HTML5-Vorteile zu nutzen (OGG Theora für Firefox, H.264 für Safari)

Gerade eben habe ich eine dritte, recht charmante Möglichkeit gefunden, die ich in leicht abgewandelter Form gerne ebenfalls besprechen möchte:

<video width="480" height="320" controls="controls">
    <source src="path/videofile.mp4" type="video/mp4" />
    <source src="path/videofile.ogg" type="video/ogg" />
</video>
<!--[if IE]>
<p><a href="path/videofile.mp4">Video ansehen</a><br />
Für direktes Abspielen des Videos benötigen Sie Safari 4 oder Firefox 3.5.</p>
<![endif]-->

Nichts ist perfekt, aber das hier gefällt mir irgendwie:

+ Kurzer Embed-Code
+ Kompatibel mit modernen und coolen Browsern
+ kein JavaScript und kein Flash notwendig
+ (Abhängig von der Browser-Implementation, aber:) Performance
– IE-Nutzer sehen nur den Link, obwohl der IE via Flash das MP4 auch abspielen könnte
– Immer noch zwei Dateiformate nötig

Bleibt die Frage, ob wir die nächsten Monate oder Jahre wirklich alle Videos wieder in zwei Formaten ausspielen wollen, wo wir doch gerade gedacht haben, dass sich H.264 gegen das leidige FLV durchgesetzt hat. Kaum hat man dank Flash den heiligen Gral in der Hand, schon will man wieder auf Flash verzichten und voll auf das <video>-Element setzen. Uns geht der Diskussionsstoff nicht aus, denke ich :-)

Letztlich bleibt zu hoffen, dass sich ein Videoformat durchsetzt, welches dann von jedermann auch benutzt werden kann. Ian Hickson von der HTML5-Arbeitsgruppe beschreibt das schon ganz richtig; Es gibt zwei vorstellbare Szenarien:

  1. OGG Theora wird qualitativ noch besser, es wird sichergestellt, dass keine versteckten Patente im Code stecken (da ist noch ein gewisses Risiko), und es wird Hardware-Beschleuniger-Chips geben.
  2. H.264 klärt die Situation mit den Lizenzkosten, so dass es sich für Firefox und Opera lohnt, den Codec zu unterstützen. Auch kleinere Firmen, die ein paar Videos ins Netz stellen, sollten nicht zu Lizenzzahlungen gezwungen sein. Dies müsste klar kommuniziert werden.

Mein persönlicher Wunsch wäre ja, dass H.264 technisch so bleibt wie bisher, aber komplett frei nutzbar gemacht wird. Kann sich da nicht Bill Gates mal engagieren? Im Zuge von Kultur-Mäzentum könnte er doch mit ein paar Milliarden den Codec komplett freikaufen und für alle verfügbar machen. Nur so’n Vorschlag!

update 4.2.2010: H.264 bleibt bis Ende 2016 lizenzkostenfrei für Gratis-Videos im Internet

17 Kommentare

  1. flv am 3. Juli 2009 #

    meine güte, was für ein theater wegen simpler video-einbindung momentan gemacht wird. swfobject + flash video und fertig! und die 5 leute, die du damit »ausschließt« (oh oh!) wollen dein video sowieso nicht sehen…

  2. Gerrit am 3. Juli 2009 #

    @flv: Für die Gegenwart hast Du sicher recht. Aber hier geht es um die Zukunft, und ich glaube nicht, dass Flash noch in drei bis vier Jahren der Standard für Videoabspielung im Netz ist. Mark my Words!

  3. goose am 3. Juli 2009 #

    Was Flash m.E. im Moment fehlt ist eine Hardwarebeschleunigung. Ich finde doof, dass ständig der Lüfter in meinem Macbook anspringt. Aber ich meine mal gelesen zu haben, dass Adobe mit den Graka-Herstellern daran arbeitet.

  4. Gerrit am 3. Juli 2009 #

    @goose: Was Adobe alles behauptet, ist teils frei erfunden, Wunschdenken oder Politik. Ich würde dem nicht trauen!

  5. Schepp am 3. Juli 2009 #

    Schöne Fragestellung.

    Was ich an Deinem Code auszusetzen hätte, wäre dass Du via Conditional Comments auch alle zukünftigen IEs aussperrst. Was aber, wenn der IE 9 möglicherweise das Video-Element unterstützt? Dann musst Du nochmal ran und das CC verändern.

    Wenn Du demgegenüber das CC jetzt schon auf IE 8 und kleiner auslegst, dann kann es andersherum sein, dass der IE 9 das Video-Element nicht unterstützt.

    Daher wäre mein zukunftssicherer Vorschlag folgender mit adaptiver Degradation ohne CC:

    <head>
    <style>
    .videoouterwrapper {
    	width: 480px;
    	overflow: hidden;
    }
    .videoinnerwrapper {
    	width: 200%;
    }
    .videoinnerwrapper video,
    .videoinnerwrapper p {
    	width: 50%;
    	float: left;
    }
    </style>
    </head>
    <body>
    <div class="videoouterwrapper">
    	<div class="videoinnerwrapper">
    		<video width="480" height="320" controls="controls">
    			<source src="path/videofile.mp4" type="video/mp4" />
    			<source src="path/videofile.ogg" type="video/ogg" />
    		</video>
    		<p><a href="path/videofile.mp4">Video ansehen</a><br />
    		Für direktes Abspielen des Videos benötigen Sie Safari 4 oder Firefox 3.5.</p>
    	</div>
    </div>
    </body>
    

    Die einzigen, denen es dann vielleicht noch komisch vorkommen könnte, sind die Screenreader-Benutzer mit Video-tauglichen Browsern. Oder?

  6. Gerrit am 3. Juli 2009 #

    @Schepp: habe deinen Code mal manuell lesbar gemacht…

    Ist das nicht ein bisschen viel Schachtelung, nur um den Text zu verstecken? Okay, ist nicht unclever gemacht, aber das geht doch auch irgendwie eleganter, oder? Höhe festlegen und nach unten verstecken? Dann brauchst Du nur eine Hülle drumherum…

  7. Schepp am 3. Juli 2009 #

    Dank Dir! Ich hatte es zuerst selbst mit dem genannten Textile-Markup versucht – erfolglos (zumindest in der Vorschau).

    An das Höhe-Festlegen hatte ich auch erst gedacht (und übrigens auch über position relative/absolute sinniert), aber bei fester Höhe hast Du dann im IE zu viel vertikalen Leerraum. So bin ich bei der oben beschriebenen Fassung gelandet, die sich in der Vertikalen anpasst.

  8. Gerrit am 3. Juli 2009 #

    @Schepp: Okay, daran hatte ich nicht gedacht. Ich persönlich würde allerdings doch lieber auf den zweiten Wrapper verzichten und im IE die Lücke akzeptieren. Man kann ja vielleicht auch einen Screenshot des Videos dort einsetzen, oder?

  9. Schepp am 3. Juli 2009 #

    Klaro, jeder wie er mag. Mir ging es letztlich nur darum, eine »Fire-and-Forget«-Lösung zu haben. Sonst fällt das irgendwann alles wieder auf einen zurück, und das kann nerven (oder andererseits unverhoffte Einnahmen generieren).

  10. Willi am 3. Juli 2009 #

    Sorry, aber Mac-User wissen, dass Flash noch nie der Heilige Gral war! Ein tollwütiger Wolf im Schafspelz vielleicht, aber proprietäre und schlecht an andere Systeme angepasste Technologien haben wirklich nichts in einem freien Web zu tun (wink auch an Silverlight)!

    Ich mag HTML5 und den überflüssigen Video-Tag nicht (was sprach gegen XHTML2 und object??), aber ich kann das Kompatibilitätsproblem nicht ganz verstehen. Safari hat wie viel Prozent Marktanteil? Wenn einer der wenigen Safari-User ein Video auf einer Website sehen will, soll er sich doch die 5 Minuten Zeit nehmen und ein Ogg-Plugin für Quicktime installieren. Und das sage ich als Mac- und Safari-Nutzer! Damit hat man dann auch gleich systemweite Unterstützung für Vorbis und Theora. Okay, das iPhone bliebe leider draußen. Aber wenn nur genügend Druck aufkommt, lenkt Apple bekanntlich auch irgendwann ein.

    Da ist die fehlende IE-Unterstützung schon ein viel größeres Problem. Aber Microsoft arbeitet ja bereits seit einigen Jahren daran, sich selbst aus dem Markt zu manövrieren. Mit etwas Glück ist das nur noch eine Zeitfrage. ;) Und Google hat zwar Recht damit, dass Ogg Theora noch nicht gerade das Gelbe vom Ei ist, aber es scheint mir der beste Kompromiss zu sein.

  11. LKM am 3. Juli 2009 #

    Da die Idee scheinbar aus meinem Blog stammt muss ich sie wohl auch verteidigen. Also:

    1) Weshalb nicht Flash? Weil es für mich einfacher ist, den Film als .ogg und .mp4 aus QuickTime zu exportieren und danach kurz ein bisschen supereinfaches HTML zu schreiben. Ausserdem gefällt mir das einfache, Browser- und System-konsistente UI von <video> besser, und ich mag das langsame, unstabile Flash nicht. Schlussendlich: die <video>-Lösung ist Zukunftssicher. Ich denke nicht dass Flash noch lange so weit verbreitet sein wird wie es jetzt ist.

    2) Was passiert wenn IE9 <video> kann? Entweder werde ich die Einträge anpassen, oder ich werde einfach damit leben dass die armen IE-Anwender halt weiterhin keine Videos sehen — abhängig davon ob sich viele Leute beklagen.

  12. Cedric am 3. Juli 2009 #

    Eigentlich ist es sehr schade was da heute in der WhatWG passiert ist. Zusammengefasst haben alle Beteiligten verloren und der einzige Gewinner ist in diesem Fall Adobe mit Flash. Dabei hätte es ja eine echte Chance gegeben Adobe und somit Flash bei Videoinhalten im Netz zu Sturz zu bringen. Daraus wird jetzt wohl erst einmal nichts…

  13. nicht Matt am 4. Juli 2009 #

    Was spricht dagegen den IE-Kram ins video-Tag einzufüllen?

    also
    <video><source …> IE bitte <a ..>klicken</a></video>

  14. Schepp am 4. Juli 2009 #

    @nicht Matt: Du rockst! So ist es perfekt.

  15. @dworni am 5. Juli 2009 #

    Firefox 3.5 unterstützt ja scheinbar was HTML5mässiges:

    Firefox 3.5 has support for the HTML5 <video> and <audio> elements including native support for Ogg Theora encoded video and Vorbis encoded audio.

  16. Video-Online anschauen am 13. Oktober 2009 #

    Sehr guter Artikel! Video-Plattformen sorgen immer wieder für neue Überraschungen. Danke für den ausführlichen Artikel.
    Ganz gute Seite habt ihr da! Ich empfehle euch auf jeden Fall weiter.

    mfg.
    http://musikdownloaden.mu.ohost.de

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.