Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 23 Multimedia
  gp 23.1 Musik
    gp 23.1.1 Einbau in HTML
    gp 23.1.2 Standardkontrollen des Internet Explorers
    gp 23.1.3 Standardkontrollen des Netscape Navigator
    gp 23.1.4 Browserunabhängige Ansteuerung
    gp 23.1.5 Anwendung: Wurlitzer
  gp 23.2 Microsoft Windows Media Player
    gp 23.2.1 Einbau in HTML
    gp 23.2.2 Browserunabhängige Ansteuerung
    gp 23.2.3 Anwendung: Heimkino
  gp 23.3 Adobe-Plugins
    gp 23.3.1 Prinzipielles
    gp 23.3.2 Director
    gp 23.3.3 Flash
    gp 23.3.4 Mit Flash kommunizieren


Rheinwerk Computing

23.3 Adobe-Plugins  downtop

Früher gab es nur statische HTML-Seiten. Das Web war statisch, aber voller Informationen. Dann wurden animierte GIFs entdeckt. Das Web war etwas animierter als zuvor, aber die Inhalte stimmten immer noch. Dann verbreitete sich JavaScript. Das Web wurde dynamisch, der Inhaltsanteil nahm ab. Die einst ruhigen Webseiten wichen blinkenden, zappelnden Informationswüsten. Doch das letzte Wort war noch nicht gesprochen. Aufgrund der Browserinkompatibilitäten und der Tatsache, dass es ja erst seit etwa 1997 die ersten ernst zu nehmenden DHTML-Anwendungen gibt, wurde nach weiteren Möglichkeiten gesucht, plattformunabhängige und schnell zu erstellende Animationen zu entwickeln. Ein proprietäres Format kam zunächst nicht in Frage, denn es war den Benutzern nicht zuzumuten, ein Plugin herunterzuladen oder eine ActiveX-Komponente zu installieren.

Die amerikanische Firma Macromedia (http://www.macromedia.com/) hat es dennoch irgendwie geschafft. Sie bietet zwar eine Reihe von Softwareprodukten an, für unsere Zwecke sind jedoch nur die interessant, mit denen Animationen für das Web erstellen werden können:

gp  Adobe Flash (einst: Macromedia Flash)
gp  Adobe Director (einst: Macromedia Flash)

Mit beiden Programmen können Animationen (so genannte Filme) erstellt werden, die in einem speziellen Format abgespeichert werden, um dann im Webbrowser dargestellt werden zu können:

gp  Director-Filme haben die Endung .dcr.
gp  Flash-Filme haben die Endung .swf.

Die Filme werden weiterhin nicht »automatisch« vom Webbrowser dargestellt. Mozilla benötigt auch hierfür ein Plugin, der Internet Explorer ein ActiveX-Control.

Mag es an der Qualität der Produkte oder an klugem Marketing liegen, mittlerweile haben Statistiken zufolge über 90  % aller Web-Benutzer einen Flash-Player installiert, bei den Windows-Nutzern sogar noch mehr. Bei der Standardinstallation des Mozilla ist die Abspielsoftware dabei, beim Internet Explorer auch (und kann bequem nachinstalliert werden).

Das hat wohl auch die Firma Adobe (unter anderem bekannt für Photoshop und Acrobat) auf den Plan gerufen: Sie hat Macromedia im Jahre 2005 aufgekauft. Seitdem heißt Macromedia Flash eigentlich Adobe Flash, Macromedia Director heißt Adobe Director, doch die meisten Nutzer assoziieren die Technologien (noch) mit Macromedia.

Director ist nicht so weit verbreitet wie Flash. Zwar gibt es für Mozilla und Internet Explorer ein Plugin, automatisch installiert wird es jedoch nicht. Benutzer des Internet Explorer können die ActiveX-Komponente aber bei der erweiterten Installation mit installieren lassen – oder den Browser später nachrüsten.

Halten wir also fest: Flash-Filme werden in den meisten Browsern angezeigt, Director-Filme in nicht so vielen Browsern. Keines der beiden Formate ist aber so allgemein verbreitet, dass man die restlichen Benutzer ignorieren könnte. Es besteht also der Bedarf festzustellen, ob ein entsprechender Flash-Player installiert ist oder nicht. Und womit ginge das wohl besser als mit JavaScript?

Beide Programme, Director und Flash, bieten einen Menüpunkt Datei N Veröffentlichungseinstellungen an. Dort haben Sie – je nach Programm – mehrere Möglichkeiten, das Aussehen der fertigen HTML-Seite anzupassen.

Für Profis sind diese Einstellungen nicht sonderlich interessant, denn in jeder ordentlichen Agentur wird das generierte Dokument noch einem HTML-Fachmann (oder dem Praktikanten) gegeben. Immerhin: Nur die wenigsten Sites, darunter überraschend viele Webauftritte der Musikbranche, setzen auf reine Flash-Präsentationen.

Auch wenn das Authoring-Tool einen Großteil der Arbeit von allein erledigt, ist es ratsam und lehrreich, den generierten Code zu analysieren beziehungsweise anzupassen. Aus diesem Grund werfen wir in diesem Kapitel einen Blick auf den Einbau von Filmen in HTML-Dokumente und verwenden dabei ein klein wenig JavaScript.


Rheinwerk Computing

23.3.1 Prinzipielles  downtop

Sie haben es bereits in diesem und im vorherigen Kapitel gesehen: Für Plugins (also: bei Mozilla und Opera und auch Safari) wird das <embed>-Tag verwendet, ActiveX-Komponenten werden über das <object>-Tag eingebaut. Durch eine geschickte Verschachtelung kann erreicht werden, dass derselbe Code von allen Browsern korrekt interpretiert wird:

<object classid="clsid:..."
  codebase="..." id="...">
  <param name="movie" value="..." />
  <embed src="..." type="..."
    pluginspage="..." name="..."></embed>
</object>

Die wichtigsten Parameter sind:

gp  classid: ein weltweit eindeutiger Identifikator für das ActiveX-Control
gp  codebase: der Speicherplatz des ActiveX-Controls, von dem es (bei Bedarf) nachgeladen werden kann
gp  id: der Identifikator des Films (für den JavaScript-Zugriff vom Internet Explorer aus)
gp  <param name="src" value="..." />: die URL des Films (für Internet Explorer); bei manchen ActiveX-Controls auch name="movie"
gp  src: die URL des Films (für Mozilla)
gp  type: der MIME-Typ des Films
gp  pluginspage: die URL, unter der das Plugin heruntergeladen werden kann, wenn es noch nicht installiert ist
gp  name: der Identifikator des Films (für den JavaScript-Zugriff vom Netscape Navigator aus)

Der Internet Explorer interpretiert das <object>-Element und ignoriert in seinem Inneren alle <embed>-Elemente. Beim Mozilla funktioniert es andersherum: Das <object>-Element wird ignoriert, das <embed>-Element interpretiert.

Wenn der Benutzer jedoch kein Plugin installiert hat, kann das auch darauf hindeuten, dass er es auch nicht installieren will. In diesem Fall sollten Sie sich überlegen, den Film nur bei vorhandenem Plugin in die Seite einzubauen. Hierbei wird zumeist der folgende Algorithmus eingesetzt:

gp  Zunächst wird auf die jeweils browsertypische Art festgestellt, ob das Plugin vorhanden ist oder nicht.
gp  Wenn es vorhanden ist, wird der Film mit document.write() eingebaut, und zwar auf die browserspezifische Art (<object> oder <embed>).

Um beim Mozilla festzustellen, ob ein Plugin vorhanden ist, besteht eine verbreitete Methode darin zu überprüfen, ob der entsprechende MIME-Typ für den Film vorhanden ist. Also muss navigator.mimeTypes existieren. Ein direkter Zugriff hierauf würde beim Internet Explorer zu einer Fehlermeldung führen, da dieser das Array navigator.mimeTypes nicht kennt. Also schreiben wir, wie gehabt:

if (navigator.mimeTypes && navigator.mimeTypes["..."]) {
   // ...
}

Das Plugin kann dann abgefragt werden. Zunächst muss die Eigenschaft enabledPlugin des Plugins existieren – dann nämlich gibt es ein Plugin für den angegebenen MIME-Typ:

if (navigator.mimeTypes["..."].enabledPlugin) {
   // ...
}

Aus der Eigenschaft plugin.description kann dann die Versionsnummer des Plugins ermittelt werden. Je nach Typ des Plugins müssen Sie mit einer anderen Strategie die Versionsnummer ermitteln. Details dazu folgen an späterer Stelle.

Doch gehen wir nun zur Praxis über: zur Ermittlung der Director- und Flash-Version.


Rheinwerk Computing

23.3.2 Director  downtop

Adobe/Macromedia Director wird zumeist zur Erstellung von CD- und DVD-Oberflächen verwendet; im Web wird die Software eher selten eingesetzt trotz beispielsweise beeindruckender 3D-Möglichkeiten. Den Status von Flash wird Director vermutlich nie erreichen – allein das Plugin ist um ein Vielfaches größer, was auch bei schnellen Leitungen ein K.o.-Kriterium sein kann.

Standardeinbau

Wie zuvor erläutert wurde, können Sie durch eine Kombination von <object> und <embed> erreichen, dass beide Browser den Film anzeigen, wenn das Plugin bzw. die ActiveX-Komponente installiert ist. Die folgenden Komponenten sind hierbei wichtig:

gp  die Class-ID des ActiveX-Controls
gp  der MIME-Typ für <embed>

Beide Elemente können Sie für die momentan aktuelle Director-Version MX 2004 (intern: 10.0) aus folgendem Beispielcode entnehmen:

<object classid="clsid:166B1BCA-3F9C-11CF-8075–444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,0,0,0"
  ID="xxx">
  <param name="src" value="xxx.dcr" />
  <embed src="xxx.dcr" type="application/x-director"
    pluginspage="http://www.macromedia.com/shockwave/download/"
    name="xxx"></embed>
</object>

Dieser Code hat wie gesagt die große Schwäche, dass Benutzer ohne Plugin vom Browser dazu aufgefordert werden, dieses Plugin zu installieren, während eine etwas ausführlichere Erklärung oder eine reine HTML-Version der Website die bessere Alternative wäre.

Erkennung mit dem Internet Explorer

Um beim Internet Explorer zu ermitteln, ob das Director-ActiveX installiert ist, schlagen die meisten Quellen vor zu ermitteln, ob ein Windows-Internet Explorer vorliegt.

gp  Es muss zunächst ein Internet Explorer sein; navigator.userAgent muss MSIE enthalten.
gp  Die verwendete Plattform muss ein 32-Bit-Windows sein; navigator.platform muss also "Win32" zurückliefern.

Der Code, um zu prüfen, ob der Browser theoretisch das Director-Plugin unterstützen könnte, sieht also wie folgt aus:

if (navigator.userAgent.toLowerCase().indexOf("msie") > –1
   && navigator.platform=="Win32") {
   // ...
}

Ob das Plugin auch vorhanden ist, kann nicht mehr mit JavaScript-Mitteln ermittelt werden, wohl aber mit VBScript. Betrachten Sie den folgenden Code:

<script language="VBScript">
   on error resume next
   director_ok = IsObject(CreateObject("SWCtl.SWCtl.8.5"))
</script>

Auch, wenn Sie kein VBScript können, ist dieses (kurze) Skript leicht verständlich:

gp  Durch on error resume next wird die Ausgabe von Fehlermeldungen ausgeschaltet.
gp  Nun wird versucht, eine Instanz der ActiveX-Komponente zu erzeugen (CreateObject("SWCtl.SWCtl.8.5")). Wenn Ihnen auch eine ältere Version des Controls genügt, können Sie eine ältere Versionsnummer (z.  B. "SWCtl.SWCtl.6.5") angeben. Auch Director MX 2004 enthält ein Objekt mit der Versionsnummer 8.5, wohl aus Gründen der Abwärtskompatibilität.
gp  Nach der Erzeugung der Instanz wird überprüft, ob das auch funktioniert hat; IsObject() muss dann true zurückliefern.
gp  Am Ende erhält die Variable director_ok den Wert true, wenn die ActiveX-Komponente erzeugt werden konnte (wenn sie also im System installliert ist), und false, falls nicht.

Auf die erzeugte Variable können Sie auch von JavaScript aus zugreifen! Damit kann bei Bedarf der entsprechende <object>-Code ausgegeben werden:

if (director_ok) {
   document.write("<object classid=\"clsid:166B1BCA-3F9C-11CF-8075–444553540000\"\n");
   document.write("
codebase=\"http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,0,0,0\"\n");
   document.write("ID=\"xxx\">\n");
   document.write("<param name=\"src\" value=\"xxx.dcr\" />\n");
   document.write("</object>\n");
}

Erkennung mit Mozilla

Beim Mozilla-Browser funktioniert die Browsererkennung vollständig mit JavaScript. Wie schon zuvor gezeigt wurde, müssen die Arrays navigator.mimeTypes und navigator.plugins untersucht werden. Um überhaupt einmal festzustellen, ob ein Plugin für Macromedia Director existiert, müssen die folgenden Bedingungen erfüllt sein:

gp  navigator.mimeTypes["application/x-director"].enabledPlugin muss existieren, sprich, es muss ein Plugin für den Director-MIME-Typ installiert sein.
gp  Ebenso muss das Original-Director-Plugin installiert sein. Falls dem so ist, muss navigator.plugins["Shockwave for Director"] existieren.

Wenn das Plugin vorliegt, könnte es immer noch sein, dass die vorliegende Versionsnummer zu niedrig ist. Werfen wir einen Blick auf navigator.plugins["Shockwave for Drector"].description.

Sie können den Wert schnell erhalten, wenn Sie im Mozilla (bei installiertem Plugin) die folgende Pseudo-URL aufrufen:

javascript:alert(navigator.plugins["Shockwave for Director"].description);

Das Plugin für Version 8.5 gibt zumindest Folgendes aus:

Macromedia Shockwave for Director Netscape plug-in, version 8.5

Das Plugin der aktuellen Version, Director MX 2004, meldet sich wie folgt zurück:

Macromedia Shockwave for Director Netscape plug-in, version 10.1

Sie sehen am Plugin-Namen die Herkunft der Plugin-Schnittstelle: Netscape (auch wenn es ein Mozilla-Browser ist).

Um die Versionsnummer festzustellen, können Sie wie folgt vorgehen:

gp  Zunächst wird der erste Punkt in der Plugin-Beschreibung gesucht.
gp  Links vom Punkt steht die Hauptversionsnummer (z.  B. 8) des Plugins.
gp  Rechts vom Punkt steht die Unterversionsnummer des Plugins.

Um nun auf das Vorhandensein von mindestens Version 8.5 zu prüfen, muss Folgendes erfüllt sein:

gp  Entweder ist die Hauptversionsnummer 8 und die Unterversionsnummer ist mindestens 5.
gp  Oder die Hauptversionsnummer ist mindestens 9 (wir nehmen einfach an, dass die nächsten Plugin-Versionen abwärtskompatibel sind).

Nachfolgend sehen Sie den Code, der

gp  überprüft, ob überhaupt ein Plugin vorliegt,
gp  und des Weiteren nachschaut, ob das Plugin mindestens Version 8.5 hat:
if (navigator.mimeTypes &&
    navigator.mimeTypes["application/x-director"] &&
    navigator.mimeTypes["application/x-director"].enabledPlugin &&
    navigator.plugins &&
    navigator.plugins["Shockwave for Director"] &&
    navigator.plugins["Shockwave for Director"].description) {
   var d = navigator.plugins["Shockwave for Director"].description;
   if (d.indexOf(".") > –1) {
      var hauptversion = parseInt(d.substring(
         d.indexOf(".")-1, d.indexOf(".")));
      var unterversion = parseInt(d.substring(
         d.indexOf(".")+1, d.indexOf(".")+2));
      var director_ok = (hauptversion >= 9 ||
         hauptversion == 8 && unterversion >= 5);
  }
} else {
   var director_ok = false;
}

Nachdem dieser Code abgearbeitet worden ist, gibt die Variable director_ok an, ob das benötigte Plugin installiert ist oder nicht. Ist die Variable true, kann der Director-Film in die Seite eingebaut werden:

if (director_ok) {
   document.write("<embed src=\"xxx.dcr\" \n");
   document.write("type=\"application/x-director\" \n");
   document.write("pluginspage=\"http://www.macromedia.com/shockwave/download/\"\n");
   document.write("name=\"xxx\"></embed>\n");
}

Browserunabhängige Erkennung

Die Hauptarbeit haben wir in den vorangegangenen beiden Abschnitten erledigt. Die Variable director_ok gibt an, ob das benötigte Plugin installiert ist oder nicht. Um browserunabhängig festzustellen, ob der Director-Film abgespielt werden kann (oder nicht), müssen die einzelnen Codefragmente nur zusammengesetzt werden. In bewährter Tradition schreiben wir eine weitere Hilfsfunktion:

function adobe_director()   {
   var director_ok = false;
   if (navigator.userAgent.toLowerCase().indexOf("msie") > –1
   && navigator.platform=="Win32") {
      document.write("<script language=\"VBScript\"\>\n");
      document.write("on error resume next\n");
      document.write("director_ok = IsObject(CreateObject(
    \"SWCtl.SWCtl.8.5\"))\n");
      document.write("</script\>\n");
   } else if (navigator.mimeTypes &&
      navigator.mimeTypes["application/x-director"] &&
      navigator.mimeTypes["application/x-director"].enabledPlugin &&
      navigator.plugins &&
      navigator.plugins["Shockwave for Director"] &&
      navigator.plugins["Shockwave for Director"].description) {
      var d = navigator.plugins["Shockwave for Director"].description;
      if (d.indexOf(".") > –1) {
         var hauptversion = parseInt(d.substring(
            d.indexOf(".")-1, d.indexOf("."));
         var unterversion = parseInt(d.substring(
            d.indexOf(".")+1, d.indexOf(".")+2);
         var director_ok = (hauptversion >= 9 ||
            hauptversion == 8 && unterversion >= 5);
      }
   }
   return director_ok;
}

Mithilfe dieser Funktion kann dann ein entsprechender Film ausgegeben werden – wenn das Plugin vorhanden ist:

<html>
<head>
<title>Director</title>
<script type="text/javascript" src="adobe.js"></script>
</head>
<body>
<script type="text/javascript"><!--
if (adobe_director()) {
   document.write("<object classid=\"clsid:166B1BCA-3F9C-11CF-8075–444553540000\"\n");
   document.write("
codebase=\"http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,0,0,0\"\n");
   document.write("ID=\"xxx\">\n");
   document.write("<param name=\"src\" value=\"xxx.dcr\" />\n");
   document.write("<embed src=\"xxx.dcr\" \n");
   document.write("type=\"application/x-director\" \n");
   document.write("pluginspage=\"http://www.macromedia.com/shockwave/download/\"\n");
   document.write("name=\"xxx\"></embed>\n");
   document.write("</object>\n");
}
//--></script>
<noscript>Ohne JavaScript-f&auml;higen Browser kein Film!
</noscript>
<noembed>Ihr Browser kann diesen Film nicht anzeigen!
</noembed>
</body>
</html>

Vergessen Sie nicht, die URL und die ID des Films in den document.write()-Anweisungen zu ersetzen!


Rheinwerk Computing

23.3.3 Flash  downtop

Adobe Flash hat eine deutlich größere Verbreitung als Director, was unter anderem auch an dem sehr kleinen Plugin bzw. ActiveX-Control liegen kann. Auch die resultierenden Filme weisen oft (aber leider nicht immer) eine geringe Dateigröße auf. Somit können kleine, aber beeindruckende browserunabhängige Animationen erstellt werden.

Die Nachteile des Formats sollen natürlich nicht verschwiegen werden: Die Abspielsoftware steht (noch) nicht für alle der verbreiteteren Plattformen zur Verfügung, wobei Adobe gerade im Bereich Linux Besserung verspricht. Dennoch ist es unschön, wenn eine Website ausschließlich mit Flash funktioniert. Die meisten Flash-lastigen Seiten gibt es deswegen in einer Flash- und in einer HTML-Version.

Standardeinbau

Auch bei Flash gilt: <object> für den Internet Explorer, <embed> für Mozilla. Durch eine Verschachtelung der Tags können beide Browser bedient werden:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8–444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14,0"
   ID="xxx">
   <param name="movie" value="xxx.swf" />
   <embed src="xxx.swf" type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash"
      name="xxx"></embed>
</object>

Beachten Sie hierbei die folgenden Elemente:

gp  Die Class-ID ist versionsunabhängig eindeutig; oben sehen Sie die für das aktuelle Flash-ActiveX-Control.
gp  Die URL des Films wird nicht (wie beispielsweise bei Director) mit <param name="src" /> angegeben, sondern mit <param name="movie" />.
gp  Der MIME-Typ von Flash-Filmen ist application/x-shockwave-flash.

Die restlichen Elemente, zum Beispiel die Download-Adressen für das ActiveX-Control (codebase) und das Plugin (pluginspage), haben sich im Vergleich zum Einbau von Director-Filmen natürlich auch geändert.

Wer kein Flash-Plugin hat, will eventuell auch keines, weswegen eine JavaScript-basierte Abfrage zum guten Ton gehört. Ein häufig gesehenes Negativbeispiel: Eine einzelne Seite enthält mehrere Flash-Filme, so dass Nutzer des Internet Explorers mit Flash-Antipathie mehrmals die Installation ablehnen müssen. Der Nachteil hierbei ist die Ressourcenverschwendung: Vor den Ablehnungen wurde das ActiveX-Control bereits (mehrfach) unnötig übertragen, nur eben nicht installiert.

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 23.4     Flash soll installiert werden.

Werfen wir also einen Blick darauf, wie die einzelnen Browser feststellen können, ob der Flash Player installiert ist oder nicht.

Erkennung mit dem Internet Explorer

Erinnern Sie sich noch an die Überprüfung, ob ein Internet Explorer Director-Filme abspielen kann? Dort wurde auf abenteuerliche Art und Weise VBScript-Code mit JavaScript-Code vermischt, um das gewünschte Ergebnis zu erzielen.

Das ist leider bei Flash-Filmen nicht möglich. Sie können also feststellen, ob ein Internet Explorer vermutlich Flash-Filme abspielen kann (Windows-Plattform), aber nicht, ob das Plugin bereits installiert ist. Ist es nicht vorhanden, wird es übertragen, und der Benutzer kann dann entscheiden, ob er das Plugin installieren möchte oder nicht. Sie sollten also bei Flash-Sites auf jeden Fall auch eine reine HTML-Version erstellen.

Der entsprechende Code sieht analog zum Director-Code aus: Es muss ein Internet Explorer vorhanden sein, und dieser muss auf einer Windows-Plattform laufen:

var flash_ok =
   (navigator.userAgent.toLowerCase().indexOf("msie") > –1
      && navigator.platform=="Win32");

Wenn die Variable flash_ok danach den Wert true hat, kann der Flash-Film mit document.write() eingebaut werden:

if (flash_ok) {
   document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8–444553540000\"\n");
   document.write("
codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0\"\n");
   document.write("ID=\"xxx\">\n");
   document.write("<param name=\"movie\" value=\"xxx.swf\" 
/>\n");
   document.write("</object>\n");
}

Erkennung mit dem Mozilla

Die Erkennung des Flash-Plugins beim Mozilla (und auch einst beim Netscape Navigator) erfolgt wieder auf die herkömmliche Art und Weise, die Sie inzwischen aus dem Effeff beherrschen sollten:

gp  navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin existiert nur dann, wenn ein Plugin für den Flash-MIME-Typ installiert ist.
gp  In navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin.description steht die Versionsnummer des Flash-Players. Diese Eigenschaft heißt beispielsweise bei einer Plugin-Version 8 (entspricht Flash 8) folgendermaßen:
Shockwave Flash 8.0 r24
Links vom ersten Punkt steht also die Hauptversionsnummer, rechts davon die Unterversionsnummer (und nach dem r sehen Sie die Unter-Unterversionsnummer).

Die Erkennung gestaltet sich damit analog zur Bestimmung der Plugin-Version für Director – hier prüfen wir, ob mindestens die Plugin-Version 6 (also Flash MX) vorliegt:

if (navigator.mimeTypes &&
    navigator.mimeTypes["application/x-shockwave-flash"] &&
    navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
   var d = navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin.description;
   if (d.indexOf(".") > –1) {
      var hauptversion = parseInt(d.substring(
         d.indexOf(".")-1, d.indexOf(".")));
      var unterversion = parseInt(d.substring(
         d.indexOf(".")+1, d.indexOf(".")+2));
      var flash_ok = (hauptversion >= 6);
  }
} else {
   var flash_ok = false;
}

Sofern danach die Variable flash_ok den Wert true hat, kann der Film mit <embed> und document.write() in die HTML-Seite eingebaut werden.

if (flash_ok) {
   document.write("<embed src=\"xxx.swf\" \n");
   document.write("type="application/x-shockwave-flash" \n");
   document.write("pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=
ShockwaveFlash\" \n");
   document.write(" name=\"xxx\"\>\n");
   document.write("</embed\>");
}

Browserunabhängige Erkennung

Um den Brückenschlag zu schaffen, werden die obigen Codefragmente wieder zusammengefügt und leicht modifiziert, um Mozilla und Internet Explorer gleichermaßen zu bedienen. Zunächst lagern wir wieder die Flash-Überprüfung in eine externe Funktion aus, was die Wiederverwertbarkeit erleichtert:

function adobe_flash()   {
   var flash_ok = false;
   if (navigator.userAgent.toLowerCase().indexOf("msie") > –1
       && navigator.platform=="Win32") {
      flash_ok = true;
   } else {
      if (navigator.mimeTypes &&
         navigator.mimeTypes["application/x-shockwave-flash"]&&
         navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin) {
         var d = navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin.description;
         if (d.indexOf(".") > –1) {
            var hauptversion = parseInt(d.substring(
               d.indexOf(".")-1, d.indexOf(".")));
            var unterversion = parseInt(d.substring(
               d.indexOf(".")+1, d.indexOf(".")+2));
            var flash_ok = (hauptversion >= 5);
         }
      }
   }
   return flash_ok;
}

Der Einbau in eine HTML-Seite gestaltet sich dann relativ einfach, da die Hauptarbeit bereits in der Funktion macromedia_flash() geleistet wird. Das einzig Lästige ist noch der Einsatz der vielen document.write()-Anweisungen. Als Lohn für die Mühen erhalten Sie dafür eine browser-unabhängige Erkennung des Plugins.

<html>
<head>
<title>Flash</title>
<script type="text/javascript" src="adobe.js"></script>
</head>
<body>
<script type="text/javascript"><!--
if (adobe_flash()) {
   document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8–444553540000\"\n");
   document.write("
codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0\"\n");
   document.write("ID=\"xxx\">\n");
   document.write("<param name=\"movie\" value=\"xxx.swf\" />\n");
   document.write("<embed src=\"xxx.swf\" \n");
   document.write("type=\"application/x-shockwave-flash\" \n");
   document.write("
pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\"\n");
   document.write("name=\"xxx\"></embed>\n");
   document.write("</object>\n");
}
//--></script>
<noscript>Ohne JavaScript-f&auml;higen Browser kann kein Film gezeigt werden!</noscript>
<noembed>Ihr Browser kann diesen Film nicht anzeigen!
</noembed>
</body>
</html>

Rheinwerk Computing

23.3.4 Mit Flash kommunizieren  toptop

Zum Abschluss dieses Kapitels noch ein kleiner »Leckerbissen« für Flash-Profis. Es ist sowohl möglich, von Flash aus auf JavaScript-Kommandos zuzugreifen, als auch von JavaScript aus den Flash-Film zu steuern. Somit lassen sich die Vorteile der beiden Sprachen beziehungsweise Technologien bündeln.

Flash ruft JavaScript

In Macromedia Flash gibt es eine Methode namens fscommand(). Diese Methode ermöglicht es Flash, mit dem Programm zu kommunizieren, das den Flash-Film abspielt (zum Beispiel mit einem Standalone-Player oder eben dem Webbrowser). Von Flash aus kann das Kommando fscommand() ausgeführt werden und dabei zwei Parameter übergeben:

gp  Der erste Parameter wird command genannt und steht für das Kommando oder die Funktion, das bzw. die ausgeführt werden soll.
gp  Der zweite Parameter wird arguments genannt und enthält die Parameter für die in command angegebene Funktion.

Es genügt nicht, als command einfach den Namen einer JavaScript-Funktion zu übergeben. Die Ablauflogik, welches Kommando welchen JavaScript-Code zur Ausführung bringt, muss im JavaScript-Teil gelöst werden.

Um eine HTML-Seite für den Einsatz von fscommand() vorzubereiten, müssen Sie die folgenden Schritte unternehmen:

gp  Stellen Sie sicher, dass das name-Attribut des <embed>-Tags und das id-Attribut des <object>-Tags identisch sind und keine Leer- oder Sonderzeichen enthalten. Ebenfalls darf das Attribut nicht mit einer Ziffer beginnen.
gp  Ergänzen Sie das <embed>-Tag um den Parameter swLiveConnect= "true". Dadurch gestatten Sie dem (Mozilla-)Browser, über die LiveConnect-Schnittstelle auf den Film zuzugreifen und umgekehrt.

Sie finden die Ergänzungen und Änderungen im folgenden Skriptausschnitt halbfett hervorgehoben:

document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8–444553540000\"\n");
document.write("
codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0\"\n");
document.write("ID=\"xxx\">\n");
document.write("<param name=\"movie\" value=\"xxx.swf\" />\n");
document.write("<embed src=\"xxx.swf\" \n");
document.write("type=\"application/x-shockwave-flash\" \n");
document.write("pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=
ShockwaveFlash\" \n");
document.write("swLiveConnect=\"true\" \n");
document.write("name=\"xxx\"></embed>\n");
document.write("</object>\n");

Im nächsten Schritt müssen Sie für den Internet Explorer eine VBScript-Funktion einfügen, die fscommand()-Aufrufe an die entsprechende JavaScript-Funktion weitergibt. Die VBScript-Funktion muss xxx_FSCommand() heißen, wobei xxx gleich dem name- und id-Attribut des Films von oben ist.

if (navigator.userAgent.toLowerCase().indexOf("msie") > –1){
   document.write("<script language=\"VBScript\"\> \n");
   document.write("on error resume next \n");
   document.write("Sub xxx_FSCommand(ByVal command, ByVal arguments) \n");
   document.write("  call xxx_DoFSCommand(command, arguments)
\n");
   document.write("End Sub \n");
   document.write("</script\> \n");
}

Beachten Sie, dass der Filmname (hier: xxx) auch innerhalb der Funktion einmal auftaucht.

Als Nächstes wird die JavaScript-Funktion erstellt, die auch xxx_DoFSCommand() heißt; xxx ist wieder das name-/id-Attribut des Films. Die Funktion erwartet, wie oben ausgeführt, zwei Parameter: command und arguments.

function xxx_DoFSCommand(command, arguments) {
   // ...
}

Der Rest liegt nun an Ihnen. Sie müssen ermitteln, bei welchem übergebenen Kommando welche Befehle ausgeführt werden sollen und welche Rolle dabei die Kommandos spielen. Angenommen, der Flash-Film ruft fscommand("Ausgabe", "Galileo Press") auf und dieser Aufruf soll dazu führen, dass auf der HTML-Seite die Parameter (in diesem Fall: "Galileo Press") ausgegeben werden. Die Funktion xxx_DoFSCommand() müsste dann folgendermaßen aussehen:

function xxx_DoFSCommand(command, arguments) {
   if (command == "Ausgabe") {
      alert(arguments);
   }
}

Als Zusammenfassung ist hier noch einmal der komplette Code zum Aufruf von JavaScript-Funktionen aus einem Flash-Film heraus abgedruckt:

<html>
<head>
<title>Macromedia Flash</title>
<script type="text/javascript" src="adobe.js"></script>
</head>
<body>
<script type="text/javascript"><!--
// Behandlungsroutine für fscommand()-Aufrufe
function xxx_DoFSCommand(command, arguments) {
   // ...
}
if (macromedia_flash()) {
   // VBS-Funktion für den Internet Explorer
   if (navigator.userAgent.toLowerCase().indexOf("msie")>-1){
      document.write("<script language=\"VBScript\"\> \n");
      document.write("on error resume next \n");
      document.write("Sub xxx_FSCommand(ByVal command, 
        ByVal arguments) \n");
      document.write("  call xxx_DoFSCommand(command, 
        arguments)\n");
      document.write("End Sub \n");
      document.write("</script\> \n");
   }
   // Ausgabe des Films
   document.write("<object classid=\"clsid:D27CDB6E-AE6D-
     11cf-96B8–444553540000\"\n");
   document.write("codebase=\"http://download.macromedia.com/
     pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0\"
     \n");
   document.write("ID=\"xxx\">\n");
   document.write("<param name=\"movie\" value=\"xxx.swf\" 
     />\n");
   document.write("<embed src=\"xxx.swf\" \n");
   document.write("type=\"application/x-shockwave-flash\" 
     \n");
   document.write("pluginspage=\"http://www.macromedia.com/
     shockwave/download/index.cgi?P1_Prod_Version=
     ShockwaveFlash\" \n");
   document.write("swLiveConnect=\"true\" \n");
   document.write("name=\"xxx\"></embed>\n");
   document.write("</object>\n");
}
//--></script>
<noscript>Ohne JavaScript-f&auml;higen Browser kann kein Film 
gezeigt werden!</noscript>
<noembed>Ihr Browser kann diesen Film nicht anzeigen!
</noembed>
</body>
</html>

Es gibt noch weitere Möglichkeiten, mittels der in Flash integrierten Programmiersprache ActionScript – die im Übrigen genau wie JavaScript an den ECMAScript-Standard angelehnt ist – JavaScript-Code auszuführen. Die Funktion getURL() wird normalerweise dazu verwendet, im Browserfenster Webadressen aufzurufen; es ist jedoch auch möglich, hierbei das JavaScript-Pseudoprotokoll zu verwenden:

getURL("javascript:alert(\"Von Flash aus!\");");

Schamlose Schleichwerbung: Weitere Informationen zur ActionScript-Programmierung mit Flash finden Sie in dem Buch »Einstieg in ActionScript« von Tobias Hauser, Armin Kappler und Christian Wenz, das ebenfalls bei Galileo Press erschienen ist.

JavaScript ruft Flash

Der umgekehrte Weg, also die Kontrolle des Flash-Films von JavaScript aus, ist ebenfalls möglich. Dazu müssen Sie die HTML-Datei auf zweierlei Arten vorbereiten:

gp  Stellen Sie wie zuvor sicher, dass das name-Attribut im <embed>-Tag des Films und das id-Attribut im <object>-Tag des Films identisch sind und dass die restlichen Bedingungen (wie bei JavaScript-Funktionen: keine Sonderzeichen, darf nicht mit einem Namen beginnen) erfüllt werden.
gp  Verwenden Sie im <embed>-Tag wieder das Attribut swLiveConnect="true".
gp  Speichern Sie eine Referenz auf den Film in einer Variablen. Beim Internet Explorer geht das direkt über den Namen des Films (oder window.Filmname), beim Mozilla über document.Filmname (oder ausführlich document.embeds["Filmname"]):
var film = (navigator.userAgent.toLowerCase().indexOf("msie") > –1 ? xxx : document.xxx;
Achten Sie auch hier darauf, das xxx durch das id-/name-Attribut Ihres Films zu ersetzen.

Sie können nun den Film ähnlich wie die ActiveX-Komponenten bzw. Plugins für die Sound- und Videowiedergabe aus dem ersten Teil dieses Kapitels per JavaScript steuern, beispielsweise starten und anhalten:

if (film && film.Play) {
   film.Play();
}
if (film && film.StopPlay) {
   film.StopPlay();
}

Die Abfrage if (film && ...) dient dazu, die obligatorischen Fehlermeldungen beim Zugriff auf noch nicht vollständig geladene Filme abzufangen.

In der folgenden Tabelle finden Sie eine Übersicht über die wichtigsten zur Verfügung stehenden Funktionen sowie die Flash-Version, ab der diese zur Verfügung stehen.


Tabelle 23.3     Funktionen zur Steuerung von Flash-Filmen (Auswahl)

Funktion Beschreibung Ab Version ...
Play() Startet das Abspielen des Films. 2
StopPlay() Hält die Wiedergabe des Films an. 2
Rewind() Spult den Film an den Anfang zurück. 2
IsPlaying() Gibt an, ob der Film gerade abgespielt wird (true) oder nicht (false). 2
GotoFrame(Bildnummer) Springt zum angegebenen Bild im Film. 2
TotalFrames() Gibt die Gesamtanzahl der Bilder im Film zurück. 2
LoadMovie (Ebenennummer, URL) Lädt den angegebenen Film in die angegebene Ebene. 3
PercentLoaded() Gibt an, wie viel Prozent des Films bereits geladen (gestreamt) worden sind. 2
GetVariable (Variablenname) Liest den Wert der angegebenen (Flash-)Variablen aus. 4
SetVariable (Variablenname, Wert) Setzt die angegebene (Flash-) Variable. 4
Zoom(Prozentzahl) Zoomt in den Film hinein oder aus ihm heraus; Angaben in Integer. Zoom(25) beispielsweise vergrößert um den Faktor 4. 2

Beispiele

Mit diesen Funktionen lassen sich einige schöne Beispiele realisieren, von denen hier zwei vorgeführt werden sollen.

Zunächst einmal wollen wir mit JavaScript eine Art Lade-Fortschrittsanzeige für den Flash-Film erzeugen. Die neueren Versionen des Adobe-Programms können einen Fortschrittsbalken beim Laden des Films automatisch erzeugen, und es ist auch möglich, innerhalb von Flash so einen Balken zu generieren.

Wir verzichten freiwillig auf die grafische Opulenz und möchten lediglich in der Statuszeile angeben, wie viel Prozent des Films schon übertragen worden sind. Dabei gehen wir mit folgender Strategie vor:

gp  Nach dem Laden des Dokuments versuchen wir, auf die Methode PercentLoaded des (gestreamten) Films zuzugreifen.
gp  Bei einem Rückgabewert kleiner als 100 geben wir diesen Wert in der Statuszeile aus.
gp  Ab dem Wert 100 wird nichts mehr ausgegeben, der Film ist ja vollständig geladen und wird vermutlich schon abgespielt.
gp  Die Funktion wird mittels setInterval() oder setTimeout() so lange immer wieder aufgerufen, bis der Film vollständig geladen worden ist.

Gesagt, getan; hier sehen Sie das entsprechende Skript:

<html>
<head>
<title>Adobe Flash</title>
<script type="text/javascript"><!--
var film;
function init() {
   var film = (navigator.userAgent.toLowerCase().indexOf("msie") > –1 ? xxx : document.xxx);
}
function fortschritt() {
var p = 0;
   if (film && film.PercentLoaded) {
      var p = film.PercentLoaded();
      window.status = p + "% geladen";
   }
   if (p < 100) {
      setTimeout("fortschritt()", 500);
   }
}
//--></script>
</head>
<body onload="init(); fortschritt();">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8–444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"
   ID="xxx">
   <param name="movie" value="xxx.swf" />
   <embed src="xxx.swf" type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
   swLiveConnect="true"
   name="xxx"></embed>
</object>
</body>
</html>

Zum Abschluss stellen wir eine Art Jukebox in Anlehnung an das Wurlitzer-Beispiel aus diesem Kapitel vor. Diese bietet die folgenden Funktionalitäten:

gp  Starten und Stoppen des Films
gp  Zurückspulen
gp  Sprung zu einem bestimmten Bild
gp  Zoom um einen bestimmten Faktor

Der Aufbau ist geradlinig und wird nicht weiter erläutert. Es werden lediglich einige der zuvor tabellarisch vorgestellten Funktionen eingesetzt.

Aus Platz- und Übersichtlichkeitsgründen verzichten wir auch hier auf den Code zur JavaScript-Abfrage, ob ein ActiveX-Control bzw. Plugin vorhanden ist oder nicht.

<html>
<head>
<title>Adobe Flash</title>
<script type="text/javascript"><!--
var film;
function init() {
   var film = (navigator.userAgent.toLowerCase().indexOf("msie") > –1 ? xxx : document.xxx);
}
//--></script>
</head>
<body onload="init();">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8–444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"
   ID="xxx">
   <param name="movie" value="xxx.swf" />
   <embed src="xxx.swf" type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
   swLiveConnect="true"
   name="xxx"></embed>
</object>
<form name="flash" onsubmit="return false;">
<a href="javascript:if (film && film.Play) film.Play()">Abspielen</a><br />
<a href="javascript:if (film && film.StopPlay) film.StopPlay()">Stop</a><br />
<a href="javascript:if (film && film.Rewind) film.Rewind()">Zur&uuml;ckspulen</a><br />
<a href="javascript:if (film && 
film.GotoFrame) film.GotoFrame(parseInt(document.forms['flash'].elements['bildnr'].value))">
Springe zu Bild</a> <input type="text" name="bildnr" value="1" /><br />
<a href="javascript:if (film && film.Zoom) 
film.Zoom(parseInt(document.forms['flash'].elements['zoom'].value))">Zoom</a>
 <input type="text" name="zoom" value="0" />
</form>
</body>
</html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 23.5     Die (spartanische) Oberfläche des Flash-Wurlitzer

 




1  Bei neueren (oder älteren) Versionen von Director ändert sich nie die Class-ID, sondern immer nur der Dateiname. Es gibt noch zahlreiche weitere Möglichkeiten, aber fscommand() funktioniert auch in sehr alten Flash-Plugin-Versionen.

 <<   zurück
  
  Zum Rheinwerk-Shop
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern