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.