Veröffentlichungen Leitfäden Multimedia Gestaltung Technische Umsetzung
Das Erzeugen einer Player-Instanz folgt dem Schema, das im 
Tutorial des Projekts zur Einbindung des Flash-Players vorgestellt wird. Es basiert im Wesentlichen auf einer von Geoff Stearns entwickelten Lösung zur Integration von Flash-Elementen in XHTML-Seiten.
Dazu sollten Sie sich zuerst das Skript "swfobject.js" herunterladen und es über das folgende XHTML-Konstrukt in den head>-Bereich Ihrer Seite einbinden.
<!-- Javascript zur Flash-Integration -->
<script type="text/javascript" src="/swfobject.js"></script>
Vergeben Sie im nächsten Schritt dem HTML-Element, dass den Player enthalten soll, eine eindeutige id. Im folgenden Beispiel wird ein div-Container verwendet und ihm die ID "beispiel" zugewiesen.
<div id="beispiel">
Dieser Inhalt wird durch den Flash-Player ersetzt
</div>
Im letzten Schritt zur Integration des Flash-Players in das XHTML-Gerüst, wird ein Objekt instanziiert und dieses mit notwendigen Parametern belegt. Eine Auflistung aller verwendbaren Parameter kann im Wiki des Projekts nachgelesen werden.
<script type="text/javascript">
var instance = new SWFObject('player.swf', 'playerId', '500', '300', '9');
instance.addParam('allowfullscreen', 'true');
instance.addParam('flashvars','file=video.flv&autostart=true');
instance.addVariable('image', 'images/mediaplayer/files/preview.jpg'); //Vorschaubild
instance.write('beispiel');
</script>
Die Instanz wird den benötigten Code erstellen und an der gewünschten Stelle (beispiel) einfügen. Das Objekt wird 500 x 300 Pixel groß sein und auch Flash-Variablen wie etwa das abzuspielende Video und ein Vorschaubild ('image') werden gesetzt.
Im Folgenden sehen Sie als Resultat dieser Umsetzung den in die XHTML-Seite eingebundenen Player, der ein Video abspielt, aber keinerlei Funktionen zur Erhöhung der Zugänglichkeit bietet. Das Beispielvideo ist Bestandteil der Sammlung von Open Source Movies.
Nachdem das Video integriert ist, sollen nun auch eine Untertitelung und eine Audio-Deskription hinzugefügt werden. Damit der Player auch ausschließlich per Tastatur nutzbar ist, soll der Player zuletzt noch über das API ferngesteuert werden.
Für die Untertitelung wird das im Abschnitt über Formate für die Untertitelung vorgestellte Verfahren mittels Timed Text verwendet. Als Werkzeug für die Erzeugung kam das Flash-basierte Tool " Subtitle horse" zum Einsatz.
Sie können sich die für das Video erstellte XML-Datei anschauen. In dieser Umsetzung wurden nur Funktionen zur synchronen Ausgabe des Texts genutzt. Weitergehende Funktionen, die Timed Text bietet, wie etwa eine Formatierung des Untertitel-Texts wurden nicht genutzt. Informationen zu diesen Funktionen sind auf den Seiten der Arbeitsgruppe des W3C zu finden.
Um die Untertitel-Datei in das Video einzubetten, muss sie dem Player bei dessen Aufruf bekannt gemacht werden. Dies geschieht über folgendes Javascript:
<script type="text/javascript">
//Setzt Pfad zur TT-Datei
instance.addVariable('captions', PFAD_ZU_TT_DATEI);
//Bestimmt die Anzeige-Größe des Untertitel-Texts im Video
instance.addVariable('accessibility.fontsize', '15');
</script>
Im Folgenden sehen Sie das vorherige Video mit einem optional zuschaltbaren Untertitel (Player-Bedienelement "CC").
Da der Text in der derzeitigen Fassung lediglich innerhalb des Videos angezeigt wird, können schlecht sehende Zuschauer, den Text nicht ihren Bedürfnissen anpassen. Schöner wäre es, wenn der Text auch innerhalb der HTML-Seite angezeigt würde, damit er durch ein User-Stylesheet den individuellen Bedürfnissen angepasst werden kann.
Tatsächlich bietet der JW FLV Player diese Möglichkeit. Dazu ergänzt man einfach den Aufruf des Players um das folgende Element:
<script type="text/javascript">
//Aktiviert Accessibility Listener und fügt Funktion hinzu
instance.addVariable('accessibility.listener', xhtmlUntertitel');
</script>
Der Accessibility Listener "lauscht" auf Aktivitäten an der Untertitel-Schnittstelle und kann diese an eine frei definierbare Funktion - in diesem Fall xhtmlUntertitel genannt - weiterreichen. Diese Funktion kann den erhaltenen Untertitel-Text per DHTML dynamisch in die HTML-Seite laden.
Im Folgenden wird eine mögliche Umsetzung dieser Funktion in Javascript vorgestellt.
<script type="text/javascript">
function xhtmlUntertitel(txt)
{
document.getElementById('untertitel')
.firstChild.nodeValue = txt;};
</script>
Der Funktion xhtmlUntertitel wird der Untertitel-Text als Parameter "txt" übergeben. Der HTML-Quelltext muss einen Container enthalten, in den die Funktion den Untertitel-Text einbetten kann und der über eine eindeutige ID referenzierbar ist. Um die Bedeutung des zu Beginn leeren Containers zu verdeutlichen, kann er noch mit einer Initialisierung ausgestattet werden.
Eine Beispielumsetzung:
<div id="untertitel" class="untertitel">
<-- Initialisierung -->
Hier erscheint der Untertitel-Text
</div>
Zur Positionierung und Gestaltung des Untertitel-Containers kann CSS verwendet werden. Für dieses Beispiel wurde die im Folgenden vorgestellte Formatierung verwendet:
div.untertitel {
width: 420px;
min-height: 30px;
padding: 5px;
font-size: 1.1em;
font-weight: bold;
font-family: arial;
color: #000;
border: solid 1px #814f36;
background-color: #FFF;
margin: 0 auto;
}
Im Folgenden sehen Sie das vorherige Beispiel-Video mit einer Untertitelung außerhalb des Videos.
Nach der Untertitelung erfolgt nun im nächsten Schritt die Audio-Deskription. Zuvor allerdings muss man bewusst machen, dass gerade Blinde aber auch motorisch eingeschränkte Menschen und "Mausmuffel" auf Webseiten per Tastatur navigieren. Leider ist es zum Beispiel im Firefox nicht möglich, Bedienelemente einer Flash-Anwendung per Tastatur zu bedienen ohne zuvor eben jene Flash-Anwendung durch einen Mausklick darauf zu aktivieren (im Internet Explorer geht es dagegen schon).
Daher ist es zuerst erforderlich über das Application Program Interface (API) des Players eine Tastatur-Bedienung in allen Browsern zu ermöglichen. Das API wird im Entwicklerbereich vorgestellt, für dieses Beispiel reicht der Abschnitt über das Absetzen von Befehlen per "Send".
<div id="tabs">
<ul class="player_controls">
<li>
<a href="#player" onclick="document.getElementById('playerID')
.sendEvent('PLAY');"> Spielen/pausieren </a>
</li>
<li>
<a href="#player" onclick="document.getElementById('playerID')
.sendEvent('MUTE');"> Ton an/aus </a>
</li>
<li>
<a href="#player" onclick="document.getElementById('playerID')
.sendEvent('STOP');"> Stop </a>
</li>
<li>
<span>Lautstärke: <input type="text" value="" name="value" id="value" maxlength="3" size="3" onkeyup="document.getElementById('playerID')
.sendEvent('VOLUME', this.value);"/>%
</span>
</li>
</ul>
</div>
Im obigen Beispiel wurden die Befehle für das Abspielen/Pausieren, stumm/laut schalten und das Stoppen des Videos durch einfache Hyperlinks realisiert. Bei der Auswahl eines dieser Links wird ein Javascript-Event ausgelöst und damit an die Player-Instanz über die Methode sendEvent ein Befehl abgesetzt. Das Vorgehen für das Einstellen der Lautstärke verläuft ähnlich, nur das hier statt eines Hyperlinks ein Formular-Element verwendet wird.
Durch CSS soll diese Liste noch in eine ansehnliche Form gebracht werden. Eine beispielhafte Umsetzung wäre die Folgende:
#tabs ul {
margin: 2px auto;
padding: 0;
width: 420px;
line-height: 1.2em;
}
#tabs ul li {
list-style: none;
display: inline;
margin-left: 0;
}
#tabs ul li a:link,
#tabs ul li a:visited,
#tabs ul li span {
border: 1px solid #88503e;
padding: 2px 5px;
background: #FFF;
color: #000;
text-decoration: none;
}
#tabs ul li a:hover,
#tabs ul li a:focus,
#tabs ul li a:active {
background: #88503e;
text-decoration: underline
border-bottom: 0px;
color: #fff;
}
Wird der Player um diese Liste ergänzt, ergibt sich die folgende Gesamtansicht:
Nun, da der Player auch per Tastatur bedient werden kann, soll das Video noch um eine beschreibende Audio-Spur ergänzt werden. Wie bereits erwähnt, unterstützt der Player zahlreiche Audio-Formate. In diesem Beispiel soll eine MP3-Datei verwendet werden.
Zur Aufzeichnung existieren zahlreiche Programme, auch kostenlose sind nach einer Suche im Internet schnell zu finden.
Das Einbinden der beschreibenden zusätzlichen Tonspur erfolgt durch einen kleinen Aufruf bei der Instanziierung des Player-Objekts. Dazu muss der Instanz durch Aufruf der Methode addVariable nur der Pfad zur Audio-Datei, die die Audio-Deskription enthält, bekannt gemacht werden. Zusätzlich kann noch die Lautstärke der Audio-Deskription über einen Parameter prozentual angegeben werden, im folgenden Beispiel wird die Lautstärke auf 80 Prozent begrenzt.
<script type="text/javascript">
//Einbinden der Audio-Deskription
instance.addVariable('audio', PFAD_ZU_AUDIO_FILE);
//Lautstärke der Audio-Deskription in Prozent bestimmen
instance.addVariable('accessibility.volume', '80');
</script>
Seite 4 von 6 Alle Seiten