Der folgende Email-Dialog bezüglich dieses Vorschlags war dann allerdings ernüchternd: Es folgten nicht nur Fragen zum Video-Element, die von Unkenntnis der Technik zeugten (Fragestellungen wie Beherrscht der Browser gängige Video-Kompressionen ? werden an verschiedensten Stellen hinlänglich beantwortet), sondern auch eine klare Ansage bzgl. eines eher konservativen Technik-Ansatzes: Sollte sich HTML 5 mal zu einem Standard entwickeln, wird der Deutsche Bundestag vermutlich nicht die erste öffentliche Institution sein, die auf diesen Zug aufspringt. Vor 2022 wird dieser Maßgabe nach also wohl eher wenig passieren.

Nichtsdestotrotz habe ich eine Demoseite mit einem sehr kurzen Clip (17 s) erstellt, damit man sehen kann, wie eine Lösung aussehen könnte: Neue Versionen von Firefox, Opera und Chrome sowie Safari mit nachgerüsteten Codecs spielen hier das Theora-Video ab, Safari „Vanilla“ verwendet die beim Bundestag gehostete H.264-Version. Browser ohne HTML5-Unterstützung ignorieren das Video-Element und nutzen somit ein Flash-Applet. Internet Explorer ohne Flash bleibt außen vor, aber das tut er auch ohne Video-Element.

Bis HTML 5 spezifiziert und implementiert ist, kann man für standardkonformes Einbetten von Videos das in (X)HTML enthaltene Object-Element verwenden. Bei dieser Vorgehensweise wird das Video allerdings üblicherweise sofort abgespielt; dies ist nicht immer erwünscht. Durch den Einsatz von Javascript lässt sich dieser Mangel beheben.

Zunächst wird innerhalb des Body-Elementes der Website ein Object-Element erstellt. Dieses erhält ein Id-Attribut, um es identifizierbar zu machen. Zudem erhält es Fallback-Inhalt, der auf das Fehlen eines passenden Mediaplayer-Plugins hinweist. Als Film wird hier die 480p-Version von Big Buck Bunny verwendet.

<object id="video" type="application/ogg" width="720" height="400" data="movie.ogg" > <p> <strong>Dein Browser unterstützt das Abspielen von <em>Ogg-Theora</em>-Videos nicht.</strong> </p> <p> Um dieses Video anzuschauen, installiere <a href="http://www.videolan.org/vlc/">VLC</a>, <a href="http://www.mplayerhq.hu/design7/dload.html">mplayer</a> or <a href="http://wiki.xiph.org/index.php/TheoraSoftwarePlayers">einen anderen Mmediaplayer</a>, der <a href="http://theora.org/faq/#what">Ogg-Theora</a>-Videos abspielen kann. </p> <p> For installation instructions, see the <a href="http://en.wikipedia.org/wiki/Wikipedia:Media_help_(Ogg)">Wikipedia Media Help</a>. </p> </object>

Damit das Object-Element nicht sofort angezeigt wird, fügt man zwei Javascript-Funktionen hinzu: Eine, die das Video versteckt, und eine zweite, die es für die Dauer des Filmchens anzeigt und dann die “Versteck-Funktion” aufruft:

<script type="text/javascript"><![CDATA[ function hide_movie() { document.getElementById('video').style.display = 'none'; document.getElementById('preview').style.display = 'block'; } function show_movie() { document.getElementById('video').style.display = 'block'; document.getElementById('preview').style.display = 'none'; window.setTimeout("hide_movie()",36000); } ]]></script>

Vorschaubild und Button – zum Aufrufen des Javascripts – sind auch fein ! Zugterletzt bekommt das Body Object-Element ein Attribut onload="hide_movie()" style="display:none;", um das Video zu verstecken; zu beachten ist, dass dieses – zumindest im Firefox 3.0 – nur ausgelöst wird, sofern das im Object-Element referenzierte Video pufferfrei ladbar ist Nutzer ohne Javascript das Nachsehen haben.

<div id="preview"> <img src="preview.jpg" alt="Vorschaubild" height="400" width="720"/> <button name="playback" type="button" onclick="show_movie()" value="Plackback"> <img src="media-playback-start.png" alt="Plackback" height="128" width="128" /> </button> </div>

Wer Spaß daran hat, darf gerne den Playback-Button per CSS auf das Vorschaubild legen und einen Download-Button hinzufügen. Die vorliegende Methode ist übrigens XHTML-konform, funktioniert auch ohne Javascript, und wurde ursprünglich als Teil des (noch unfertigen) Video-CMS Yolanda entwickelt. In diesem Sinne: Friede den Webstandards, Krieg den proprietären Palästen !

Update: Demo; blöderweise wird onload="hide_movie()" zumindest im Firefox 3 erst nach vollständigem Puffern des Videos ausgelöst. Ideen ?

Update: Neue Demo. Aber ohne Javascript ist der Button funktionslos.