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:
-
-
"http://www.w3.org/1999/xhtml""en""en"
-
Â
-
  SWFObject v2.0 - step 3
-
  "Content-Type""text/html; charset=iso-8859-1"
-
  "text/javascript""swfobject.js"
-
Â
-
  "text/javascript"
-
  swfobject.registerObject("meinFlash", "9.0.0", "expressInstall.swf");
-
 Â
-
Â
-
Â
-
Â
-
 Â
-
Â
-
   "meinFlash""clsid:D27CDB6E-AE6D-11cf-96B8-444553540000""550""400"
-
Â
-
    "movie""myflash.swf"
-
   Â
-
    "application/x-shockwave-flash""myflash.swf""550""400"
-
   Â
-
     Dies ist der alternative Content, wenn kein Flash oder eine veraltete Version installiert ist.
-
   Â
-
   Â
-
   Â
-
  Â
-
 Â
-
Â
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 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:
-
-
"http://www.w3.org/1999/xhtml""en""en"
-
 Â
-
    SWFObject v2.0 dynamic embed sample page
-
    "Content-Type""text/html; charset=iso-8859-1"
-
    "text/javascript""swfobject.js"
-
    "text/javascript"
-
    swfobject.embedSWF("myflash.swf", "meinFlash", "550", "400", "9.0.0", "expressInstall.swf");
-
   Â
-
 Â
-
 Â
-
    "meinFlash"
-
      Alternativer Inhalt
-
      Dies ist der HTML-Code, wenn Flash nicht verfügbar oder veraltet ist.
-
   Â
-
 Â
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:
-
...
-
"text/javascript""swfobject.js"
-
Â
-
"text/javascript"
-
  var flashvars = {};
-
 Â
-
    flashvars.playerpath = "/pfad";
-
    flashvars.contentpath = "123";Â
-
    flashvars.video = swfobject.getQueryParamValue("video");
-
         Â
-
    var params = {};
-
      params.scale = "noscale";
-
      params.allowfullscreen = "true";
-
      params.salign = "tl";
-
   Â
-
    var attributes = {};
-
      attributes.align = "left";
-
   Â
-
  swfobject.embedSWF("flvplayer.swf", "videoPlayer", "650", "530", "9.0.28", "expressInstall.swf", flashvars, params, attributes); Â
-
 Â
-
...
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
23 Kommentare zum Beitrag "SWFObject 2.0 final: SWFObject zum Einbetten von Flash (.swf) in HTML"
[…] in HTML Seiten zu integrieren, sondern bringt noch viele nützliche Features mit. Florian Plag hat in seinem Blog die wichtigsten Neuerungen […]
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.
Stimmt, das habe ich gelesen. Hier der passende Link: http://blogs.msdn.com/ie/archive/2007/11/08/ie-automatic-component-activation-changes-to-ie-activex-update.aspx
Da der User jedoch erst ein Update installieren muss, wird es sicher recht lange dauern, bis dieses leidige “click-to-activate“-Problem endgültig beseitig ist.
Außerdem habe ich nirgends gefunden, ob das nur für den Internet Explorer 7 (IE7) kommen wird, oder auch für den IE6 …
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“);“
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
Danke für den nützlichen Hinweis. Habe auch die HTML-Zeichen in den Comments deaktiviert, ab jetzt müsste alles korrekt angezeigt werden.
SWFObject 2.1 steht in den Startlöchern:
http://www.swffix.org/devblog/?p=33
[…] Nützliche Dokumentationen und genaue Erläuterungen zum Thema: http://blog.powerflasher.de/swfobject2 http://www.video-flash.de […]
SWFObject wird zum Standard in CS4…
Gute Neuigkeiten für alle SWFObject-Nutzer. Adobe arbeitet scheinbar an der Integration von SWFObject für die kommende Creative Suite 4 (CS4) …
In der Juni-Edition des Adobe Edge Newsletters wird eine Neuheit bezüglich des Features “Ins…
Hi,
bei mir auf dem Safari geht keins deiner Demo-Video.
Liegt das an SWFObject 2.0?
<strong>Version 2.1: Update für SWFObject…</strong>
Das erste Update von SWFObject 2 ist verfügbar. Die Version SWFObject 2.1 enthält neben einigen Bugfixes auch neue Funktionalitäten.
Zu den beseitigten Problemen zählen z.B.:
Memory Leaks im Internet Explorer
Fixes für Internet Explorer 5.0/5.5
A…
[…] nach gut zweistündigem Googlen drei Wege gefunden. Statisches und dynamisches Publishing in der Art und immernoch als Object in der Art. Nur haut keines von denen mit dem wmode=transparent so […]
[…] vorliegt und dank Powerflasher (Blog) sogar mit sehr guter Deutsche Doku. Ich empfehle – wie viele andere auch – die Methode dynamic […]
Die Hintergrundfarbe des Flashbereichs kann durch diese Zeile geändert werden:
params.bgcolor = “#ff0000″;
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?
Hast du mal einen Link zum Anschauen?
Teste es vielleicht auch mal ohne Stylesheets, ob es daran liegt.
Mann! zu komplieziert! kennt jemand eine einfache Methode
[…] vergeben und fertig ist das Teil. Nun noch am besten via swfobject einbinden und los gehts: SWFObject 2.0 final: SWFObject zum Einbetten von Flash (.swf) in HTML | http://www.video-flash.de __________________ AS 2 / AS3 Coding Flash Design Motion […]
Hallo,
gibt es auch eine Möglichkeit, womit ich wmv oder mpeg ohne einen sichtbaren Player abspielen kann?
Grüße
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.
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!
[…] "perfekte" Variante zum Einbinden einer Flash-Datei (.swf) gefunden –> SWF-Objekt (SWFObject 2.0 final: SWFObject zum Einbetten von Flash (.swf) in HTML | http://www.video-flash.de). Jedoch habe ich leider keine Ahnung wie ich das anstelle. Ich habe mir sagen lassen, dass ich […]
So einen "unsichtbaren" Player, nach dem zuvor gefragt wurde, suche ich auch. Hat da jemand einen Tipp?
Schreibe einen Kommentar