Stellen Sie sich einmal folgende (fiktive) Situation vor...
Firma X ist mit einem OnlineShop im Internet präsent. Neben einem übersichtlich gegliederten Sammelsurium an Artikeln möchte der Promotionmanager der Firma X noch eine kleine Vorschau des jeweiligen Artikels in Form eines Videos zur Verfügung stellen.
So das der Kunde nicht nur eine Beschreibung in Worten sondern das Produkt auch visuell betrachten kann. Im raschen Fortschritt der multimedialen (Einkaufs-)Welt ist ein solches Feature gern gesehen. Und genau dies ist die Thematik meines heutigen Beitrages.

Den Mediaplayer in HTML einbetten:
Als erstes benötigen Sie ein AVI-File. Dieses ist auf dem Server in einem Verzeichnis abgelegt. In meinem Fall in dem Unterverzeichnis 'avi' meines Webs (./avi/clock.avi).
Dieses Video soll also bei einer bestimmten Aktion des Internetbesuchers gestartet werden. Sagen wir einfach einmal das dafür ein einfacher Button vorgesehen ist. In der Praxis würde dieses Ereignis sicherlich auf ein Image gelegt werden. Realisieren werden Sie die Aufgabenstellung Client-seitig mit JavaScript. Doch zu allererst benötigen Sie den Mediaplayer in unserer Website.
Dies kann mann auf mehreren Wegen erreichen. Um mich an einem schon vorhandenen Artikel zu halten, fügen Sie ebenfalls den Mediaplayer wie folgt ein.

<OBJECT id=myActiveMovie style="LEFT: 0px; TOP: 0px" height=260 width=320 classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">   <PARAM NAME="Appearance" VALUE="1">   <PARAM NAME="AutoStart" VALUE="0">   <PARAM NAME="AllowChangeDisplayMode" VALUE="-1">   <PARAM NAME="AllowHideDisplay" VALUE="0">   <PARAM NAME="AllowHideControls" VALUE="-1">   <PARAM NAME="AutoRewind" VALUE="-1">   <PARAM NAME="Balance" VALUE="0">   <PARAM NAME="CurrentPosition" VALUE="0">   <PARAM NAME="DisplayBackColor" VALUE="0">   <PARAM NAME="DisplayForeColor" VALUE="16777215">   <PARAM NAME="DisplayMode" VALUE="0">   <PARAM NAME="Enabled" VALUE="-1">   <PARAM NAME="EnableContextMenu" VALUE="-1">   <PARAM NAME="EnablePositionControls" VALUE="-1">   <PARAM NAME="EnableSelectionControls" VALUE="0">   <PARAM NAME="EnableTracker" VALUE="-1">   <PARAM NAME="Filename" VALUE=".\avi\clock.avi">   <PARAM NAME="FullScreenMode" VALUE="0">   <PARAM NAME="MovieWindowSize" VALUE="0">   <PARAM NAME="PlayCount" VALUE="0">   <PARAM NAME="Rate" VALUE="1">   <PARAM NAME="SelectionStart" VALUE="0">   <PARAM NAME="SelectionEnd" VALUE="12">   <PARAM NAME="ShowControls" VALUE="0">   <PARAM NAME="ShowDisplay" VALUE="-1">   <PARAM NAME="ShowPositionControls" VALUE="0">   <PARAM NAME="ShowTracker" VALUE="-1">   <PARAM NAME="Volume" VALUE="-2000"> </OBJECT>

Somit haben Sie schon einmal den MediaPlayer eingebunden und seine Starteigenschaften festgelegt.
Um die Controls (Play-, Stop-, Pausebutton etc.) des Mediaplayers auszublenden (aus optischen Gründen), verwenden Sie die 'Show...'-Eigenschaften und setzen Sie sie im Code ggf. auf false. Aber bitte nicht ShowDisplay, denn sonst sieht der Besucher gar nix mehr von dem Movie. :o)

Funktionalität durch JavaScript erzeugen
Doch noch ist das Ziel nicht erreicht. Jetzt müssen Sie erst einmal einen Button generieren, der das jeweilige Video bei einem onClick-Ereignis startet. Dazu fügen Sie folgenden HTML-Code hinzu...

<INPUT type="button" value="Start / Stop" id=PlayStop name=PlayStop onClick="doPreview()">

Die Funktionalität des Start/Stop Buttons steckt in folgendem JavaScript Code

function doPreview() {   if (myActiveMovie.CurrentState == 0)   {     myActiveMovie.Rate = 1;     myActiveMovie.Volume = -2000;     myActiveMovie.SelectionStart = 0.0;     myActiveMovie.SelectionEnd = 12.0;     myActiveMovie.Run();   }   else if (myActiveMovie.CurrentState == 2)   {     myActiveMovie.Stop();   } }

Mit der CurrentState-Eigenschaft wird überprüft welchen Status der Mediaplayer hat. Innerhalb der Funktion doPreview() interessieren nur zwei Zustände.
Play (2) und Stop (0). Je nachdem wird beim Auslösen des onClick-Ereignisses der Film gestartet oder beendet.
Falls der aktuelle Zustand STOP, also 0, ist so wird zusätzlich noch festgelegt an welcher Position die Produktvorschau gestartet bzw. beenden werden soll.
Rate beeinflusst die Modulation der Klangwiedergabe. 1 bedeutet Originalton.
Will man diesen transponieren, so kann mann Werte wie 1.6, 0.7 etc. eingeben. wert > 1 bedeutet Transponierung nach oben und wert < 1 hingegen Transponierung nach unten.
Mit SelectionStart und Selection.End bestimmt man den Start- und Endpunkt der Wiedergabe.
Letztendlich startet die Methode Run() den Mediaplayer und die Methode Stop() beendet ihn.

Als nächstes binden Sie 2 weitere Buttons ein. Mit ihnen kann die Wiedergabelautschtärke erhöht bzw. vermindert werden.
Zur Anzeige der aktuellen Lautstärke dient ein Textfeld das auf disabled gestellt ist. Denn schliesslich dient es nur zur Anzeige und nicht zur Eingabe.

<INPUT type="button" value="Vol +" id=VolUp name=VolUp onClick="VolUp()"> <INPUT type="button" value="Vol -" id=VolDown name=VolDown onClick="VolDown()"> <input type="text" value="" id=showVolume name=showVolume size="12" disabled>

Bei beiden Buttons wird per onClick Ereignis die jeweilige Funktion aufgerufen. Die Funktionalität ist relativ einfach.
Zuerst wird die Lautstärke mit der Volume Eigenschaft des MediaPlayers die Lautstärke verändert und anschliessend der Wert in der Texbox ausgegeben.

function VolUp() {   if(myActiveMovie.Volume < 0)   {     myActiveMovie.Volume = myActiveMovie.Volume + 100;     showVolume.value = "Volume: " + myActiveMovie.Volume;   } } function VolDown() {   if(myActiveMovie.Volume > -2000)   {     myActiveMovie.Volume = myActiveMovie.Volume - 100;     showVolume.value = "Volume: " + myActiveMovie.Volume;   } }

Am Anfang des Scriptblockes fügen Sie jetzt noch 3 weitere Zeilen ein.

showVolume.value = "Volume: " + myActiveMovie.Volume myActiveMovie.AutoStart = false; myActiveMovie.AutoRewind = true;

Somit können Sie noch Einfluss darauf nehmen, dass das AVI-File nicht automatisch startet sobald die Seite geladen wurde und auch nach Beendigung der Wiedergabe zurück zu Position springt.

Den Download finden Sie unten... Viel Spaß!