Ein barrierefreier? Online Video Player

Dieser Artikel ist veraltet.

Auf dieser Seite werden technische Details zum hier vorgestellten Player gezeigt.

Die Konfiguration des Zanmantou Players

Anhand der ausführlichen Anleitungen auf der Seite von Zanmantou sollte es möglich sein, einen lauffähigen Player zu erstellen. Die folgenden Erklärungen setzen einen fertig installierten Zanmantou Player voraus, und bauen darauf auf.

Der Aufruf des Players im HTML sieht so aus, und entspricht der bekannten
Flash Satay Methode

<object id="player1"'
      data="zanmantou.swf"
      type="application/x-shockwave-flash"
      width="400" height="300" >
<param name="movie" value="zanmantou.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="config=config.xml" />

<p>Anscheinend ist auf Ihrem System kein Flash-Player installiert.
Sie können daher das Video leider nicht sehen.</p>
</object>

Nun zur Konfigurationsdatei des Zanmantou Players:

<?xml version="1.0"?>
<player background="background1.jpg"
  imagePath="images/" mediaPath="./">

  <video x="0" y="0" width="400" height="300">
	<bufferTime value="2.1" />
  </video>

  <slider>
      <progress show="true">
         <bar x="9" y="285" width="389" height="1"
           image="" progress="progressbar_p.jpg" show="true"  />
         <slider x="9" y="281" width="8" height="8"
           image="slider_progress.png"
           hover="slider_progress_hover.png" show="true" />
      </progress>
  </slider>

  <media>
      <item name="" filename="movie.flv"/>
  </media>
</player>

• Für jeden Film muß eine eigene Konfigurationsdatei erstellt werden. Den Namen der Konfigurationsdatei geben wir später beim Javascript-Funktionsaufruf als Variable mit. Die wesentlichen Werte in der Konfigurationsdatei: "background" und "filename".
• Als Hintergrundbild wählen wir nicht den mitgelieferten Skin, der unter anderem auch die Grafik für die Bedienelemente beinhaltet; die brauchen wir nicht. Wir wählen als Hintergrundbild das erste Frame unseres Film. Dieses erste Frame kann man entweder mit entsprechenden Tools direkt aus dem Video extrahieren; oder mit einem beliebigen Grafikprogramm aus einem Screenshot erstellen.
• Die meisten Tags der Konfigurationsdatei können einfach gelöscht werden. Wir brauchen sie nicht. Lediglich der Fortschrittsbalken Tag <progress> bleibt, und wird in der Konfigurationsdatei passend positioniert.

Die Steuerung des Players per Javascript

Hier kommt die Javascript API zum Einsatz. Wir nutzen nur die Methoden start() - startet das Video b.z.w. spult zurück und startet - und halt() - die Pausefunktion. Damit schreiben wir HTML-Links mit onclick-Eventhandlern.

Der HTML Code dazu wird an passender Stelle auf der Webseite eingefügt - in der Regel wohl unterhalb des Flash Objekts:

<div id="controls" >
   <h2>Steuerung des Players></h2>
   <a href="#" onclick="document.zanmantou1.start()">Start</a>
   <a href="#" onclick="document.zanmantou1.halt()">Pause</a>
   <a href= "videothek4.php">Next</a>
</div>

• Die Beschriftung der "Buttons" (Links) kann natürlich nach Belieben erfolgen, auch grafische Buttons mit entsprechenden Alt-Texten sind möglich.
• Der letzte "Buttons" ist einfach ein Link zu einer anderen Seite. Auf eine Playlist, die mit Zanmantou möglich wäre, verzichten wir.

Nun noch die erforderliche Sonderbehandlung für den Internet Explorer

Um den hier beschriebenen IE Bug zu korrigieren, wird der Aufruf des Flash Objekts in eine externe Javascript Datei ausgelagert, und per document.write ins HTML geschrieben.

Das Javascript File:

function swfWrite(a) {
document.write('<object id="player1"');
document.write('    data="zanmantou.swf"');
document.write('    type="application/x-shockwave-flash"');
document.write('    width="400" height="300" >');
document.write('<param name="movie" value="zanmantou.swf" />');
document.write('<param name="quality" value="best" />');
document.write('<param name="scale" value="noscale" />');
document.write('<param name="salign" value="lt" />');
document.write('<param name="bgcolor" value="#000000" />');
document.write('<param name="FlashVars" value="config='+a+'" />');

document.write('<p>Es ist kein Flash-Player installiert.</p>');
document.write('<p>Sie können das Video leider nicht sehen.</p>');
document.write('</object>');
}

Gegenüber dem ursprünglichen Aufruf des Flash Objekts hat sich, neben dem document.write, noch ein wichtiges Detail geändert: Die jeweilige config.xml wird der Funktion swfWrite() als Variable "a" übergeben.

Der Aufruf des Javascripts, und damit des Flash Objekts im HTML lautet jetzt

<script type="text/javascript">swfWrite("config.xml");</script>

Und das Javascript selbst (wir nennen es swfenabler.js) muß natürlich im <head> eingebunden werden:

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