Flash einbinden
Um einen Flash-Film in ein HTML-Dokument einzubetten, verwendet man für gewöhnlich den folgenden Code, der so von Macromedia Flash erzeugt wird:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="200" id="yugop_slider" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="dateiname.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="dateiname.swf" quality="high" bgcolor="#ffffff"
width="500" height="200" name="dateiname" align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Was der ganze Summs bewirkt, kann man hier und dort nachlesen.
Ein Haufen Zeug. Es gibt ein weiteres Problem für Standards-Puristen wie mich: Der Code ist nicht standard-konform. Was kann man unternehmen, um Flash-Filme einerseits kompakt und andererseits gemäß den Webstandards einzubinden?
Es gibt einen Ansatz von Drew McLellan, die er im November 2002 im Artikel »Flash Satay« auf A List Apart vorgestellt hat. [In dem Artikel steht auch, weswegen der obige Code-Block nicht standard-konform ist.]
Die dort beschriebene Methode hat einen entscheidenden Nachteil, wie in der Diskussion zum Artikel zu lesen ist: IE/Win streamt so eingebundene Flash-Filme nicht mehr.
Streaming bedeutet, dass der Film sofort zu spielen anfängt, während der Rest noch aus dem Web nachgeladen wird. Wenn man sich einigermaßen geschickt anstellt, kann man so in vielen Fällen die lästigen Preloader vermeiden. Mit der McLellan-Methode funktioniert das nicht: Der Film beginnt erst zu spielen, wenn er komplett geladen ist.
Doch verzagt nicht, meine Freunde! Es gibt eine Alternative: die Javascript-Methode.
Sie kam auf, als es um den Rechtsstreit zwischen Microsoft und Eolas ging. Eolas verklagte Microsoft wegen eines Patents zur Einbindung von Plug-ins in Webseiten. Ein Workaround bestand darin, nicht die <object>- und <embed>-Tags zu verwenden, sondern eine Javascript-Funktion aufzurufen, die die HTML-Tags quasi nachträglich in die HTML-Datei schreibt, bevor sie vom Browser angezeigt wird.
Die Ansprüche von Eolas sind vorerst abgewehrt, doch die Methode lässt sich nach wie vor verwenden.
Macromedia hatte eine recht ausführliche Sektion zu diesem Thema auf ihrer Website, aber die Helden haben den Bereich stillgelegt, ohne das weitere Potential der Technik zu erkennen. Bei Apple und Real – deren Plugins Quicktime-Player und Real-Player vom Eolas-Patent ebenso betroffen waren – gibt es allerdings noch ausführliche Texte, die sich beinahe auf’s Wort gleichen.
Die Anleitungen dort und die zur Verfügung gestellten Javascript-Dateien sind ziemlich kompliziert. Mein Freund Holger hat sie vereinfacht und verwendet diese Methode, um Flash standard-konform in HTML-Dateien einzubinden.
Er bindet Flash auf diese Weise in der HTML-Datei ein:
<script language="JavaScript" type="text/javascript">insertflash ();</script>
<noscript>Diese Version der Website benötigt Javascsript und Macromedia Flash.
Eine Version in HTML finden Sie auf der <a href="http://www.hs-2.de">Startseite</a>.</noscript>
Damit Holger den Funktionsaufruf insertflash(); verwenden kann, muss er natürlich irgendwo hernehmen. Dazu baut er innerhalb des <head>-Bereichs folgendes ein:
<script type="text/javascript" language="JavaScript" src="scripts.js"></script>
Das bewirkt, dass eine externe Javascript-Datei zugeladen wird. Das Auslagern in eine externe Datei bietet sich an, da der User dann den selben Code nicht ständig mitladen muss, wenn er weitere Seiten der Domain besucht und der Code jedes Mal im <head> steht. Außerdem wird eine externe Datei gecacht.
In der Datei steht unser bekannter Code von vorhin. Natürlich umgarnt von Javascript-Befehlen, die die bekannten HTML-Tags auf die Seite schreiben:
function insertflash () {
document.write ('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="100%" height="100%" id="hs-2" align="">');
document.write ('<param name="movie" value="hs-2.swf" />');
document.write ('<param name="quality" value="high" />');
document.write ('<param name="scale" value="noscale" />');
document.write ('<param name="bgcolor" value="#FFFFFF" />');
document.write ('<embed src="hs-2.swf" quality="high"
scale="noscale" bgcolor="#FFFFFF" width="100%" height="100%"
name="hs-2" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write ('</object>');
}
Ich konnte Holgers Ansatz noch nicht 1:1 übernehmen, da ich nicht nur einen Flash-Film einbetten wollte wie er auf seiner »dienstlichen Website« HS-2 – ich will öfter Flash einbinden, da ich im Rahmen von my two cents ja über den Flash-Unterricht in der SAE berichte.
Bei mir würden sich also die Dateinamen laufend ändern, weil meine diversen Flash-Filme ja nicht alle hs-2.swf heißen. Eine Möglichkeit wäre, bei jedem einzubindenden Flash-Film eine andere Funktion aufzurufen: insertflash1();, insertflash2(); und so weiter. Aber das wäre einigermaßen dämlich, wenn man schon eine Funktion vor der Nase hat. Eine Funktion baut man immer dann, um gleichartige Probleme auf die selbe Weise zu lösen, ohne jedes Mal das Rad neu zu erfinden.
Um dieses Dilemma zu umgehen, gibt es in der Programmierung eine geile Sache, die nennt sich »Funktionsaufruf mit Parameterübergabe«. Beim Aufrufen der Funktion insertflash(); in der HTML-Datei übergebe ich dieser Funktion in den runden Klammern die Parameter, die sich in verschiedenen Szenarien ändern können.
Für mich hat es sich als praktisch erwiesen, die folgenden Parameter zu übergeben:
- Den Dateinamen (src)
- Die Breite des Flash-Films (width)
- Die Höhe des Flash-Films (height)
- Die Mindestvoraussetzung bzgl des Flash-Players (version)
- Die Hintergrundfarbe (bgcolor), da ein Flash-Film quasi durchsichtig ist
Man könnte noch weitere Parameter übergeben wie z.B. die Tag-Attribute id und name (wenn man das Movie per Javascript ansprechen möchte), aber das brauche ich im Moment nicht.
Ich übergebe auch nur den Dateinamen, nicht den kompletten Pfad, da sich bei mir alle Flash-Filme im gleichen Verzeichnis befinden (daher habe ich den Pfad »fest verdrahtet« in die Javascript-Datei geschrieben).
Die Einbindung im <head>-Bereich passiert wie gehabt:
<script type="text/javascript" language="JavaScript" src="insertflash.js"></script>
An den Stellen in den HTML-Dateien, wo ich Flash-Filme anzeigen lassen möchte, setzte ich einen Funktionsaufruf wie folgt:
<div align="center">
<script language="JavaScript"
type="text/javascript">insertflash('yugop_slider.swf','500','200','6','ffffff');</script>
</div>
[Ich verzichte auf einen <noscript>-Bereich, da sich der Inhalt des Flash-Films aus dem Kontext des umgebenden Weblog-Eintrags ergibt.]
Auf diese Weise habe ich zum Beispiel den Film yugop_slider.swf in meinem Eintrag »Yugop« eingebunden. Das <div>-Tag sorgt für eine horizontale Zentrierung innerhalb des übergeordneten Elements (bei mir ein anderes <div>), dann kommt der Funktionsaufruf. Es werden die Parameter src (’yugop_slider.swf’), width (’500′), height (’200′), version (’6′) und bgcolor (’ffffff’) übergeben.
Die hinzugeladene Javascript-Datei übernimmt diese Parameter in der Funktion insertflash();. Der Javascript-Code sieht jetzt ein bisschen anders aus, da ja einige Dinge nicht mehr fix sind:
function insertflash(src,width,height,version,bgcolor) {
document.write ('<object style="border:1px solid black"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='
+ version + ',0,0,0" width="' + width + '"
height="' + height + '" id="" align="">');
document.write ('<param name="movie" value="http://www.my-two-cents.de/swf/' + src + '" />');
document.write ('<param name="quality" value="high" />');
document.write ('<param name="scale" value="noscale" />');
document.write ('<param name="bgcolor" value="#' + bgcolor + '" />');
document.write ('<embed src="http://www.my-two-cents.de/swf/'
+ src + '" quality="high" scale="noscale" bgcolor="#'
+ bgcolor + '" width="' + width + '" height="'
+ height + '" name="" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write ('</object>');
}
Die Werte, die aus der Parameterübergabe ankommen, werden per String-Verknüpfung in die Javascript-Befehle eingeflochten (das bewirken die ganzen Hochkommata ‘ und die Plus-Zeichen).
+++
Jehova!
Fazit: Die ganze Aktion bringt drei Vorteile. Erstens spart man sich und den Usern eine Menge an Code, die Sache ist sehr kompakt. Zweitens funktioniert diese »Macromedia-Methode« auf allen wichtigen Browsern, und auch IE/Win streamt die Flash-Filme. Drittens kommen die Seiten dennoch durch den Validator, da dieser den »unsauberen« gar nicht zu Gesicht bekommt.
Daneben gibt es leider auch zwei Nachteile. Den ersten kann man mit diesem uns allen bekannten Spruch beschreiben:
»Ihr macht die Hausaufgaben nicht für die Schule, sondern für Euch.«
Soll heißen: Es ist zwar schön, dass unsere Seiten jetzt trotz Flash wieder validieren, aber das liegt nur daran, dass wir den bösen Code vor dem Validator verstecken. Nach wie vor verfüttert man damit den nicht-validen Code an die Browser (deswegen sollte der Validator verwendet werden: um Fehler im Code aufzuspüren, bevor man diesen an die Browser gibt). Es ist eine Art Hack, aber ich finde ihn legitim. Eine endgültige Lösung kann es nur geben, wenn Macromedia bzw. Microsoft dafür sorgen, dass IE/Win mit einer standard-konformen Flash-Einbindung klar kommen.
Holger sagt:
»Für die Verfechter der Reinen Lehre ™ ist es nicht ganz koscher, weil ich ja über Javascript wieder ein Embed-Tag einbinde. Der Code, den der Browser am Ende bekommt, ist also nicht reines XHTML.«
Der zweite Nachteil ist, dass die Lösung auf Javascript beruht. Wessen Browser kein Javascript interpretieren kann, oder wer Javascript z.B. aus Sicherheitsgründen deaktiviert hat – wobei JS nicht an sich unsicher ist, sondern »nur« mangelhafte Implementierungen, allen voran im IE –, der bekommt den Flash-Film nicht zu sehen.
Ich behaupte jedoch mal kühn, dass, wer Javascript nicht interpretieren kann oder will, auch kein Flash-Plugin installiert hat bzw. auf Flash-Filme keinen Wert legt.
Über diese Nachteile muss man sich bewusst sein und sie abwägen, ehe man diese Methode einsetzt.
Hier der direkte Link zu meinem Javascript-File, das die Funktion mit Parameterübergabe enthält: www.my-two-cents.de/insertflash.js
Dieser Text und der Code unterliegen einer »Creative Commons«-Lizenz: Attribution, Share Alike.
Erschienen am
Donnerstag, 22.04.2004 @ 21:08
Tags: flash, SAE