Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

Darstellung

... was ist das?

gewählte Darstellung: Standard
Dark Mode
Mobil
Leonardo

Ein barrierefreier Online Video Player

Dieser Artikel ist veraltet.

Der Stand der Technik?

Auf der Seite video_player_bf.php ist die Einrichtung eines weitgehend barrierefreien Videoplayers auf der Basis des Zanmantou Players beschrieben. Die Zeit bleibt nicht stehen, und gerade beim Thema Barrierefreiheit gibt es immer wieder Neues: Inzwischen setze ich einen neuen Video Player ein, der hinsichtlich Barrierefreiheit alles in den Schatten stellt, was ich bisher im Web gesehen habe. Den Player von www.longtailvideo.com

Demo

Die Bedienung des Players

Der Videoplayer kann mit der Tastatur, und auch mit Screen Readern bedient werden - und natürlich wie gewohnt mit der Maus.
Folgende Funktionen sind mit der Tastatur verfügbar. Alle Tasten haben Doppelfunktion (Toggle).
- Start / Pause
- Stop / Rücklauf
- Untertitel (Beschriftung CC) schaltet Untertitel ein oder aus. (Hinweis: Hier in der Demo sind nur die ersten 20 Sekunden mit Untertiteln versehen.)
- Audio Description (Beschriftung AD) schaltet eine zusätzliche Tonspur ein oder aus, mit gesprochenen Erklärungen für blinde Zuseher (nach Art von Hörfilmen). (Hinweis: Hier in der Demo sind nur die ersten 20 Sekunden mit einer Audiodescription versehen.)
- Vollbild. (Diese Taste ist mit Screen Readern ohne Funktion.) Wenn der Vollbildmodus aktiv ist, werden die Bedienelemente nach kurzer Zeit ausgeblendet. Sie erscheinen wieder, wenn man mit der Maus den Anzeigebereich der Bedienelemente überfährt. Im Vollbildmodus kann der Player nicht mit der Tastatur gesteuert werden. Verlassen des Vollbildmodus mit der Esc Taste.
- Ton aus / an. Hiermit wird nur der Originalton des Films ausgeschaltet, nicht jedoch eine eventuell vorhandene und aktivierte Audio Description
Zusatzfunktion nur mit der Maus bedienbar
- Start / Pause durch Mausklick an beliebiger Stelle im Filmfenster
- Fortschrittsbalken. Mit der Maus (drag & drop oder Doppelklick) kann eine beliebige Stelle im Film angesprungen werden.
- Lautstärke. Durch einfachen Mausklick in die unterschiedlich hohen Balken neben dem Lautsprechersymbol kann die Lautstärke eingestellt werden (nur Originalton des Films, nicht Audio Description).

Weitere Merkmale

beliebiges Standbild vor dem Start des Videos
Der Player lässt sich in modernen Browsern zoomen.
Einschränkungen:
- Der Player benötigt ein Flash Plugin ab Version 9. Falls dieses Plugin nicht verfügbar ist, wird eine frei definierbare Meldung gezeigt.
- Der Firefox (und andere Browser mit der Gecko Rendering Engine) lassen die Bedienung mit der Tastatur leider nicht zu. In diesem Fall können nur die zusätzlich unter dem Player angeordneten (Javascript-)Links benutzt werden.
- Und diese Javascript-Links lassen jetzt sogar eine Lautstärkeregelung mit der Tastatur zu (nur Originalton des Films, nicht Audio Description.

Die Installation

Die folgende Anleitung ist nicht als "Kochrezept" à la "man nehme ..." zu gebrauchen. Vielmehr will ich mit dem Artikel interessierten Personen den Player nur kurz vorstellen. Die Installation selbst setzt intensives Studium der Anbieterseite, sowie fundierte Kenntnisse einschlägiger Techniken, z. B. Javascript, voraus.

Vorarbeiten - was brauchen wir

Ein Programm, um unsere Filme ins Flash Format (*.flv) zu konvertieren. ~~Ein gut geeignetes Programm mit fast unbegrenzten Möglichkeiten ist SUPER von eRightSoft~~
Nachtrag 10.01.2010: SUPER beinhaltet möglicherweise einen Trojaner.
Den Player von www.longtailvideo.com
Um Audio descriptions zu erzeugen, einen Audioeditor, z. B. Audacity
Zum Erstellen der Untertitel: einen Texteditor.

Der Player

Der - für nicht kommerziellen Einsatz kostenlose - Player ist schnell herunter geladen, und erstaunlich schlank. Wir brauchen lediglich 2 Dateien aus dem Paket: player.swf und swfobject.js.

Die Installation ist auf der Seite www.longtailvideo.com/players/jw-flv-player/ beschrieben. Für einen ersten Versuch kann auch der Setup Wizard hilfreich sein.

Für den Anfang sollten wir auch auf spezielle Skins verzichten. Manche Skins machen leider die Tastaturbedienbarkeit kaputt.

Ein Video im *.flv Format, und nach Anleitung oder mit dem Wizard in den Player eingebunden, das ist alles, was wir brauchen, um bereits ein hohes Maß an Barrierefreiheit zu erreichen.
Insbesondere sind die Bedienelemente mit der Tastatur erreichbar, und für Screen Reader korrekt beschriftet.

Ein Wermutstropfen: Der Firefox, bzw. alle Browser, die auf der Gecko Engine aufbauen, haben ein bekanntes Problem: Mit der Tastatur kann der Flash Film nicht mehr verlassen werden, wenn der Fokus einmal innerhalb des Flash Film liegt. Der longtailvideo Player löst dieses Problem, indem er gar nicht zulässt, dass per Tastatur in den Film hineingetabbt wird. Aber damit ist der Player natürlich mit Firefox & Co. nicht mehr bedienbar. Abhilfe schafft die Steuerung des Flash Players "von außen" per Javascript.

Am Beispiel eines Start/Pause Buttons sieht das erforderliche Javascript so aus:

<script type="text/javascript">
<a href="javascript:document.getElementById('mpl').sendEvent('PLAY');">
    Start/Pause</a>
</script>

Etwas mehr Javascript war erforderlich, um auch die Lautstärkeregelung per Tastatur zugänglich zu machen.
Zuerst die folgenden Funktionen in den <head> Bereich:

<script type="text/javascript">

function createCookie(name,value,days) {
  if (days) {
      var date = new Date();
      date.setTime(date.getTime()+(days*24*60*60*1000));
      var expires = "; expires="+date.toGMTString();
  }
      else var expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
   var nameEQ = name + "=";
   var ca = document.cookie.split(';');
   for(var i=0;i < ca.length;i++) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1,c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
}

function loud(direction) {
    if (typeof vol == "undefined" || vol == "NaN") vol = 70;
    vol = parseInt(vol);
    vol = Math.floor(vol / 10) * 10;

    if (direction == 'plus' && vol <= 90) vol = vol + 10;
    if (direction == 'minus' && vol >= 10) vol = vol - 10;
    createCookie('video_volume',vol,360);
    document.getElementById('mpl').sendEvent('VOLUME',vol);
    alert('Lautstärke: '+vol+' %');
}
</script>

Der Funktionsaufruf:


<a href="javascript:onclick = loud('plus');">Lauter</a>;
<a href="javascript:onclick = loud('minus');">Leiser</a>;

Die Untertitel

Untertitel werden ganz bequem als Timed Text XML Datei mit einem Texteditor erstellt. Das Timed Text Format sorgt für die Synchronisation mit dem Film. Die Start- und Ende-Zeitpunkte kann man ganz bequem im Player selbst ablesen.

Beispiel für eine Datei im Timed Text Format:

<tt xmlns="http://www.w3.org/2006/10/ttaf1">
  <body>
    <div xml:id="captions">
      <p begin="00:01" end="00:04">Eine taubblinde Frau demonstriert das Lormen - </p>
      <p begin="00:04.1" end="00:08">- das Tastalphabet der taubblinden Menschen.</p>
    </div>
  </body>
</tt>

Die Datei wird als *.xml abgespeichert, und per Parameter an den Player übergeben, z. B. captions.file=titel.xml.

Audio Description

Eine Audio Description wird als *.mp3 zeitsynchron erstellt. Gut geeignet hierfür ist der kostenlose Audioeditor von Audacity.
Am besten legt man für jeden Satz der Audio Description eine eigene Tonspur an. Die einzelnen Sätze kann man so einfach verschieben, und mit dem Film synchronisieren.
Die Einbindung in den Player erfolgt wiederum per Parameter, z. B.: audiodescription.file=audio.mp3

Der fertige Code für das Beispiel auf dieser Seite, einschließlich Untertitel und Audio Description

<script type="text/javascript">
  var sa = new SWFObject('/jwplayer/player-licensed.swf','mpl','400','270','9');
          sa.addParam('allowfullscreen',             'true');
          sa.addParam('allowscriptaccess',           'always');
          sa.addParam('seamlesstabbing',             'true');
          sa.addVariable('file',                     '/jwplayer/mina_lormt_400x250.flv');
          sa.addVariable('captions',                 '/jwplayer/lormen.xml');
          sa.addVariable('audiodescription.file',    '/jwplayer/lormen.mp3');
          sa.addVariable('plugins',                  'captions,audiodescription');
          sa.addVariable('captions.fontsize',        '15');
          sa.addVariable('image',                    '/jwplayer/lormen.gif');
          sa.addVariable('screencolor',              'a6907f');
          sa.addVariable('autostart',                'false');
          sa.write('player');
    </script>

Navigation