Videos einbetten – standardkonform und ohne Flash
Für Videos wird im Web meistens Adobe Flash verwendet – Gerrit van Aaken berichtete (via Peter Kröner), dabei ergeben sich allerdings einige Problematiken, die sowohl technischer, als auch ideologischer Natur sind. Mit (X)HTML5 soll zwar eine Lösung – in Form des Video-Elements – erscheinen, da die Spezifikation jedoch noch nicht fertiggestellt ist, wird diese Möglichkeit zur Zeit im besten Fall nur von Entwicklerversionen der Browser unterstützt.
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;"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.