Webkrauts » Flash mit FlashReplace einbinden

Hauptmenü

Suche

Newsfeeds

Artikel

Flash mit FlashReplace einbinden

21. Türchen des Webkrauts-Adventskalenders

Bei der Einbindung von Flash gibt es ein paar Feinheiten und Stolpersteine, über die man Bescheid wissen sollte. Der normale, traditionelle Weg der Flasheinbindung ist eine Kombination der Elemente OBJECT, EMBED und PARAM. Der IE benötigt im OBJECT-Element Attribute, die eine Interpretation durch Mozilla unmöglich machen. Deshalb nutzt Mozilla das Element EMBED, das nicht Teil der W3C-Standards ist

Ansätze zur Einbindung via Javascript

Die normale Flasheinbindung ist also in der Gesamtschau invalide. Zudem benötigen wir auf alle Fälle ein Javascript, um das EOLAS-Problem im IE zu umgehen. Es handelt sich hierbei um ein Patent, das Microsofts Flasheinbindung als ActiveX-Objekt betrifft. Ohne den Javascript-Trick muss man erst ein Flashelement durch einen Klick "aktivieren" und kann erst dann einem darin enthaltenen Link folgen. Da man also auf Javascipt bei einem Großteil der Betrachter angewiesen ist lag es nahe, auch die Einbettung via Javascript vorzunehmen. Es gibt hierfür ein paar Ansätze, die alle dem Paradigma des "unobtrusive Javascript" folgen. Die bekanntesten Ansätze sind SWFObject und UFO – für jQuery gibt es ein Plugin.

Die kompakte Alternative: FlashReplace

Robert Nyman hat mit FlashReplace einen sehr kompakten Ansatz als Alternative veröffentlicht. Das Skript hat 2 KB und ist sehr einfach zu nutzen.

Man erstellt erst den alternativen Inhalt – meist ein Ersatzbild, seltener einen Ersatztext – für den Fall, daß kein Flash-Plugin oder eine alte Version installiert ist. Danach wird dieser alternative Inhalt via DOMScripting ersetzt. Dafür muss man FlashReplace entweder innerhalb einer window.load-Lösung aufrufen oder aber das Javascript nach dem alternativen Inhalt einbinden.

Der Aufruf kann folgendermaßen aussehen:


<p id="ersetzmich"><img src="keinflash.gif" alt="" /></p>
<script type="text/javascript">
    FlashReplace.replace("ersetzmich", "flashtest_v5.swf",
                                 "flash-id1", 100, 100, 5);
</script>

Im Funktionsaufruf wird zuerst die ID des zu ersetzenden Containers angegeben. Es muss sich hierbei tatsächlich um eine ID handeln, es kann keine Klasse sein. Es folgen Adresse und Name des Flashfiles und die ID, die der später entstehende Flash-Container haben soll. Danach werden Breite und Höhe sowie die Flash-Version angegeben. Ein Verzicht auf die Versionsangabe aktiviert die Default-Einstellung: Version 7.
Sollten dem Flashfilm ein paar Parameter mitgegeben werden müssen, beispiesweise mode="transparent" oder eine Variable, dann fügt man diese optionalem Parameter in geschweiften Klammern nach der Versionsangabe ein.


FlashReplace.replace("ersetzmich2", "flashtest_v5.swf",
"flash-id2", 100, 100, 5, {wmode: "opaque"});

Der Teufel kann bei der Anwendung eines solchen Skriptes allerdings im Detail stecken. Man muss darauf achten, daß beim Aufruf des Javascriptes das DOM schon geladen ist. Deshalb sollte man den Aufruf am besten wie oben gezeigt nach dem zu ersetzenden Container platzieren. Möchte man das Skript hingegen auslagern oder im Head platzieren, so sollte eine der zahlreichen window.onload-Lösungen genutzt werden.

Update aus aktuellem Anlass: Microsoft hat sich mit dem Patentinhaber geeinigt und angeündigt, daß der IE demnächst keine Aktivierung von Flashinhalten mehr benötigen wird. Das wird allerdings voraussichtlich erst ab April 2008 eintreten. Es steht zu vermuten, daß auch nur der IE7 und folgende Versionen betroffen sein werden.

Zum Autor

Jens Grochtdreis arbeitet als "Senior Frontend Developer" bei netz98 in Mainz. Neben seinem Weblog betreut er auch die CSS-FAQ und setzt sich mit den Webkrauts für moderne, standardkonforme Webseiten ein.

Info:: Flash mit FlashReplace einbinden ist Beitrag Nr. 358
Autor:: Jens Grochtdreis am 21. Dezember 2007 um 00:01
Kategorie:: Adventskalender 2007

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Mein persönlicher Favorit zum validen Einbinden ohne Javascriptist folgernder mittels "conditional comments" gelöster Ansatz:
<object data="header.swf" type="application/x-shockwave-flash" width="636" height="161" class="flashHeader"><param name="autoplay" value="true" /></object>

Kommentar von Marco - 21. Dezember 2007 um 08:38
2.

Ich setzte bei mir im Blog diesen Code ein, der sowohl in IE als auch Mozilla validen Code erzeugt:
<object type="application/x-shockwave-flash" style="width:400px; height:300px;" data="http://www.domain.de/film.swf"> <param name="movie" value="http://www.domain.de/film.swf"/> <param name="wmode" value="transparent"/></object>

Beispiel: Olympus: Bergsteiger

Kommentar von Daniel - 21. Dezember 2007 um 11:16
3.

@Marco: Das ist doch ein modifizierter Flash-Satay, richtig? Diese Dinger sind alle charmant und ich habe sie auch genutzt. Aber nur so lange, bis ich begriff, daß die Ersatzbilder immer mitgeladen wurden, auch wenn Flash existierte. Das ist sinnlos und von großem Nachteil.

Wir sollten uns in Bezug auf Javascript mal alle locker machen und nicht mehr die große Verteufelungskeule rausholen. Der Einsatz von Javascript ist hier sinnvoll und angebracht.

Kommentar von Jens Grochtdreis - 21. Dezember 2007 um 18:04
4.

@Daniel: Und wie regelst Du den Fall der falschen Flashversion oder ein Ersatzbild? Da ist der Haken aller javascriptlosen Varianten, die auch gleichzeitig noch valide sein wollen.

Kommentar von Jens Grochtdreis - 21. Dezember 2007 um 18:05
5.

Hmm.. ich weiß nicht genau, ob es in die Richtung "Flash-Satay" geht. Da war doch heute morgen vor meinem noch ein weiterer Kommentar, der zu Flash-Satay etwas geschrieben hatte. Hatte mir jedenfalls kurz den Link angesehen, war aber nicht der Meinung, dass dort mit "conditional comments" gearbeitet wurde.

Dein Kommentar zu Javascript ist natürlich voll zutreffend. Wenn den (Power-)User mit ausgeschaltetem Javascript unterwegs sind, dann werden die sicherlich auch Flash nicht so ohne weiteres zulassen.

Kommentar von Marco - 21. Dezember 2007 um 18:40