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.
Hier klicken, um das Bild zu Vergrößern
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ä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ü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ü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.
Hier klicken, um das Bild zu Vergrößern
Abbildung 23.3 Windows Media-Dateien mit JavaScript steuern
|
