SWFObject 2.0 final: SWFObject zum Einbetten von Flash (.swf) in HTML

SWFObject Logo

SWFObject ist ein Skript, das dazu dient, Flashdateien (.swf) in HTML-Seiten einzubetten. Das Skripte (JavaScript) ist sehr einfach zu nutzen und hat viele Vorteile wie Flash-Plugin-Erkennung, keinen Aktivierungsrahmen beim Internet Explorer, W3C-Validität oder Unterstützung der Express Installation.

Gestern wurde nach 14 Monaten der Nachfolger des populären SWFObject 1.5 veröffentlicht: SWFObject 2 (ehemals SWFFix). Grund genug, eine Blick darauf zuwerfen, wie es funktioniert.

(Update: Unbedingt auch einen Blick auf embed-swf.org werfen)

Wie verwendet man SWFObject?

Grundsätzlich gibt es zwei verschiedene Methoden, um die Flash-Inhalte mit SWFObject einzubetten:

  • Static Publishing
  • Dynamic Publishing

Static Publishing

Bei Static Publishing werden sowohl Flash als auch der alternative Inhalt, wenn Flash nicht installiert ist, über gewöhnliches HTML integriert. JavaScript wird nur dazu verwendet, Probleme zu beseitigen, die über HTML nicht gelöst werden können.

Die Vorteile dieser Methode sind, dass der Flashinhalt auch bei deaktiviertem JavaScript dargestellt wird. Integrierte Flashdateien laufen damit beispielsweise auch auf der Sony PSP, die JavaScript nur mangelhaft unterstützt. Des Weiteren sollen z.B. RSS Reader die Flashinhalte dank dieser Einbettungsmethode darstellen.

Ein Beispielcode lautet folgendermaßen:

[html]



SWFObject v2.0 – step 3



Dies ist der alternative Content, wenn kein Flash oder eine veraltete Version installiert ist.





[/html]

Die classid und type sind feste Werte. data und value legen die URL der SWF-Datei fest, width und height die darzustellende Größe des SWF-Files. Wie man sieht, müssen manche Werte doppelt eingepflegt werden.

Folgende Parameter sind für param zur Konfiguration der Flashdatei möglich:

  • play
  • loop
  • menu
  • quality
  • scale
  • salign
  • wmode
  • bgcolor
  • base
  • swliveconnect
  • flashvars
  • devicefont
  • allowscriptaccess
  • seamlesstabbing
  • allowfullscreen
  • allownetworking
  • Jetzt zum SWFObject: Wichtig ist, dass im Header mit der Zeile <script type="text/javascript" src="swfobject.js"></script> das SWFObject eingebunden wird. Mit registerObject wird eine Flashdatei „registriert“. Über eine ID (im Beispiel „meinFlash“) wird der Bezug zum weiteruntenstehenden Code hergestellt. Zusätzlich gibt man die unterstützte Flashversion (z.B. ab 9.0.0) und den Pfad zur Express-Installation an.

    Zu erwähnen ist noch, dass der alternative Content, wenn Flash veraltet oder gar nicht vorhanden ist, selbst wählbar ist. Auch wird dieser Inhalt von den Suchmaschinen indiziert.

    Demo: Static Publishing

    Dynamic Publishing

    Dynamic Publishing entspricht der Verfahrensweise des bisherigen SWFObjects 1.5. Der alternative Inhalt, wenn kein Flash vorhanden ist, wird ganz gewöhnlich über HTML erstellt. Per JavaScript werden die Flashinhalte zur Laufzeit eingefügt.

    Diese Methode hat den Vorteil, dass das Authoring leichter und weniger umständlich ist und kein redundanter Code geschrieben wird. Außerdem wichtig: Es wird der „click-to-activate“ Mechanismus verhindert, der beim Internet Explorer ab Version 6 (IE6, IE7) und bei Opera ab Version 9 auftritt.

    Ein Beispielcode für diese Variante lautet:

    [html]



    SWFObject v2.0 dynamic embed sample page




    Alternativer Inhalt

    Dies ist der HTML-Code, wenn Flash nicht verfügbar oder veraltet ist.


    [/html]

    Möchte man z.B. Flashvars ergänzen, hier ein Beispiel aus meinem FLV Player, der schon seit einiger Zeit die Beta von SWFObject 2 nutzt:

    [html]



    [/html]

    Einen Parameter aus der URL (z.B. test.html?video=demo.flv) zu erfassen, funktioniert mit SWFObject übrigens so: swfobject.getQueryParamValue("video").

    Demo: Dynamic Publishing

    Welche Methode ist besser?

    Zu Methode 1: Laut Entwicklerteam haben ca. 80% der Nutzer den IE6, IE 7 oder Opera. Deshalb wird bei diesen Anwendern der „click-to-activate“ auftreten, was natürlich nicht wünschenswert ist.

    Zu Methode 2: Sechs Prozent haben JavaScript deaktiviert bzw. der Browser unterstützt kein JavaScript. Diese Nutzer werden also, trotz installiertem Flash Player, kein Flashcontent zu sehen bekommen. Es erscheint der alternative Content.

    Meines Erachtens spricht dies in den meisten Fällen dafür, dass man auf Methode 2 setzen sollte.

    Demo: Static Publishing
    Demo: Dynamic Publishing

    Link: SWFObject

    [ad]

23 Gedanken zu „SWFObject 2.0 final: SWFObject zum Einbetten von Flash (.swf) in HTML“

  1. Das „click-to-activate“ wird laut Microsoft im Verlaufe der nächsten Monate wieder entfernt. Anscheinend hat man sich bezüglich des Eolas-Patents einigen können.

  2. Ich würde ergänzender weise noch dazu schreiben, das man mit dem -Tag auch bei der dynamischen Einbindung die Clients ohne JS abfangen kann. Allerdings muss man dazu den alternativen Kontent auch mit JS schreiben, z.B mit „document.write(„Alternatives html“);“

  3. ZUSATZ: „-Tag“ soll heißen „NOSCRIPT-Tag“.
    Der [kleiner als]CONTENT[größer als] – Text wurde beim posten entfernt. :(
    -> nutze dafür bitte htmlentities() in PHP

  4. Danke für den nützlichen Hinweis. Habe auch die HTML-Zeichen in den Comments deaktiviert, ab jetzt müsste alles korrekt angezeigt werden.

  5. Pingback: www.video-flash.de
  6. Pingback: www.video-flash.de
  7. Ich habe 2.2 installiert und die dynamische Methode angewand. Allerdings hab ich das Problem, dass im Firefox, wenn ich einfach mal auf die eingebette Flashdatei klicke, die gestrichelte feine Linie um die Datei erscheint, die die Datei markiert. Das war im UFO-Script nicht so. Im IE ist alles ok. Gibs da noch ne Möglichkeit das Problem im FF abzustellen?

  8. Pingback: Anonymous
  9. Hallo nochmal,

    hab schon in anderen Blogs gelesen, von wegen das Video einfach in .swf oder .flv umändern.

    Klappt leider nicht!

    Vielen Dank schonmal.

  10. Hat jemand eine Ahnung, wie ich den alternativen Content individuell gestalten bzw. dem Design meiner HP anpassen kann? Möchte an dieser Stelle gerne ein zentriertes Bild, darüber einen Hinweistext (mit CSS formatiert) und unter diesem Text den Adobe Download Button einbauen. Geht das überhaupt? Falls nicht, wäre es statt dessen möglich, automatisch auf die Adobe Downloadsite zu verlinken? Würde mich sehr freuen, wenn mir jemand weiterhelfen könnte. Danke im Voraus!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert