Video im Web - die momentan beste Lösung

Es ist ja nicht so, dass ich nicht alles versucht hätte. Aber HTML5-Video ist momentan, was die Browserunterstützung angeht, noch so dermaßen unausgereift, dass zur Zeit eben noch kein Weg an Flash vorbeiführt. So bedauerlich ich das persönlich auch finden mag.

Flash ist für Web-Videos immer noch 1. Wahl

Warum? Nun, Safari 4 und Firefox 3.6 ignorieren die Eigenschaft preload="none", was dummerweise bedeutet, dass ein eingebetteter Film bei Seitenaufruf ohne weitere User-Interaktion sofort nachgeladen wird. Was ja bei einem Film auf einer Seite noch angehen mag, bei sechs oder sieben jedoch völlig inakzeptabel ist – Stichwort Bandbreite, unnötige Wartezeiten, Serverbelastung etc. Darüber hinaus gibt es in Safari erst ab Version 5 und QuickTime 10 die Möglichkeit, HTML5-Videos bildschirmfüllend zu vergrößern – eine Sache, die mit Flash problemlos funktioniert.

Deswegen ist auf Baulefilm auch nicht die bekannte Dive into HTML5-Methode implementiert (Kurzfassung: mp4 für Safari und Chrome, ogg für Firefox und Opera, Flash-Fallback für IE und den Rest), sondern die eingebetteten Videos werden ganz klassisch mit einem Flash-Player angezeigt. Und zwar ohne überdimensionierte Javascript-Frameworks oder Libraries, lediglich swfobjects.js 1.5 (7 KB) wird eingesetzt.

Wer die Videos nicht sehen kann, kommt mit Klick auf „Direktlink“ zu einer H.264-Version, die – je nach Browser/OS-Fähigkeiten – entweder direkt angezeigt oder heruntergeladen wird.

Und was ist mit iPad und iPhone?

iPad- und iPhone/iPod-User werden natürlich nicht ausgeschlossen, sie werden per Javascript auf eine Seite umgeleitet, auf der die Videos in einer H.264-Version angeboten werden. Dort wird dann per CSS3-Media-Query noch zwischen iPad und iPhone/iPod unterschieden: das iPad bekommt wegen des größeren Bildschirms höher aufgelöste Videos.

Natürlich ist diese Lösung – obwohl man sich die Erstellung einer ogg-Version für Firefox spart – aufwändiger als die oben erwähnte mp4/ogg/Flash-Fallback, weil ja zwei HTML-Seiten programmiert bzw. gepflegt und mehrere Auflösungen bereitgehalten werden müssen. Aber wie sagte man – jedenfalls so ähnlich – schon in den 1990ern so schön: „… und immer an die User denken!“

Hier noch mal alles zusammengefasst und mit Codebeispielen:

Videos ganz normal (oder mit dem oben erwähnten swfobjects) in die HTML-Datei einbetten, mit einem selbst programmierten oder einem Flash-Videoplayer seiner Wahl (z. B. JW Player oder Flowplayer).

In den Headerbereich der HTML-Datei folgendes Script einfügen, damit iPad/iPhone/iPod auf iPadPhone.html umgeleitet werden:

<script type="text/javascript">
  if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
    document.location = "/pfad/zu/iPadPhone.html";
  }
</script>

In der zuständigen CSS-Datei die Klassen iPad und iPhone anlegen, iPhone verbergen:

.iPad {
  display:block;
}
.iPhone {
  display:none;
}

In der gleichen CSS-Datei per CSS3-Media-Query die (Un-)Sichtbarkeit der beiden eben angelegten Klassen für iPhone/iPod vertauschen:

@media only screen and (max-device-width: 480px) {
  .iPad {
    display:none;
  }
  .iPhone {
    display:block;
  }
}

Die Videos in iPadPhone.html mit HTML5 einbetten, dabei für die iPad und iPhone/iPod-Versionen entsprechende DIVs anlegen:

<div class="iPad">
  <video poster="pfad/zu/meinfilm-poster.jpg" width="468"  height="264" src="pfad/zu/meinfilm-iPad.mp4">
</div>
<div class="iPhone">
  <video poster="pfad/zu/meinfilm-poster.jpg" width="100%" src="pfad/zu/meinfilm-iPhone.mp4">
</div>

Et voilà: Sämtliche Desktop/Laptop-User (mit installiertem Flash-Plugin, versteht sich) sehen die Filme über den Flash Player, iPad/iPhone/iPod-User sehen die für ihre Auflösung optimierten H.264-Versionen.

In meinen Augen zur Zeit die beste Lösung für Video im Web. Aber nächstes Jahr, wenn IE9 verbreitet ist und Mozilla.org endlich eine H.264-Lizenz für Firefox 5 erworben hat, sieht sicher alles wieder ganz anders aus.