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.
aber.. aber.. aber dann muss doch garnicht mehr jeder Flash installieren? Was soll dann aus der armen kleinen Firma Adobe werden?
Nett! Aber hast Du keine Testseite gebaut, wo man das ganze unter diversen Browsern mal auf Herz und Nieren prüfen kann? Wäre sehr hilfreich. Oder habe ich einen Link übersehen?
Hab den Link ausch schon gesucht. Aber theoretisch hört es sich ja ganz gut an.
Muss sich halt noch zeigen ob es auch wirklich in der Praxis funktioniert.
Gesagt, getan !
Hm doch nicht alles so rosig:
Hab VLC und den mplayer installiert und bekommw im Firefox 3 trotzdem die Meldung „Dein Browser unterstützt das Abspielen von Ogg-Theora-Videos nicht“.
Installier doch die Plugins ‽
Howto steht bei Wikipedia.
Plugins hab ich auch installiert.
Aber ich hab jetzt auch raus gefunden woran es liegt. Ich hab den VLC installiert wie ich noch mit dem Firefox 2 unterwegs war. Und scheinbar hat der 3er das Plugin nicht mit übernommen. Im 2er geht’s jedenfalls und nach einer Neuinstallation im 3er jetzt auch.
Vielleicht hätte ich dass mal überprüfen sollen bevor ich hier rum mecker. Andererseits ist es ja nicht nur ob es geht sondern auch woran es alles hängen kann.
Ich würde jedenfalls den Hinweis dass man den VLC usw. installieren muss noch um einen Hinweis ergänzen dass mann vor allem auch das entsprechende Plugin installieren sollte.
Wie wäre es, wenn Du noch eine Variante mit einem allgemein üblichen Videoformat bastelst? OGG Theora hat außerhalb der Linux-Gemeinde eine Verbreitung von geschätzten 3 %.
Mach doch eine Variante für QuickTime-kompatible Dateicontainer (MOV,3GP, MP4), und noch eine weitere Variante für WindowsMedia-Filmchen. Weil: Da ist die Praxis! In der Theorie bringen mir standardkonforme Techniken leider gar nichts!
Naja, man muss ja bloß den MIME-Typ ändern, strukturell ist das nichts anderes. Firefox und Opera sollen aber bald nativ Theora können wg. dem Video-Element aus HTML 5; Chris Double meinte im IRC, dass Firefox 3.1 gegen Ende des Jahres mit ebendiesem Feature käme.
flash ist eines der wenigen formate, die jeder mainstreambrowser problemlos handlen kann. selbst eine anständige bufferingmethode lässt sich ganz einfach implementieren. ganz im gegensatz zu anderen playern, wo die videos ständig ruckeln, wenn sie denn überhaupt geladen werden.
einen flashplayer kann ich selber bauen und konfigurieren wie ich will, und ich kann mir dabei sogar sicher sein, das die kompatibilität dabei nicht eingeschränkt wird. bei anderen playern geht das nicht.
btw: der quelltext in deinem artikel zerschiesst den frame
Stage6 hat sowas ähnliches gemacht – ohne Flash – und war sehr erfolgreich.