Anzeige
Tutorialbeschreibung

Javascript und Ajax - Multimedia

Javascript und Ajax - Multimedia

[Javascript und Ajax] Multimedia 23

Dieses Kapitel soll zeigen, wie man mit Java Script multimediale Inhalte steuern kann.


Das nun folgende Tutorial ist ein Auszug aus der 7. Auflage des Buches: JavaScript und Ajax von Christian Wenz.

Musik ist heutzutage oft nur Lärm mit Copyright. – Peter Holl

Kapitel 23 Multimedia

Das Einbinden von Multimedia-Inhalten wie Audio und Video in Webseiten wird generell sehr stiefmütterlich behandelt. Allzu aufdringliches Hintergrundgedudel gilt generell als verpönt, und wenn sich jemand doch traut, seine Website musikalisch zu untermalen, werden meistens Kardinalfehler begangen, so dass das Grauen nur im Internet Explorer (oder in dem vom Webmaster bevorzugten Browser) zu hören ist – wobei sich hier die Frage stellt, ob das wirklich ein Nachteil ist.

Doch es soll nicht verschwiegen werden, dass es im World Wide Web viele qualitativ hochwertige Multimedia-Inhalte gibt – wenn man nur lange genug danach sucht. Der Einbau an sich ist schon ein kleines Problem, weil einige populäre HTML-Anleitungen in diesem Punkt einiges an Ungenauigkeiten und Auslassungen aufweisen. Das ist zum Teil verständlich – da wird aus der offiziellen Spezifikation kopiert, und Multimediadaten zum Testen stehen nicht zur Verfügung –, führt aber bei dem- bzw. derjenigen, der bzw. die das umsetzen muss, zu großem Frust.

Das Ziel dieses Kapitels ist nicht, eine große HTML-Einführung abzuliefern, sondern es soll zeigen, wie man mit ein wenig JavaScript die Multimedia-Inhalte steuern kann. Dazu werden zwei Anwendungen vorgestellt, die mit JavaScript manipulierbar sind. Zunächst beschäftigen wir uns mit der herkömmlichen Wiedergabe von Audiodaten über die beim Internet Explorer und Netscape Navigator mitgelieferten Komponenten (ActiveX beim Internet Explorer, Plugins beim Netscape Navigator). Im zweiten Teil wird der Media Player von Microsoft näher beleuchtet: Sie sehen, wie Inhalte für dieses Produkt in Webseiten integriert werden können und wie Sie mit JavaScript das Steuer übernehmen können. Der Media Player kann nicht nur Audio-, sondern auch Videodaten wiedergeben.

Bevor wir in medias res gehen, noch ein kurzer Hinweis: Bei all der Begeisterung für bewegte Bilder und Töne sollten Sie zwei Sachen nie außer Acht lassen:

>

die Bandbreite des Internetzugangs Ihrer Benutzer

 

>

die Leidensfähigkeit Ihrer Benutzer

Halten Sie also die Dateigrößen in einem akzeptablen Rahmen, und verwenden Sie Audio (und Video) nicht um des bloßen Effekts willen, sondern gerade weil es gut zur Seite passt und dennoch nicht aufdringlich ist. Ansonsten sind die Besucher schneller wieder weg, als Ihnen lieb sein kann.


 

 

23.1 Musik

Wenden wir uns zunächst dem Einbau von Sounddaten zu. Die unterstützten Dateiformate sind von bereits installierten Plugins oder Abspielkomponenten der Browser abhängig, insbesondere populäre Formate wie etwa WAV werden nicht immer direkt unterstützt.

Der wohl kleinste gemeinsame Nenner ist hier das .mid-Format; das steht für MIDI. In diesem Format wird nur eine begrenzte Menge an Informationen gespeichert: Welche Tonhöhe hat eine Note, wie laut ist diese Note, wie lange wird sie gehalten, und welches Instrument spielt sie? Das ist auch alles – die Emulation des Instruments muss das Abspielprogramm übernehmen, darüber ist in der Datei nichts ausgesagt. Aus diesem Grund klingen MIDI-Dateien auch immer eher bescheiden, was aber nicht an der Qualität der Datei liegt, sondern an den Beschränkungen des Formats und der mangelnden Qualität der Abspielsoftware.


 

23.1.1 Einbau in HTML 

Prinzipiell stehen für den Einbau von Multimediadaten mehrere HTML-Tags zur Verfügung. Die verbreitetsten sind <embed> und <object>. <embed> gilt als Netscape-Erfindung und wurde aus Konzessions- und Kompatibilitätsgründen in den Internet Explorer 4 eingebaut (der etwas nach dem Netscape Navigator 3 erschien, in dem das Tag eingeführt wurde). Gleichzeitig hat Microsoft in dieser Internet-Explorer-Version ein weiteres Tag eingeführt, <object>. Das Rennen hat (nicht nur hier) Microsoft gewonnen, <object> ist inzwischen eine offizielle W3C-Empfehlung und wird auch von Mozilla-Browsern unterstützt (allerdings verwenden diese auch immer noch <embed>, sofern notwendig). Für einfache Audiodaten ist mit <embed> jedoch ein kleinster gemeinsamer Nenner gefunden, der sowohl im Internet Explorer als auch im Mozilla funktioniert.

Mozilla wird eigentlich ohne Audio-Plugins ausgeliefert, aber auf den meisten Sytemen ist mindestens ein Sound-Player vorhanden, der sich in den Browser einklinkt.

Eine Audiodatei kann wie folgt (weitestgehend) browserunabhängig eingebaut werden:

<embed name="musik" src="datei.mid"

  autostart="true" hidden="false" mastersound="mastersound"></embed>

An dieser Stelle sollen nur die wichtigsten Attribute vorgestellt werden, in der Praxis gibt es freilich weitere:

>

autostart: kann entweder auf "true" oder auf "false" gesetzt werden und gibt an, ob die Wiedergabe der Audiodatei sofort nach dem Laden der Seite beginnen soll (dann "true") oder nicht (dann "false").

 

>

hidden: kann entweder auf "true" oder auf "false" gesetzt werden und gibt an, ob eine Audiokomponente (inklusive Kontrollelementen zum Starten, Stoppen und Spulen des Dateiinhalts) angezeigt werden soll (dann "false") oder nicht (dann "true").

 

>

mastersound: Mozilla-Browser benötigen dieses Attribut, um die Audiodaten wiederzugeben.

 

>

name: wie gehabt: Ein Identifikator, über den die Audiokomponente von JavaScript aus angesprochen werden kann. Der Zugriff erfolgt wie gehabt über document.name-Attribut oder ausführlich über document.embeds["name-Attribut"].


 

 

23.1.2 Standardkontrollen des Internet Explorers 

Für die Audiowiedergabe ist im Internet Explorer die ActiveMovie-ActiveX-Komponente zuständig, die standardmäßig bei Windows 95 mitgeliefert wurde. Ab Windows 98 tritt an diese Stelle der Windows Media Player (WMP). In den ursprünglich ausgelieferten Versionen von Windows 98 und Windows 98 SE war das Version 6.4. Etwas später – in etwa mit Windows ME – erschien WMP-Version 7, zum Zeitpunkt der Drucklegung dieses Buchs war Version 11 aktuell (als Beta-Version und Vorbote von Windows Vista). Bei der Installation des Windows Media Players (die Versionen ab 7 stehen für alle Windows-Plattformen außer Windows 95 und Windows NT 4 zur Verfügung) wird die zugehörige ActiveX-Komponente gleich in den Internet Explorer integriert. An sich ist das keine schlechte Sache, aber die Ansteuerung der Komponenten ist unterschiedlich.

Die wesentlichen Funktionen zur Ansteuerung von Audiodaten sind die folgenden:

>

Wiedergabe starten

 

>

Wiedergabe anhalten

 

>

Wiedergabe pausieren lassen

Das ActiveX-Control von ActiveMovie oder vom Windows Media Player bietet hierzu drei Funktionen an, die bei allen Controls einen identischen Namen tragen:

>

play() – startet die Wiedergabe (bzw. setzt sie nach dem Pausieren fort).

 

>

pause() – hält die Wiedergabe an.

 

>

stop() – beendet die Wiedergabe.

Der aktuelle Wiedergabestatus kann ebenfalls abgefragt werden, doch hier unterscheiden sich die ActiveMovie-Komponente und das ActiveX-Control des Media Players. Während die ActiveMovie-Komponente den Status in der Eigenschaft CurrentState speichert, heißt das Gegenstück des Windows Media Players PlayState. Doch damit nicht genug der Unterschiede: Der Windows Media Player Version 6.4 ist in Sachen Wertebereich für die Eigenschaft weitestgehend kompatibel zu ActiveMovie, wie aus der folgenden Tabelle ersichtlich ist.


 

Tabelle 23.1     Die Bedeutung der Statuswerte bei Active Movie und Media Player 6.4

 

CurrentState (ActiveMovie)

PlayState (Media Player 6.4)

0

Stop

Stop

1

Pause

Pause

2

Wiedergabe

Wiedergabe

 

Mit Version 7 des Media Players hat sich dieses Verhalten leider geändert – die verschiedenen Statuswerte haben jetzt eine andere Bedeutung. In den Versionen 7.1 bis 11 wurde wenigstens nichts geändert, so dass die Hoffnung besteht, dass auch die Komponenten der zukünftigen Media Player ein konsistentes Verhalten zeigen.


 

Tabelle 23.2     Bedeutung der Statuscodes bei allen IE-Komponenten

 

CurrentState (ActiveMovie)

PlayState (Media Player 6.4)

PlayState (Media Player ab 7.0)

0

Stop

Stop

undefiniert

1

Pause

Pause

Stop

2

Wiedergabe

Wiedergabe

Pause

3

undefiniert

undefiniert

Wiedergabe

 

Der Nachteil der Inkompatibilität kann aber insofern ausgeglichen werden, als dass der aktuelle Status in der Regel uninteressant ist. Wenn Sie die komplette Steuerung mit JavaScript durchführen, können Sie den Status auch selbst von Hand nachverfolgen, da die Audiodaten alle per Skript gestartet, gestoppt und auf »Pause« gestellt werden.

Die Lautstärke steht in der Eigenschaft volume des ActiveX-Control. Sie haben von JavaScript aus Lese- und Schreibrechte auf diese Eigenschaft, Sie können also die Wiedergabelautstärke per JavaScript ändern:

document.musik.volume += 20;  // 20 Einheiten lauter

Über die Eigenschaft currentPosition können Sie die aktuelle Position des Abspielkopfes bestimmen und auch verändern. Die Maßeinheit sind dabei Sekunden. Folgendes Kommando spult das Band bildlich gesprochen zurück:

document.musik.currentPosition = 0;

Um auf das Gegenstück – das Ende und damit die Länge des Audioclips – zuzugreifen, muss etwas weiter ausgeholt werden.

Es besteht die Möglichkeit, die Wiedergabe an einer bestimmten Stelle starten und an einer anderen, ebenfalls definierten Stelle enden zu lassen. Dies nennt man eine Auswahl (engl. selection), und die zugehörigen Eigenschaften heißen selectionStart (Beginn der Wiedergabe in Sekunden) und selectionEnd (Ende der Wiedergabe in Sekunden). Um also festzustellen, wie lang der Audioclip ist, genügt es, nach dem Laden auf selectionEnd zuzugreifen. Diese Eigenschaft steht erst zur Verfügung, wenn die Audiodatei komplett geladen worden ist; die Eigenschaft ReadyState hat dann den Wert 4.

Zum Abschluss sehen wir uns kurz die letzte wichtige Funktion an: das Laden eines Audioclips. In der Eigenschaft FileName wird der Name der aktuellen Datei gespeichert. Dieser kann auch verändert werden:

document.musik.FileName = "galileo.mid";


 

 

23.1.3 Standardkontrollen des Netscape Navigator 

Mit den meisten Netscape- und sogar manchen Mozilla-Versionen wird das LiveAudio-Plugin mitgeliefert. Als Netscape/Mozilla-Plugin besitzt es – im Gegensatz zu ActiveX-Komponenten des Internet Explorers – keine Eigenschaften, sondern erlaubt nur einen Zugriff über Methoden. Das ist kein größeres Problem, denn (fast) alles, was im Internet Explorer mit einer Eigenschaft gesetzt werden kann, findet im Konkurrenzbrowser mit einer Funktion eine Entsprechung.

Ein Wort zum Mozilla: Meistens ist dort kein Audio-Plugin dabei. Das heißt, der Client benötigt ein spezielles Plugin, etwa von Quicktime oder vom Windows Media Player oder vom Real Player. In der Praxis wird aber meistens Flash verwendet, um Audio- (und auch Video-)Daten abzuspielen. In Abschnitt 23.3.3 erfahren Sie mehr zur Ansteuerung per JavaScript. Der Windows Media Player wird in Abschnitt 23.2 genauer behandelt.

Auch bei einem LiveAudio-Plugin können Sie die drei Standardfunktionen – Start, Pause, Stop – aufrufen:

>

play(loop) – startet die Wiedergabe oder lässt sie (wenn sie pausierte) wieder starten.

 

>

pause() – lässt die Wiedergabe pausieren.

 

>

stop() – beendet die Wiedergabe.

Zur Abfrage des Wiedergabestatus stehen drei Funktionen zur Verfügung; genau eine davon liefert true, die beiden anderen false:

>

IsPaused() – gibt an, ob die Wiedergabe pausiert wurde (true) oder nicht (false).

 

>

IsPlaying() – gibt an, ob die Audiodatei gerade wiedergegeben wird (true) oder nicht (false).

 

>

IsReady() – gibt an, ob das Plugin samt Audiodatei komplett geladen worden ist (true) oder nicht (false).

Die Wiedergabe ist also genau dann gestoppt, wenn IsReady() den Rückgabewert true hat und IsPaused() und IsPlaying() jeweils false zurückliefern.

Die Lautstärke kann nicht über eine Eigenschaft gesetzt werden, sondern hier ist – wie eingangs erwähnt – eine extra Methode erforderlich. Mit setvol() wird die Lautstärke geändert, als Wert sollte eine Zahl von 0 bis 100 angegeben werden, denn das Plugin misst in Prozentpunkten. Die aktuelle Lautstärke wird von der Funktion GetVolume() zurückgeliefert.

document.musik.setvol(document.musik.GetVolume() + 20);

  // 20 Prozentpunkte lauter

Die aktuelle Position innerhalb der Wiedergabe kann mit dem LiveAudio-Plugin nicht bestimmt werden, zumindest nicht von JavaScript aus. Jedoch kann eine Start- und eine Endzeit festgesetzt werden, von bzw. bis zu der die Audiodaten abgespielt werden können. Die zugehörigen Methoden des Plugins heißen start_time() und end_time(), der Parameter ist jeweils die gewünschte Sekundenzahl.

Wenn also zu Sekunde 20 der Audiodatei gesprungen werden soll, kann die Startzeit auf 20 gesetzt werden:

document.musik.start_time(20);

Die mit start_time() und end_time() vorgenommenen Angaben gelten auch für ein wiederholtes Abspielen der Sounddatei. Um die Einstellungen wieder rückgängig zu machen, können die Methoden start_ at_beginning() (macht start_time() rückgängig) und stop_at_end() (macht end_time() rückgängig) aufgerufen werden.

Der Dateiname des aktuellen Clips kann mit der bereits bekannten play()-Funktion geändert werden. Die URL des Clips kann als zweiter Parameter übergeben werden:

document.musik.play(true, "galileo.mid");


 

 

23.1.4 Browserunabhängige Ansteuerung 

Um den Audioclip browserunabhängig anzusteuern, muss zunächst festgestellt werden, welche Form von Browser vorliegt.

Der Internet Explorer kann daran erkannt werden, dass window.ActiveX-Object existiert.

Der Netscape- oder Mozilla-Browser muss, um LiveAudio-Daten zu unterstützen, die folgenden Bedingungen erfüllen:

>

navigator.plugins muss existieren (darf also nicht false zurückliefern). Dann nämlich werden Plugins vom Browser unterstützt.

 

>

navigator.plugins["LiveAudio"] muss existieren (darf also nicht false zurückliefern). Dann nämlich ist das LiveAudio-Plugin installiert.

 

>

navigator.javaEnabled() muss true zurückliefern – denn ohne Java funktioniert der JavaScript-Zugriff auf das Plugin nicht.

if (navigator.plugins &&

    navigator.plugins["LiveAudio"] &&

    navigator.javaEnabled()) {

   // Code für LiveAudio

} else if (navigator.plugins && document.all) {

   // Code für ActiveMovie / Media Player

}

Um die Erstellung von browserunabhängigen Funktionen zur Soundsteuerung zu erleichtern, werden zwei Hilfsfunktionen geschrieben, die jeweils angeben, ob der Internet-Explorer- oder Netscape-spezifische Code verwendet werden kann:

function sound_nn() {

   return (navigator.plugins &&

           navigator.plugins["LiveAudio"] &&

           navigator.javaEnabled());

}

function sound_ie() {

   return (window.ActiveXObject != null);

}

Die weiteren Funktionen bedienen sich der vorgestellten Hilfsfunktionen. Zunächst ist aber noch ein letzter Vorbereitungsschritt nötig. Das Ziel der Hilfsfunktionen (und der meisten Beispiele in diesem Buch) ist es, möglichst universell einsetzbar zu sein. Aus diesem Grund ist es nicht möglich, innerhalb der Funktionen auf einen »hartkodierten« (also nicht veränderbaren) Namen des Soundelements zuzugreifen. Stattdessen wird vorausgesetzt, dass ein extra Objekt erzeugt worden ist. Dieses Objekt enthält als Eigenschaften unter anderem eine Referenz auf das Soundobjekt, aber auch Verweise auf die einzelnen im Folgenden ausprogrammierten Methoden.

Ein solches Objekt wird mit folgender Anweisung erzeugt:

var o = new sound_obj(ref);

Als Parameter wird eine Referenz auf das Plugin oder das ActiveX-Control übergeben, in der Regel wie zuvor auch via document.embeds["name-Attribut"]. Die Funktion, die das JavaScript-Objekt erstellt, sieht folgendermaßen aus:

function sound_obj(ref) {

   this.obj = ref;

   this.play = sound_play;

   this.pause = sound_pause;

   this.stop = sound_stop;

   this.getVolume = sound_getVolume;

   this.setVolume = sound_setVolume;

   this.start = sound_start;

   this.ende = sound_ende;

   this.startReset = sound_start_reset;

   this.endeReset = sound_ende_reset;

   if (sound_ie()) {

      this.origEnde = 0;

   }

   this.lade = sound_lade_datei;

   return this;

}

Wie Sie sehen, werden in der Funktion eine Reihe von Methoden definiert. Die zugrunde liegenden Hilfsfunktionen für die neuen Methoden werden im Folgenden entwickelt. Über this.obj kann jederzeit auf das Sound-Objekt zugegriffen werden, also das Plugin bzw. die ActiveX-Komponente. Für die ActiveMovie- bzw. Media-Player-Komponente wird in einer Objekteigenschaft abgelegt, welche Länge der Clip ursprünglich hatte.

Beispielsweise müssen Sie bei der Funktion zur Wiedergabe der Audiodatei eine Unterscheidung vornehmen. Wenn ein Parameter (oder mehrere) übergeben werden, muss er an die Methode play() übergeben werden, aber nur, wenn ein Netscape-Browser vorliegt. Wird kein Parameter übergeben, muss als Standardparameter true übergeben werden (denn der Macintosh-Netscape benötigt unbedingt einen Parameter für play()).

function sound_play() {

   if (sound_nn()) {

      var anzParameter = sound_play.arguments.length;

      var param1 = (anzParameter < 1) ? true :

                   sound_play.arguments[0];

      var param2 = (anzParameter < 2) ? null :

                   sound_play.arguments[1];

      if (param2) {

         this.obj.play(param1, param2);

      } else {

         this.obj.play(param1);

      }

   } else if (sound_ie()) {

      this.obj.play();

   }

}

Die Funktionen zum Pausierenlassen und zum Stoppen der Wiedergabe sind da wesentlich leichter zu erstellen – denn die Bezeichnungen sind identisch:

function sound_pause()   {

   if (sound_nn() || sound_ie()) {

      this.obj.pause();

   }

}

 

function sound_stop()   {

   if (sound_nn() || sound_ie()) {

      this.obj.stop();

   }

}

Für das Lesen und Setzen der Lautstärke muss wieder zwischen den Browsern unterschieden werden. Beim Internet Explorer (sprich: Ac-tiveMovie bzw. Media Player) kann auf die Eigenschaft volume zurückgegriffen werden, Netscapes LiveAudio kennt die Methoden setvol() und GetVolume():

function sound_getVolume()   {

   if (sound_nn()) {

      return this.obj.GetVolume();

   } else if (sound_ie()) {

      return this.obj.volume;

   }

}

 

function sound_setVolume(v)   {

   if (sound_nn()) {

      this.obj.setvol(v);

   } else if (sound_ie()) {

      this.obj.volume = v;

   }

}

Als Nächstes wenden wir uns der Auswahl eines Abspielbereichs zu: dem Setzen der Start- und Endzeit. Als Parameter verwenden sowohl die Netscape- als auch die Internet Explorer-Methoden Sekunden, so dass keine Umrechnung notwendig ist.

function sound_start(n)   {

   if (sound_nn()) {

      this.obj.start_time(n);

   } else if (sound_ie()) {

      if (this.obj.ReadyState == 4) {

         this.obj.SelectionStart = n;

      }

   }

}

 

function sound_ende(n)   {

   if (sound_nn()) {

      this.obj.end_time(n);

   } else if (sound_ie()) {

      if (this.obj.ReadyState == 4) {

         if (this.origEnde == 0) {

            this.origEnde = this.obj.SelectionEnd;

         }

         this.obj.SelectionEnd = n;

      }

   }

}

Beachten Sie im obigen Code die folgende Abfrage:

if (this.obj.ReadyState == 4)

Damit wird überprüft, ob die Audiodatei bereits vollständig geladen worden ist. Wenn das nicht der Fall ist, kann nicht auf die Eigenschaft SelectionEnd zugegriffen werden.

Ebenfalls wird in obigem Code der originale Wert von SelectionEnd in der Objekteigenschaft origEnde gespeichert. Der Wert wird später noch benötigt.

Um die von sound_start() und sound_ende() vorgenommenen Einstellungen rückgängig zu machen, werden ebenfalls zwei Funktionen geschrieben. Der Effekt von sound_start() kann sehr leicht aufgehoben werden – die Startzeit wird einfach auf 0 gesetzt:

function sound_start_reset() {

   sound_start(0);

}

Um sound_ende() rückgängig zu machen, muss man sich etwas mehr überlegen. Das Netscape-Plugin bietet die Methode stop_at_end() an, ActiveMovie/Media Player bietet da keinen adäquaten Ersatz. Vielleicht erinnern Sie sich ja – in der Funktion sound_ende() wird die originale Cliplänge in einer Objektvariablen gespeichert. Um also sound_ende() rückgängig zu machen, müssen Sie einfach wieder den alten Wert zuweisen:

function sound_ende_reset() {

   if (sound_nn()) {

      this.obj.stop_at_end();

   } else if (sound_ie()) {

      if (this.origEnde != 0) {

         this.obj.SelectionEnd = this.origEnde;

      }

   }

}

Der letzte Punkt auf unserer Aufgabenliste ist das Laden eines neuen Clips. Bei LiveAudio muss die play()-Funktion aufgerufen werden, beim Internet Explorer die Eigenschaft FileName geändert werden:

function sound_lade_datei(x) {

   if (sound_nn()) {

      this.obj.play(true, x);

   } else if (sound_ie()) {

      this.obj.FileName = x;

   }

}


 

 

23.1.5 Anwendung: Wurlitzer

Mithilfe der entwickelten Hilfsfunktionen lässt sich ohne größeren Aufwand eine funktionsfähige Audio-Jukebox erstellen. Der grafischen Gestaltung sind dabei keine Grenzen gesetzt, das Beispiel an dieser Stelle ist eher spartanisch gehalten:

<html>

<head>

<title>Wurlitzer</title>

<script type="text/javascript" src="multimedia.js"></script>

<script type="text/javascript"><!--

var musik;

function wurlitzer_init() {

   musik = new sound_obj(document.embeds["musik"]);

   document.forms["wurlitzer"].elements["v"].value =

      musik.getVolume();

}

//--></script>

</head>

<body onload="wurlitzer_init();">

<embed name="musik" src="1.mid"

   autostart="true" hidden="true"

   mastersound="mastersound"></embed>

<form name="wurlitzer" onsubmit="return false;">

<a href="javascript:musik.play()">Play</a><br>

<a href="javascript:musik.pause()">Pause</a><br>

<a href="javascript:musik.stop()">Stop</a><br>

<input type="text" name="v" size="2" value="50" />

<a href="javascript:musik.setVolume(parseInt(document.forms['wurlitzer'].elements['v'].value));">

Lautst&auml;rke setzen</a><br />

<input type="text" name="s" size="4" value="0" />

<a href="javascript:musik.start(parseInt(document.forms['wurlitzer'].elements['s'].value));">

Startzeit setzen</a> -

<a href="javascript:musik.startReset();">Startzeit zur&uuml;cksetzen</a><br />

<input type="text" name="e" size="4" value="0" />

<a href="javascript:musik.ende(parseInt(document.forms['wurlitzer'].elements['e'].value));">

Endzeit setzen</a> -

<a href="javascript:musik.endeReset();">Endzeit zur&uuml;cksetzen</a><br />

<input type="text" name="d" size="20" value="1.mid" />

<a href="javascript:musik.lade(document.forms['wurlitzer'].elements['d'].value);">Datei laden</a>

</form>

</body>

</html>

Bilder

Abbildung 23.1     Eine (grafisch spartanische) Jukebox

Der oben gezeigte Code ist recht geradlinig – auf Mausklick wird die Musikdatei gestartet, gestoppt oder vorübergehend unterbrochen. Die Lautstärke kann in einem Textfeld eingegeben werden, ebenfalls die Start- und Endposition. Der zusätzliche JavaScript-Code erledigt eigentlich nur noch die Kommunikation mit den in multimedia.js definierten Hilfsfunktionen.

Sie dürfen sich jedoch nicht darauf verlassen, dass das oben gezeigte Vorgehen auf jedem System funktioniert – es hängt alles davon ab, ob ein Plugin installiert ist und welches.


 

 

23.2 Microsoft Windows Media Player  

Der Microsoft Windows Media Player führte lange Zeit ein Schattendasein in dem Redmonder Produktkatalog; spätestens mit Windows XP hat sich das geändert. Der Windows Media Player ist seitdem ein integraler Bestandteil des Betriebssystems und soll mittelfristig dem bis dato in Sachen Streaming Media führenden Real Player die Spitzenposition streitig machen, was inzwischen auch recht gut gelungen ist.

Neben der Wiedergabe diverser Audioformate (inklusive MP3) beherrscht der Media Player auch eine Reihe von Videoformaten, inklusive einiger Versionen von QuickTime, AVI, MPEG sowie der Microsoft-Schöpfung ASF. Es können nicht nur »Standalone-Videos« wiedergegeben werden, sondern auch Streaming-Daten. Das sind Filme, die (in einer sehr hohen Qualität und Auflösung) auf einem Server hinterlegt sind. Wenn ein Abspielprogramm diesen Film anfordert, wird er nicht (in seiner hohen Auflösung) direkt an das Programm geschickt, sondern in Abhängigkeit von der Qualität der Leitung zwischen Programm und Server in einer angepassten, adäquaten Auflösung. Somit können sowohl ein ISDN-Nutzer als auch ein Firmennutzer mit T1-Standleitung denselben Film anschauen, und jeder bekommt ihn in einer für seine Verbindung optimierten Qualität.

Eine schöne Eigenheit des Windows Media Players ist es, dass er – wie im letzten Abschnitt schön zu sehen war – mit JavaScript gesteuert werden kann. Und das Gute am Media Player ab Version 7 ist, dass es nicht nur das ActiveX-Control für den Internet Explorer, sondern auch ein Plugin für den Netscape Navigator gibt.

Wenn Sie den Media Player nach dem Netscape Navigator installieren, wird das Plugin automatisch für den Browser eingerichtet, wovon Sie sich unter Help N About Plug-ins bzw. Hilfe N Über Plug-ins selbst überzeugen können.

Bilder

Abbildung 23.2     Das Plugin für den Windows Media Player ist installiert.

Sollte bei Ihnen das Plugin noch nicht vorliegen, hilft oft schon eine Neu– bzw. Update-Installation des Windows Media Players, den Sie unter http://www.microsoft.com/windows/windowsmedia/download/ erhalten.


 

 

23.2.1 Einbau in HTML 

Für den Einbau in eine Website stehen zwei Tags zur Verfügung. Da unter dem Internet Explorer das ActiveX-Control verwendet werden soll, muss hier das <object>-Tag zum Zuge kommen. Der Netscape Navigator (und auch Mozilla!) benötigen die Plugin-Variante, und die steht nur bei Verwendung von <embed> zur Verfügung.

Da der Microsoft Internet Explorer <embed> nicht kennt und deswegen ignoriert und der Netscape Navigator wiederum <object> links liegen lässt, können durch eine Mischung beider Tags beide Browser bedient werden:

<object id="film"

  classid="CLSID:22d6f312-b0f6–11d0–94ab-0080c74c7e95"

  codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

  type="application/x-oleobject">

<param name="FileName" value="film.asx" />

<param name="autoStart" value="true" />

<param name="showControls" value="false" />

<embed id="film"

  name="film"

  pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"

  type="application/x-mplayer2"

  src="film.asx"

  autostart="-1"

  showcontrols="0">

</embed>

</object>

Werfen wir einen kurzen Blick auf dieses Codestück:

>

<object – das Tag für den Internet Explorer

 

>

id="..." – der Identifikator für den JavaScript-Zugriff

 

>

classid="..." – weltweit eindeutiger, von Microsoft vergebener Bezeichner für das ActiveX-Control. Aufgrund dessen wird festgestellt, ob das Control bereits im System installiert ist.

 

>

codebase="..." – URL, unter der fehlende Komponenten nachgeladen werden können

 

>

type="application/x-oleobject" – MIME-Typ der eingebetteten Datei

 

>

<param name="FileName" value="..." /> – URL der eingebetteten Datei

 

>

<param name="autoStart" value="..." /> – gibt an, ob die Video-/Audiodatei sofort abgespielt werden soll (true) oder nicht (false).

 

>

<param name="showControls" value="..." /> – gibt an, ob die Steuerungselemente des Controls (zum Starten, Stoppen etc.) eingeblendet werden sollen (true) oder nicht (false).

 

>

<embed – das Tag für den Netscape Navigator

 

>

name="..." – der Identifikator für den JavaScript-Zugriff; sollte mit dem id-Attribut des <object>-Tags identisch sein

 

>

pluginspage="..." – die URL, unter der das Plugin geladen werden kann

 

>

type="..." – der MIME-Typ der eingebetteten Datei

 

>

src="..." – die URL der eingebetteten Datei

 

>

autostart="..." – gibt an, ob die Video-/Audiodatei sofort abgespielt werden soll (-1) oder nicht (0).

 

>

showcontrols="..." – gibt an, ob die Steuerungselemente des Controls (zum Starten, Stoppen etc.) eingeblendet werden sollen (-1) oder nicht (0).

Sie sehen bereits, dass beim <object>-Tag Parameter mit dem <param>-Tag angegeben werden können (auf die dann von JavaScript aus direkt zugegriffen werden kann). Das <embed>-Tag unterstützt so etwas nicht, deswegen sind Sie hier darauf angewiesen, dass Methoden innerhalb des Plugins zur Verfügung stehen. Aus diesem Grund funktioniert der Zugriff beim Internet Explorer und beim Mozilla unterschiedlich.


 

 

23.2.2 Browserunabhängige Ansteuerung 

Da die Codebasis des ActiveX-Controls und die Codebasis des Plugins zumindest zueinander ähnlich sind, stehen identische Funktionalitäten zur Verfügung. Die Ansteuerung erfolgt aber stets auf unterschiedlichem Wege. Während das ActiveX-Control meistens einen Parameter bzw. eine Eigenschaft bietet, die einfach gesetzt werden muss, stehen beim Plugin ausschließlich Methoden zur Verfügung. Aus diesem Grund erfolgt jede Form der Ansteuerung über eine Fallunterscheidung, die zunächst feststellt, ob die ActiveX- oder Plugin-Variante vorliegt.

Um dies überhaupt unterscheiden zu können, gehen wir ähnlich wie im vorhergehenden Abschnitt vor. Nur unterscheiden wir diesmal ganz prosaisch zwischen dem Internet Explorer und dem Mozilla.

function mp_nn()   {

   return (navigator.plugins &&

           navigator.plugins["Windows Media Player Plug-in Dynamic Link Library"]);

}

 

 

function mp_ie() {

   return (window.ActiveXObject != null);

}

Außerdem benötigen wir wieder ein spezielles Objekt, das einen einfachen Zugriff sowohl auf die eingebettete Datei als auch auf alle anderen Hilfsfunktionen ermöglicht:

function mp_obj(ref) {

   this.obj = ref;

   this.play = mp_play;

   this.pause = mp_pause;

   this.stop = mp_stop;

   this.getVolume = mp_getVolume;

   this.setVolume = mp_setVolume;

   this.start = mp_start;

   this.ende = mp_ende;

   this.startReset = mp_start_reset;

   this.endeReset = mp_ende_reset;

   if (mp_ie()) {

      this.origEnde = 0;

   }

   this.lade = mp_lade_datei;

   this.getControls = mp_getControls;

   this.setControls = mp_setControls;

   return this;

}

Ist dieser Schritt erst einmal geschafft, schreibt sich der Rest fast von selbst. Für jede der einzelnen Funktionen muss eine Fallunterscheidung getroffen werden – ist es der Mozilla mit einem Plugin, ist es der Internet Explorer mit einem ActiveX-Control? – und dementsprechend die zugehörige Methode aufgerufen werden. Da dieses Vorgehen dem Verfahren aus dem vorangegangenen Abschnitt ähnelt, sind an dieser Stelle die erläuternden Ausführungen zum Code knapper gehalten als im Rest des Kapitels.

Beginnen wir mit den Grundfunktionen zum Abspielen der Daten. Hier unterscheiden sich die ActiveX- und die Plugin-Variante überhaupt nicht im Handling:

function mp_play()   {

   if (mp_nn() || mp_ie()) {

      this.obj.Play();

   }

}

function mp_pause() {

   if (mp_nn() || mp_ie()) {

      this.obj.Pause();

   }

}

 

function mp_stop() {

   if (mp_nn() || mp_ie()) {

      this.obj.Stop();

   }

}

Schon ein wenig schwieriger ist es mit der Lautstärke. Das ActiveX-Control arbeitet mit der Eigenschaft Volume, das Plugin mit den Methoden SetVolume() und GetVolume():

function mp_getVolume()   {

   if (mp_nn()) {

      return this.obj.GetVolume();

   } else if (mp_ie()) {

      return this.obj.Volume;

  }

}

 

function mp_setVolume(v) {

   if (mp_nn()) {

      return this.obj.SetVolume(v);

   } else if (mp_ie()) {

      this.obj.Volume = v;

   }

}

Das Setzen eines Start- und Endpunktes für das Abspielen geschieht analog: Wieder können bei der ActiveX-Variante Eigenschaften direkt gesetzt werden, bei der Plugin-Version ist der Zugriff über Hilfsmethoden gekapselt. Beachten Sie im folgenden Code, wie beim erstmaligen Aufruf von mp_ende() der letzte Ende-Marker (und damit die Länge des Clips) in einer Objekteigenschaft zwischengespeichert wird.

function mp_start(n) {

   if (mp_nn()) {

      this.obj.SetSelectionStart(n);

   } else if (mp_ie()) {

      this.obj.SelectionStart = n;

   }

}

function mp_ende(n) {

   if (mp_nn()) {

      if (this.origEnde == 0) {

         this.origEnde = this.obj.GetSelectionEnd();

      }

      this.obj.SetSelectionEnd(n);

   } else if (mp_ie()) {

      if (this.origEnde == 0) {

         this.origEnde = this.obj.SelectionEnd;

      }

      this.obj.SelectionEnd = n;

   }

}

Das Rückgängigmachen von mp_start() und mp_ende() geschieht wie zuvor bei den Audiodaten: Der Startpunkt wird auf 0 gesetzt, der Endpunkt auf den in origEnde zwischengespeicherten Wert:

function mp_start_reset()   {

   mp_start(0);

}

 

function mp_ende_reset()   {

   if (this.origEnde != 0) {

      mp_ende(this.origEnde)

   }

}

Kommen wir zum vorletzten Punkt auf der Aufgabenliste: zum Laden einer neuen Datei. Das ActiveX-Control bietet dazu die Eigenschaft FileName, das Plugin die Methode SetFileName():

function mp_lade_datei(x) {

   if (mp_nn()) {

      this.obj.SetFileName(x);

   } else if (mp_ie()) {

      this.obj.FileName = x;

   }

}

Zu guter Letzt sollen noch die Controls – das sind die eingebauten Steuerungsmöglichkeiten inklusive der Option, innerhalb der Datei zu springen und zu spulen – ein- und ausgeblendet werden können. Dazu gibt es für das ActiveX-Control die boolesche Eigenschaft showControls (true = Controls werden angezeigt, false = Controls werden nicht angezeigt) und für das Plugin die Methode SetShowControls().

function mp_getControls()   {

   if (mp_nn()) {

      return this.obj.GetShowControls();

   } else if (mp_ie()) {

      return this.obj.showControls;

   }

}

 

function mp_setControls(b)   {

   if (mp_nn()) {

      this.obj.SetShowControls(b);

   } else if (mp_ie()) {

      this.obj.showControls = b;

  }

}


 

 

23.2.3 Anwendung: Heimkino  

Die Skriptbibliothek multimedia.js ist inzwischen zu einem funktionalitätsreichen und universell einsetzbaren Werkzeug geworden. Um dies zu demonstrieren, soll – in Anlehnung an die Wurlitzer-Anwendung aus Abschnitt 23.1.5 – ein kleines Heimkino erstellt werden. Der Benutzer kann auf Knopfdruck (bzw. Mausklick) den Film wechseln und diesen starten, anhalten und pausieren lassen; natürlich kann auch die Lautstärke verändert werden. Die Controls können ein- und ausgeblendet werden.

Der Code selbst funktioniert ähnlich wie der Wurlitzer-Code. Die meiste Arbeit geschieht innerhalb der Datei multimedia.js; auf der HTML-Seite selbst werden nur die entsprechenden Methoden aufgerufen:

<html>

<head>

<title>Heimkino</title>

<script type="text/javascript" src="multimedia.js"></script>

<script type="text/javascript"><!--

var film;

function heimkino_init() {

   film = new mp_obj(document.film);

   document.forms["heimkino"].elements["v"].value =

            film.getVolume();

}

//--></script>

</head>

<body onload="heimkino_init();">

<object id="film"

  classid="CLSID:22d6f312-b0f6–11d0–94ab-0080c74c7e95"

  codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

  type="application/x-oleobject">

<param name="FileName" value="1.asx" />

<param name="autoStart" value="true" />

<param name="showControls" value="false" />

<embed id="film"

  name="film"

  pluginspage="http://www.microsoft.com/windows/windowsmedia/download/"

  type="application/x-mplayer2"

  src="1.asx"

  autostart="-1"

  showcontrols="0">

</embed>

</object>

 

<form name="heimkino" onsubmit="return false;">

<a href="javascript:film.play()">Play</a><br>

<a href="javascript:film.pause()">Pause</a><br>

<a href="javascript:film.stop()">Stop</a><br>

<input type="text" name="v" size="2" value="50" />

<a href="javascript:film.setVolume(parseInt(document.forms['heimkino'].elements['v'].value));">

Lautst&auml;rke setzen</a><br />

<input type="text" name="s" size="4" value="0" />

<a href="javascript:film.start(parseInt(document.forms['heimkino'].

elements['s'].value));">Startzeit setzen</a> -

<a href="javascript:film.startReset();">Startzeit zur&uuml;cksetzen</a><br />

<input type="text" name="e" size="4" value="0" />

<a href="javascript:film.ende(parseInt(document.forms['heimkino'].

elements['e'].

value));">Endzeit setzen</a> -

<a href="javascript:film.endeReset();">Endzeit zur&uuml;cksetzen

</a><br />

<input type="text" name="d" size="20" value="1.asx" />

<a href="javascript:film.lade(document.forms['heimkino'].elements['d'].

value);">Datei laden</a><br />

<a href="javascript:film.setControls(!film.getControls())">Controls ein/aus</a>

</form>

</body>

</html>

Mit nur wenigen Zeilen Code ist eine recht mächtige Oberfläche für den Media Player entstanden. Nur um ihre grafische Gestaltung sollen Sie sich noch ein wenig kümmern.

Bilder

Abbildung 23.3     Windows Media-Dateien mit JavaScript steuern

23.3 Adobe-Plugins 
topBilder

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:

>

Adobe Flash (einst: Macromedia Flash)

 

>

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:

>

Director-Filme haben die Endung .dcr.

 

>

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.


 

 

23.3.1 Prinzipielles 

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:

>

classid: ein weltweit eindeutiger Identifikator für das ActiveX-Control

 

>

codebase: der Speicherplatz des ActiveX-Controls, von dem es (bei Bedarf) nachgeladen werden kann

 

>

id: der Identifikator des Films (für den JavaScript-Zugriff vom Internet Explorer aus)

 

>

<param name="src" value="..." />: die URL des Films (für Internet Explorer); bei manchen ActiveX-Controls auch name="movie"

 

>

src: die URL des Films (für Mozilla)

 

>

type: der MIME-Typ des Films

 

>

pluginspage: die URL, unter der das Plugin heruntergeladen werden kann, wenn es noch nicht installiert ist

 

>

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:

>

Zunächst wird auf die jeweils browsertypische Art festgestellt, ob das Plugin vorhanden ist oder nicht.

 

>

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.


 

 

23.3.2 Director 

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:

>

die Class-ID des ActiveX-Controls

 

>

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.

>

Es muss zunächst ein Internet Explorer sein; navigator.userAgent muss MSIE enthalten.

 

>

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:

>

Durch on error resume next wird die Ausgabe von Fehlermeldungen ausgeschaltet.

 

>

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.

 

>

Nach der Erzeugung der Instanz wird überprüft, ob das auch funktioniert hat; IsObject() muss dann true zurückliefern.

 

>

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"
");

   document.write("

codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,0,0,0"
");

   document.write("ID="xxx">
");

   document.write("<param name="src" value="xxx.dcr" />
");

   document.write("</object>
");

}

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:

>

navigator.mimeTypes["application/x-director"].enabledPlugin muss existieren, sprich, es muss ein Plugin für den Director-MIME-Typ installiert sein.

 

>

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:

>

Zunächst wird der erste Punkt in der Plugin-Beschreibung gesucht.

 

>

Links vom Punkt steht die Hauptversionsnummer (z.  B. 8) des Plugins.

 

>

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:

>

Entweder ist die Hauptversionsnummer 8 und die Unterversionsnummer ist mindestens 5.

 

>

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

>

überprüft, ob überhaupt ein Plugin vorliegt,

 

>

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" 
");

   document.write("type="application/x-director" 
");

   document.write("pluginspage="http://www.macromedia.com/shockwave/download/"
");

   document.write("name="xxx"></embed>
");

}

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">
");

      document.write("on error resume next
");

      document.write("director_ok = IsObject(CreateObject(

    "SWCtl.SWCtl.8.5"))
");

      document.write("</script>
");

   } 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"
");

   document.write("

codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=10,0,0,0"
");

   document.write("ID="xxx">
");

   document.write("<param name="src" value="xxx.dcr" />
");

   document.write("<embed src="xxx.dcr" 
");

   document.write("type="application/x-director" 
");

   document.write("pluginspage="http://www.macromedia.com/shockwave/download/"
");

   document.write("name="xxx"></embed>
");

   document.write("</object>
");

}

//--></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!


 

 

23.3.3 Flash 

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:

>

Die Class-ID ist versionsunabhängig eindeutig; oben sehen Sie die für das aktuelle Flash-ActiveX-Control.

 

>

Die URL des Films wird nicht (wie beispielsweise bei Director) mit <param name="src" /> angegeben, sondern mit <param name="movie" />.

 

>

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.

Bilder

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"
");

   document.write("

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"
");

   document.write("ID="xxx">
");

   document.write("<param name="movie" value="xxx.swf" 

/>
");

   document.write("</object>
");

}

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:

>

navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin existiert nur dann, wenn ein Plugin für den Flash-MIME-Typ installiert ist.

 

>

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" 
");

   document.write("type="application/x-shockwave-flash" 
");

   document.write("pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=

ShockwaveFlash" 
");

   document.write(" name="xxx">
");

   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"
");

   document.write("

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"
");

   document.write("ID="xxx">
");

   document.write("<param name="movie" value="xxx.swf" />
");

   document.write("<embed src="xxx.swf" 
");

   document.write("type="application/x-shockwave-flash" 
");

   document.write("

pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
");

   document.write("name="xxx"></embed>
");

   document.write("</object>
");

}

//--></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>


 

 

23.3.4 Mit Flash kommunizieren

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:

>

Der erste Parameter wird command genannt und steht für das Kommando oder die Funktion, das bzw. die ausgeführt werden soll.

 

>

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:

>

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.

 

>

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"
");

document.write("

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"
");

document.write("ID="xxx">
");

document.write("<param name="movie" value="xxx.swf" />
");

document.write("<embed src="xxx.swf" 
");

document.write("type="application/x-shockwave-flash" 
");

document.write("pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=

ShockwaveFlash" 
");

document.write("swLiveConnect="true" 
");

document.write("name="xxx"></embed>
");

document.write("</object>
");

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"> 
");

   document.write("on error resume next 
");

   document.write("Sub xxx_FSCommand(ByVal command, ByVal arguments) 
");

   document.write("  call xxx_DoFSCommand(command, arguments)


");

   document.write("End Sub 
");

   document.write("</script> 
");

}

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"> 
");

      document.write("on error resume next 
");

      document.write("Sub xxx_FSCommand(ByVal command, 

        ByVal arguments) 
");

      document.write("  call xxx_DoFSCommand(command, 

        arguments)
");

      document.write("End Sub 
");

      document.write("</script> 
");

   }

   // Ausgabe des Films

   document.write("<object classid="clsid:D27CDB6E-AE6D-

     11cf-96B8–444553540000"
");

   document.write("codebase="http://download.macromedia.com/

     pub/shockwave/cabs/flash/swflash.cab#version=8,0,24,0"

     
");

   document.write("ID="xxx">
");

   document.write("<param name="movie" value="xxx.swf" 

     />
");

   document.write("<embed src="xxx.swf" 
");

   document.write("type="application/x-shockwave-flash" 

     
");

   document.write("pluginspage="http://www.macromedia.com/

     shockwave/download/index.cgi?P1_Prod_Version=

     ShockwaveFlash" 
");

   document.write("swLiveConnect="true" 
");

   document.write("name="xxx"></embed>
");

   document.write("</object>
");

}

//--></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:

>

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.

 

>

Verwenden Sie im <embed>-Tag wieder das Attribut swLiveConnect="true".

 

>

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:

>

Nach dem Laden des Dokuments versuchen wir, auf die Methode PercentLoaded des (gestreamten) Films zuzugreifen.

 

>

Bei einem Rückgabewert kleiner als 100 geben wir diesen Wert in der Statuszeile aus.

 

>

Ab dem Wert 100 wird nichts mehr ausgegeben, der Film ist ja vollständig geladen und wird vermutlich schon abgespielt.

 

>

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:

>

Starten und Stoppen des Films

 

>

Zurückspulen

 

>

Sprung zu einem bestimmten Bild

 

>

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>

Bilder

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

 

 


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.

Das Tutorial ist ein Auszug aus der 7. Auflage des Buches von Christian Wenz:

JavaScript und Ajax - Das umfassende Handbuch
Galileo Computing, 853 Seiten, 8. aktualisierte Auflage

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Galileo Press.

Mehr Informationen zum aktualisierten Fachbuch für Webentwickler gibt es hier: JavaScript und Ajax
 
Alle Kapitel des Buches:
1 Grundlagen
2 JavaScript-Praxis
3 Professionelles JavaScript
4 Web 2.0 und Ajax
5 Kommunikation
6 Serverseitige Programmierung
7 Sicherheit
8 Praxis
9 Anhang
Bilder


 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

x
×
×