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.

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:

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  3.  
  4.     SWFObject v2.0 - step 3</title>
  5.     http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     type="text/javascript" src="swfobject.js"></script>
  7.  
  8.     type="text/javascript">
  9.     swfobject.registerObject("meinFlash", "9.0.0", "expressInstall.swf");
  10.     </script>
  11.  
  12.   </head>
  13.  
  14.    
  15.  
  16.       id="meinFlash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-" width="550" height="400">
  17.  
  18.         name="movie" value="myflash.swf" />
  19.         <!--[if !IE]>-->
  20.         type="application/x-shockwave-flash" data="myflash.swf" width="550" height="400">
  21.         <!--<![endif]-->
  22.           Dies ist der alternative Content, wenn kein Flash oder eine veraltete Version installiert ist.</p>
  23.         <!--[if !IE]>-->
  24.         </object>
  25.         <!--<![endif]-->
  26.       </object>
  27.     </div>
  28.   </body>
  29. </html>
  30. </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:

    PLAIN TEXT
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    3.    
    4.         SWFObject v2.0 dynamic embed sample page</title>
    5.         http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6.         type="text/javascript" src="swfobject.js"></script>
    7.         type="text/javascript">
    8.         swfobject.embedSWF("myflash.swf", "meinFlash", "550", "400", "9.0.0", "expressInstall.swf");
    9.         </script>
    10.     </head>
    11.    
    12.         id="meinFlash">
    13.             Alternativer Inhalt</h1>
    14.             Dies ist der HTML-Code, wenn Flash nicht verfügbar oder veraltet ist.</p>
    15.         </div>
    16.     </body>
    17. </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:

    PLAIN TEXT
    HTML:
    1. ...
    2. type="text/javascript" src="swfobject.js"></script>
    3.  
    4. type="text/javascript">
    5.     var flashvars = {};
    6.    
    7.         flashvars.playerpath = "/pfad";
    8.         flashvars.contentpath = "123"; 
    9.         flashvars.video = swfobject.getQueryParamValue("video");
    10.                    
    11.         var params = {};
    12.             params.scale = "noscale";
    13.             params.allowfullscreen = "true";
    14.             params.salign = "tl";
    15.        
    16.         var attributes = {};
    17.             attributes.align = "left";
    18.        
    19.     swfobject.embedSWF("flvplayer.swf", "videoPlayer", "650", "530", "9.0.28", "expressInstall.swf", flashvars, params, attributes);   
    20.    
    21. </script>
    22. ...

    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: