Navigation und Service

Einfach teilhaben (Link zur Startseite)


Multimediainhalte

Multimedia-Inhalte in der BITV

Multimedia-Inhalte werden zur Informationsverbreitung im Internet immer wichtiger. Viele Informationen liegen bereits heute ausschließlich in Multimedia-Formaten vor. Um auch Menschen mit Behinderungen Zugang zu diesen Informationen zu gewähren, sind die 4 Prinzipien der BITV auch für diese Inhalte einzuhalten. Technisch problematisch sind dabei vor allem das Prinzip der Wahrnehmbarkeit und das Prinzip der Bedienbarkeit.

Durch die BITV-Anforderungen 1.1 und 1.2 wird, das Problem der Wahrnehmbarkeit durch die Bereitstellung geeigneter Alternativen begegnet. Ist der Medien-Inhalt bereits eine alternative "Darstellung" eines anderen Inhalts, dann benötigt der Medien-Inhalt keine weitere Alternative. Voraussetzung ist, dass der Medien-Inhalt keine zusätzlichen Informationen beinhaltet. Dies gilt zum Beispiel in folgenden Situationen.

  • Eine Nachrichtenseite bietet zu allen Artikeln über einen Webservice eine Audio-Datei mit einer generischen Sprachausgabe an. Die Sprachausgabe der Audio-Datei ist nur eine alternative akustische Darstellung des Artikels. Weitere Alternativen sind nicht nötig.
  • Zu einer Fernsehdiskussion als Audio/Video-Inhalt wird ein Gebärdenvideo angeboten. Das Gebärdenvideo stellt alle gesprochenen Dialoge dar und benennt die jeweiligen Sprecher. Das Gebärdenvideo ist eine Alternative und bedarf keiner weiteren Untertitel. Anmerkung: Untertitel zu Gebärdenvideos können in vielen Fällen hilfreich sein, die BITV fordert die Erstellung aber nicht.
  • Eine Webseite erläutert die technische Funktionsweise einer Maschine. Neben dem Text existiert ein Video mit einer Animation. Die Animation stellt die im Text beschriebene Funktionsweise dar und unterstützt so das Textverständnis. Das Video ist somit bereits eine Alternative und bedarf keiner weiteren Alternative.
  • Eine Filmdokumentation enthält eine Audiospur. Die Audiospur enthält lediglich eine ausführliche Beschreibung von dem, was im Video zu sehen ist. Die Beschreibung der Handlung ist bereits eine Alternative des reinen Video-Inhalts und bedarf keiner weiteren Alternative.

Je nach Art des Medien-Inhalts werden unterschiedliche Alternativen gefordert. Ausführliche Anleitungen und Beispiele zu den Alternativen finden Sie hier im BITV-Lotsen unter folgenden Stichwörtern:

Einen Überblick über die relevanten BITV-Bedingungen und die jeweils geforderten Alternativen bezogen auf den Typ des Medien-Inhalts, kann Ihnen folgende Tabelle geben.

Tabelle zur Bestimmung der zu erfüllenden BITV-Bedingungen für Audio- und Video-Inhalte.

aufgezeichnet

reines Audio

reines Video

synchronisierte Medien

AudioVideo
PIA1.1.1 - Text-Alternative für Nicht-Text-Inhalte
1.2.1 - Text-Alternative mit gleichwertigen Informationen1.2.1 - Text-Alternative mit gleichwertigen Informationen oder Audiospur1.2.2 - erweiterte Untertitel und ggf.
1.2.3 - Volltext-Alternative
1.2.3 - Audio-Deskription oder Volltext-Alternative
AA1.2.5 - Audio-Deskription
PIIAAA1.2.8 - Text-Alternative mit gleichwertigen Informationen1.2.6 - Gebärdensprache und
1.2.8 - Volltext-Alternative
1.2.7 - erweiterte Audio-Deskription und
1.2.8 - Volltext-Alternative
live
reines Audioreines Videosynchronisierte Medien
AudioVideo
PIA1.1.1 - Text-Alternative für Nicht-Text-Inhalte
AA1.2.4 - erweiterte Untertitel
PIIAAA1.2.9 - Textalternative mit gleichwertigen Informationen1.2.9 - Textalternative mit gleichwertigen Informationen (nicht bei Interpretation gemäß WCAG)

Anmerkung: In der Tabelle wird deutlich, dass die Wahlmöglichkeit zwischen Audio-Deskription oder Volltext-Alternative, die in der BITV-Bedingung 1.2.3 erwähnt wird, praktisch nicht existiert. Durch die Zusammenlegung der Konformitätsstufen "A" und "AA" der WCAG zur BITV-Priorität I gilt auch die BITV-Bedingung 1.2.5, die explizit Audio-Deskriptionen fordert.

Anmerkung: Die BITV fordert in der Anforderung 1.2 unter anderem eine "Text-Alternative mit gleichwertigen Informationen" sowie "Volltext-Alternativen". Ersteres wird in der WCAG als "Alternative für zeitbasierte Medien (alternative for time-based media)" bezeichnet. Der Text im Glossar der BITV zum Letzteren entspricht dem Text im Glossar der WCAG des Ersteren. Es wird deutlich, dass die geforderten Alternativen wohl dieselben sind — eine Text-Alternative, die das Medium möglichst gleichwertig ersetzen kann. Der Begriff "Text-Alternative" aus den Bedingungen der Anforderung 1.2 wird häufig fälschlicher Weise mit dem Glossartext des gleichnamigen Begriffs aus der BITV-Bedingung 1.1 verlinkt. Dies kann zusätzlich zu Verwirrungen führen.

Ebenfalls relevant für die Wahrnehmung sind die Bedingungen zur Trennung von Vordergrund und Hintergrund. Die Einhaltung von Kontrasten bei der Produktion von Videos wird zwar nicht explizit gefordert, aber aus eigenem Interesse sollten Sie darauf achten, dass die Video-Inhalte ausreichende Kontraste haben. Aus der BITV ableiten lässt sich allerdings die Bedingung, dass die Untertitel mit ausreichend Kontrast dargestellt werden. Gleiches gilt für die Ton- und Audiospuren von synchronisierten Medien und für die Audio-Deskriptionen. Hier sollten die Grenzwerte von 20 Dezibel nicht unterschritten werden. Vergleichen Sie dazu das Kapitel Trennung von Vorder- und Hintergrund.

Da Multimedia-Dateien in der Regel nicht direkt in eine Webseite eingebunden werden, sondern meist über ein Abspielprogramm, haben einige Browser Probleme bei der Steuerung der Videos durch die Tastatur. Auch wenn das Abspielprogramm mit dem Video auf der Webseite optisch wie eine Einheit aussieht, aus technischer Sicht verhalten sich Browser und Abspielprogramm, wie zwei getrennte unabhängige Programme. Beide Programme besitzen ihre eigene Tastaturfokusreihenfolge. Wird zum Beispiel eine Flash-basierte Abspielsoftware verwendet, tauchen die Knöpfe zur Steuerung des Videos nicht in der Tastaturreihenfolge einiger Browser auf. Um das Abspielprogramm mit der Tastatur zu steuern, muss in der Regel zunächst das Video mit der Maus angeklickt werden, danach ist oft eine Steuerung per Tastatur möglich.

Leider tritt das Problem ebenfalls auf, wenn der Tastaturfokus das Abspielprogramm wieder verlassen soll. Es kommt dadurch zu Tastaturfallen. Die Nutzerin oder der Nutzer muss zum Verlassen des Abspielprogramms wieder einen Teil des Browsers mit der Maus anklicken, erst danach ist wieder eine Steuerung der Webseite mit der Tastatur möglich.

Es gibt eine Technik für die WCAG 2.0 um das Problem der Tastatursteuerung zumindest im Firefox-Browser zu umgehen. Eine genaue Beschreibung finden Sie in dem Dokument "Bereitstellung eines Zugangs per Tastatur auf ein Flash-Objekt und Vermeidung einer Tastatur-Falle".

Um das Problem aber weitgehend browserunabhängig zu lösen, nutzen viele Webseiten eine pragmatische Lösung. Die meisten der verwendeten Abspielprogramme bieten JavaScript-Schnittstellen an. Über diese Schnittstellen können alle Funktionen der Abspielsoftware per JavaScript gesteuert werden.

Hier finden Sie eine Beschreibung der JavaScript-Schnittstellen der gängigsten Abspielprogramme:

Werden in unmittelbarer Nähe des Media-Inhalts HTML-Schaltflächen oder HTML-Links angelegt, können durch diese die JavaScript-Funktionen zur Steuerung des Videos gestartet werden.

Folgendes Beispiel zeigt ein Video auf den Webseiten des BMAS.

Beispiel-Screenshot: Video mit zusätzlichen Steuerelementen, Beispiel des BMAS. Beispiel-Screenshot: Video mit zusätzlichen Steuerelementen, Beispiel des BMAS.

Unterhalb des Videos kann eine Steuerungsleiste aufgeklappt werden. In der Steuerungsleiste sind zahlreiche Links angelegt. Jeder Link kann ganz normal mit der Tab-Taste der Tastatur angesteuert und ausgewählt werden. Zusätzlich kann eine Auswahl auch über Accesskeys erfolgen. Wird ein Link ausgewählt, wird keine neue Seite aufgerufen, sondern eine JavaScript-Funktion gestartet, diese sendet dann ein Steuerungssignal an das Video.

Für die Steuerung gelten dieselben BITV-Bedingungen, wie für den Rest der Webseite. Die Schaltflächen benötigen zum Beispiel einen ausreichenden Kontrast, der Tastaturfokus muss deutlich sichtbar sein und die Links müssen sinnvoll beschriftet sein.

Beispiel-Screenshot: Tastaturfokus beim Video-Steuerelement, Beispiel des BMAS. Beispiel-Screenshot: Tastaturfokus beim Video-Steuerelement, Beispiel des BMAS.

Untertitel, Audiobeschreibungen und Texttranskriptionen

Was sind Untertitel, Audiobeschreibungen und Texttranskriptionen? Im Folgenden werden diese Begriffe kurz erläutert.

Untertitel

Als Untertitel werden Textzeilen bezeichnet, die in einem Video zusätzlich zum bewegten Bild eingeblendet werden. Als Untertitel werden meist Textvarianten der gesprochenen Sprache bezeichnet. Dies ist aber für taube Menschen nicht immer ausreichend, um ein Video zu verstehen. Zusätzlich müssen daher auch wichtige nicht-sprachliche Inhalte, wie beispielsweise Geräusche, in Untertiteln umgesetzt werden. Untertitel können für alle Menschen hilfreich sein, die der Sprache des Films nicht mächtig sind, weil sie eine andere Muttersprache sprechen. Auch in lauten und unruhigen Umgebungen können Untertitel das Verständnis eines Videos erleichtern.

Technisch wird zwischen offenen (open captions) und geschlossenen (closed captions) Untertiteln unterschieden. Während offene Untertitel in das Videobild eingebettet und damit permanent sichtbar sind, können geschlossene Untertitel nach Bedarf zugeschaltet werden. Da offene Untertitel in das Videobild integriert sind, können solche Untertitel nicht durchsucht, heruntergeladen oder ausgedruckt werden.

Geschlossene — zuschaltbare — Untertitel sind beispielsweise per Videotext eingeblendete Untertitel. Typische Formen von offenen Untertiteln finden sich in fremdsprachigen Filmen mit übersetzten Untertiteln (im Kino meist als Original mit Untertiteln bezeichnet). "Untertitel für Gehörlose" auf einer DVD sind eine Form von geschlossenen Untertiteln, weil der Text erst vom DVD-Spieler in das Fernsehbild integriert wird.

Beim Einsatz von Untertiteln in Internetvideos können beide Varianten zum Einsatz kommen. Für offene Untertitel wird ein Videobearbeitungsprogramm benötigt, um die Texte in das Videobild zu integrieren. Geschlossene Untertitel werden von vielen Abspielprogrammen unterstützt. Media-Formate und Abspielprogramme mit eingebetteten Untertiteln sind unter anderem:

  • MP4

    mit "Embedded MP4 captions"

  • Apples Quicktime

    mit "Quicktime Text"

  • RealVideo

    mit "RealText"

  • Windows Media Player

    mit Synchronized Accessible Media Interchange (SAMI)

Mit der Synchronized Multimedia Integration Language (SMIL) — ein offizieller W3C-Standard — können beliebige Medien miteinander kombiniert werden. Auf diese Weise können Videos mit Untertiteln versehen werden. Bei Bedarf kann auch das Video angehalten werden, um mehr Zeit zur Anzeige der Untertitel zu haben. Aktuell unterstützten zum Beispiel der RealPlayer und Apples QuickTime den SMIL-Standard.

Viele der auf Webseiten verwendeten Flash-Video-Player, wie zum Beispiel der häufig genutzte JW Player oder der Flowplayer unterstützen, die Einbindung von Untertitel in folgenden Formaten:

  • SubRip-Format (SRT)
  • W3C TimedText (DFXP)

Audiobeschreibungen

Für blinde oder stark sehbehinderte Menschen werden optische Informationen und wichtige Handlungen in Videos mittels Audio-Deskription zugänglich gemacht. Eine zusätzliche Tonspur enthält Beschreibungen dessen, was gerade geschieht und was als bewegtes Bild zu sehen ist. Dabei werden Landschaften, Orte, die Kameraführung, besondere Szeneneinstellungen oder Personen beschrieben. Es wird nicht wahllos alles beschrieben, sondern lediglich die für das Verständnis wichtigen visuellen Eindrücke werden in gesprochene Sprache umgesetzt und in den Dialogpausen wiedergegeben.

Audio-Deskriptionen können fest in der einzigen Tonspur einer Video-Datei integriert sein Sie sind dann aber immer hörbar, oder Audio-Deskriptionen liegen als zusätzliche Tonspur vor, die dann von der Nutzerin oder dem Nutzer mithilfe des Abspielprogramms ein- oder ausgeblendet werden kann. Viele Abspielprogramme und Videoformate unterstützen zusätzliche Tonspuren. Auch die häufig auf Webseiten eingesetzten Flash-basierten Abspielprogramme unterstützen zusätzliche Tonspuren.

Audio-Deskriptionen können nur wiedergegeben werden, wenn keine weiteren Audio-Informationen abgespielt werden. Eine Technik, um das Ablaufen des Films zu unterbrechen und so Zeit für das Abspielen der Audio-Deskription zu gewinnen, nennt sich "erweiterte Audio-Deskription". Erweiterte Audio-Deskriptionen sind zurzeit nur im SMIL-Format möglich. Lesen Sie dazu die SMIL-Techniken zur WCAG 2.0.

Eine pragmatische Lösung ist es, das Video von vornherein so zu produzieren, dass ausreichend Platz für Audio-Deskriptionen vorhanden sind. Es ist auch möglich, bei der Produktion durch Standbilder künstlich Pausen in ein Video einzubauen. Das so verlängerte Video kann dann mit einer Audio-Deskription als alternative Videoversion angeboten werden.

Texttranskriptionen

Die multimedialen Informationen können auch in einen Text übertragen werden. Bei einer Transkription von Audio-Inhalten wird die gesprochene Sprache, Angaben zur jeweils sprechenden Person sowie zusätzliche Beschreibungen von Tönen und Geräuschen in Textform wiedergegeben. Bei Texttranskriptionen für Video-Inhalte müssen die zu sehenden Szenen in Textform wiedergegeben werden. Bei einer Kombination von Audio- und Video-Inhalt müssen auch die Texttranskriptionen kombiniert werden.

Texttranskriptionen sind hilfreich, da der Inhalt von reinen Textdateien beispielsweise durchsucht und anderweitig weiter verarbeitet werden kann. Aber auch Anwenderinnen und Anwender von Screenreadern können von Texttranskriptionen profitieren. Meist lassen sie Text von Screenreadern deutlich beschleunigt vorlesen. Bei der Arbeit mit Texttranskriptionen können die wichtigen Inhalte eines Videos so wesentlich rascher erfasst werden, als beim Anhören des Videos mit ergänzenden Audiobeschreibungen.

Für reine Audiodateien muss eine äquivalente Textversion als zugängliche Alternative bereitgestellt werden. Die BITV fordert nicht zwingend eine Texttranskription für Videos, denn Untertitel gelten als äquivalente Textversion der Tonspur eines Videos. Aber meist lässt sich aus den Texten für Untertitel und den Textvorlagen einer Audiobeschreibung relativ einfach eine Texttranskription erstellen oder diese ist umgekehrt die Grundlage für die Erstellung von Untertiteln und Audio-Deskription. Wenn Videos mit Untertiteln und Audiobeschreibung zur Verfügung gestellt werden, dann kann auch eine Texttranskription bereitgestellt werden. Die Vorteile liegen auf der Hand. Texttranskriptionen können von allen Nutzerinnen und Nutzern unabhängig vom Video verwendet werden. Sie können durchsucht, heruntergeladen und ausgedruckt werden.

Multimedia: Formate und Technik

Problematisch beim Einsatz von Videos im Internet oder Intranet sind die unterschiedlichen Videoformate sowie die verwendete Technik um das Video in eine Webseite einzubinden.

Neben den Formaten "Audio Video Interleave" (AVI) oder "Motion Picture Expert Group" (MPG bzw. MPEG) gibt es eine ganze Reihe an Videoformaten, die an einem speziellen Abspielprogramm gebunden sind. Dazu gehören beispielsweise "Quicktime" (QT), "Windows Media Video" (WMV) und "RealMedia" (RM). Für die Wiedergabe muss eine entsprechende Software auf dem Rechner installiert sein. Um solche Videos dann über das Internet im Browser abzuspielen, werden noch Plug-ins des entsprechenden Abspielprogramms benötigt. Bis vor ein paar Jahren war es üblich, alle Formate anzubieten und der Nutzerin oder dem Nutzer die Wahl zu überlassen. Solch eine typische Auswahl zeigt folgende Abbildung.

Beispiel-Screenshot: Auswahl verschiedener Videoformate für unterschiedliche Bandbreiten Beispiel-Screenshot: Auswahl verschiedener Videoformate für unterschiedliche Bandbreiten

Der Nachteil dieser Methode liegt auf der Hand. Die Nutzerin oder der Nutzer muss eines der Abspielprogramme installiert haben und sie oder er muss wissen ob und welches Abspielprogramm installiert ist. Erfahrungen zeigen, dass die wenigsten Nutzerinnen oder Nutzer bereit sind, lediglich für ein Video direkt eine neue Software zu installieren. Die Folge ist, dass die Verbreitung von Video-Plug-ins stark rückläufig ist, lediglich durch den immer noch hohen Marktanteil des Windows-Betriebssystems und der dort vorinstallierten Programme "Internet-Explorer" und "Windows Media Player", hält sich dessen Verbreitungsquote in den oberen Hälften der Statistiken auf.

Heute ist es üblich Abspielprogramme zu verwenden, die auf der Flash-Plattform der Firma Adobe basieren. Das Videoformat, welches die Abspielprogramme üblicherweise nutzen, ist das "Flash Video Format" (FLV). Die Verbreitung des Flash-Plugins für Browser wird meist auf über 95 % geschätzt, sodass die Nutzung dieses Formats zurzeit wohl der sicherste Weg ist die Nutzerinnen und Nutzer zu erreichen.

Die verbreitetsten auf Flash basierenden Abspielprogramme sind zurzeit wohl der JW Media Player und der Flowplayer. Einen ausführlichen Überblick über weitere Abspielprogramme finden Sie Blog von Florian Plag.

In der Zukunft wird sich eventuell das in HTML5 neu eingeführte video- und audio-Element höhere Marktanteile erarbeiten. HTML5 funktioniert bereits in den neueren Browser-Generationen und wird auch von mobilen Geräten (Smartphones) gut unterstützt. Leider konnten sich die Browser noch nicht auf ein einheitliches Videoformat für Ihre HTML5-Video-Player einigen. Somit müssen für eine breite Unterstützung mehrere Video-Formate vorgehalten werden. Der jeweilige HTML5-Video-Player des Browsers sucht sich automatisch die richtige Version aus. Der folgende Quellcode zeigt ein typisches Beispiel für eine Video-Einbindung.

<video poster="film.jpg" controls>
   <source src="film.webm" type="video/webm"/>
   <source src="film.ogv" type="video/ogg"/>
   <source src="film.mp4" type="video/mp4"/>
   <track src="untertitel.vtt" kind="subtitles">
   <p>
      Der <a href="film.mp4">Film zum Runterladen</a>.
   </p>
</video>

Die drei Formate, die Sie für das Web beachten sollten, sind webm, mp4 und ogv:

  • webm wurde von Firefox, Chrome und Opera bevorzugt.
  • ogg wird ebenfalls von Firefox, Chrome und Opera unterstützt.
  • mp4 wurde vom Internet Explorer und Safari bevorzugt.

Mittlerweile sind die Abgrenzungen aber nicht mehr so festgefahren und die gegenseitige Unterstützung steigt. Der Safari-Browser kann zum Beispiel mittlerweile alle 3 Formate abspielen. Im Beispiel oben wurde als Notfall-Lösung noch eine Download-Möglichkeit für das Video eingebaut. Das HTML5-Video-Element erlaubt es, auch zusätzliche Text-Spuren einzubinden. Die Text-Spuren können zum Beispiel Untertitel enthalten. Die direkte Unterstützung des track-Elements ist zurzeit leider noch nicht gegeben, aber die im folgenden beschriebenen Video-Frameworks unterstützen diese Untertitel zum Teil bereits.

Viele Hersteller bieten wiederum eigene auf HTML5 basierende Abspielprogramme oder besser gesagt Video-Frameworks an. Für den Fall, dass keines der Videoformate vom Browser direkt dargestellt werden kann, bieten die meisten dieser Frameworks einen Fallback — eine Art Notlösung — auf ein Flash-basiertes Verfahren an. Vorteile der Frameworks sind: Sie bieten in allen Browsern ein einheitliches Erscheinungsbild, die meisten Frameworks bieten die Möglichkeit auch das Aussehen des Abspielers anzupassen (Firmenfarben und so weiter) und die Frameworks bieten einen einfachen Zugang zu den JavaScript-Programmierschnittstellen.

Weiterführende Links:

Barrierefreie Gestaltung eines Online-Videos

Dieser Abschnitt soll exemplarisch den Weg zu einer barrierefreien Einbindung eines Videos demonstrieren. Das Video soll eine Untertitelung für gehörlose und hörgeschädigte Menschen und eine Audio-Deskription für blinde und sehbehinderte Menschen enthalten. Eine Version mit Deutscher Gebärdensprache ist nicht vorgesehen. Damit die Anwender entscheiden können, ob sie das Video mit oder ohne Untertitel betrachten möchten, sollen geschlossene Untertitel verwendet werden. Ebenso soll die Audio-Deskription vom Anwender zugeschaltet werden können.

Video-Format

Die erste Entscheidung die wir treffen müssen, betrifft das Video-Format. Da das Video für eine Präsentation im Internet gedacht ist, sollte das weit verbreitete Flash-Video-Format (FLV) verwendet werden. Zusätzlich möchten wir das Video im mp4-Format zum Download anbieten.

Zur Erstellung von Videos im FLV oder MP4-Format existieren zahlreiche frei erhältliche und kommerzielle Werkzeuge. Da die Wahl des Werkzeugs auf recht subjektive Gründe basiert, wollen wir an dieser Stelle kein Programm explizit empfehlen. Zu Testzwecken haben wir für beide Formate den Free Video Converter verwendet.

Abspielprogramm

Zwar existieren zahlreiche kostenfreie Abspielprogramme zum Abspielen von Flash-Videos, die auf Webseiten eingebunden werden können. Aber nicht alle berücksichtigen dabei die Aspekte der Barrierefreiheit. In diesem Beispiel verwenden wir, den von Jeroen Wijering entwickelten "JW Player". Die aktuellste Version wird von "LongTail Ad Solutions" zur Verfügung gestellt. Eine kommerzielle Lizenz ist kostenpflichtig, eine private Verwendung ist hingegen kostenlos.

Der Player bietet einige für uns relevante Besonderheiten:

  • Wir können ihn an unsere Bedürfnisse anpassen oder auch erweitern.
  • Spezielle Plug-ins für Untertitel und Audiodescriptionen sind vorhanden.
  • Die wichtigsten Funktionen des Players (wie Start, Pause und weitere) können über eine JavaScript-API gesteuert werden.

Untertitel

Untertitel richten sich primär an gehörlose und schwerhörige Menschen. Aber auch Nutzerinnen und Nutzer, deren Computer keine Lautsprecherausgabe ermöglicht oder die sich in einer lauten Umgebung aufhalten, profitieren von Untertiteln. Untertitel enthalten alle akustischen Elemente, das heißt gesprochene oder gesungene Sprache, Ereignisse wie das Klingeln eines Telefons und andere relevante Geräusche, als lesbare Alternative. Somit kann der Inhalt auch ohne Ton nachvollzogen werden.

Für die Untertitel unterstützt der "JW Player" das "Timed Text Format", einer vom World Wide Web Consortium (W3C) entwickelten Spezifikation zur Synchronisation von Text mit anderen Medien wie Video oder Audio. Das Format basiert auf einem XML-Dialekt und kann daher mit zahlreichen Werkzeugen bearbeitet werden.

Zur Erstellung unserer Timed-Text-Dateien verwenden wir ein Online-Werkzeuge mit dem Namen "Subtitle Horse". Es existieren aber auch Werkzeuge, die lokal auf dem Computer installiert werden können. "Subtitle Horse" ist in der Programmiersprache PHP programmiert und kann auch auf privaten oder Firmen-Webservern installiert werden.

Folgende Abbildung zeigt, wie die Untertitel zu unserem Video mit dem Programm "Subtitle Horse" erstellt werden.

Beispiel-Screenshot aus dem Online-Tool Subtitle Horse Beispiel-Screenshot aus dem Online-Tool Subtitle Horse

Das Ergebnis — die Timed-Text-Datei — sehen Sie hier:

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" 
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
   <head>
   </head>
   <body tts:textAlign="center">
      <div>
         <p begin="00:00:00.0" end="00:00:02.9">
             Vier Trümpfe mit dem Trabant 601:
         </p>
         <p begin="00:00:03.0" end="00:00:06.9">
            Bequem für vier Erwachsene -
         </p>
         <p begin="00:00:07.0" end="00:00:10.9">
            - viel Raum für Ihr Gepäck -
         </p>
         <p begin="00:00:12.0" end="00:00:13.9">
            - wendig - 
         </p>
         <p begin="00:00:14.5" end="00:00:16.9">
            - schnell - 
         </p>
         <p begin="00:00:18.0" end="00:00:20.9">
            - ausdauernd und robust -
         </p>
         <p begin="00:00:22.0" end="00:00:26.9">
            Ihr zuverlässiger Begleiter: Der neue Trabant 601!
         </p>
      </div>
   </body>
</tt>

Audio-Deskription

Die Audio-Deskription richtet sich an blinde und sehbehinderte Menschen. Sie enthält für das Verständnis des Videos relevante Informationen, die ausschließlich visuell im Video enthalten sind als akustisch wahrnehmbare sprachliche Alternative.

Zur Synchronisierung von Inhalten wurde vom W3C der Standard SMIL (Synchronized Multimedia Integration Language) entwickelt. Leider wird dieser Standard durch den "JW Player" nicht zur Synchronisation von Audio und Video unterstützt. Lediglich das zeitgleiche Starten verschiedener Medien-Dateien kann das Abspielprogramm gewährleisten. Bei der Aufnahme der Audio-Deskription muss deshalb synchron zum angesehenen Video eingesprochen werden. Für die Aufnahme von Audio existieren zahlreiche kostenfrei erhältliche Programme. Alternativ kann auch das in Windows integrierte Aufnahme-Programm verwendet werden.

Der "JW Player" unterstützt alle gängigen Audio-Formate. Um die Dateigröße möglichst gering zu halten, sollten Audioformate mit starker Komprimierung wie MP3 oder Ogg Vorbis verwendet werden.

Einbinden des JW Players

Zur Einbindung des Abspielprogramms und der Plug-ins für Untertitel und Audio-Deskriptionen wurden von LongTail Ad Solutions mehrere Anleitungen in englischer Sprache veröffentlicht:

Zunächst muss das Abspielprogramm — der JW Player — heruntergeladen und entpackt werden.

Das Abspielprogramm möglichst sicher und funktionsfähig für alle Browser und Betriebssysteme in eine Webseite einzubinden, ist keine einfache Aufgabe. Um die Einbindung möglichst unkompliziert zu machen, stellt der "JW Player" eine JavaScript-Bibliothek zur Verfügung, den JW Embedder.

Die beiden Dateien player.swf (das Abspielprogramm) und jwplayer.js (die Bibliothek) müssen in ein Verzeichnis auf den Server kopiert werden. In dieser Anleitung heißt das Verzeichnis /jwplayer/.

Nach diesen Vorbereitungen muss die JavaScript-Bibliothek in den HTML-Quellcode eingebunden werden. Folgende Code-Zeile muss in den Kopfbereich der Seite zwischen dem öffnenden und schließenden head-Tag kopiert werden:

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

Als Nächstes müssen Sie an der Stelle, an der später das Video eingeblendet werden soll, einen Platzhalter einfügen.

<p id="platzhalter">Das Video wird geladen... </p>

Den Inhalt des id-Attribut können Sie selbst wählen. Wichtig ist, dass die Id auf der Webseite nur genau einmal vorkommt.

Als Letztes muss eine JavaScript-Funktion aufgerufen werden, die das Abspielprogramm und das Video in den Inhalt des Platzhalters kopiert. Beim Aufruf der JavaScript-Funktion können auch alle relevanten Parameter des Videos bestimmt werden. Zum Beispiel die Höhe und Breite des Videos, der Pfad zur Video-Datei oder die Position der Steuerelemente.

<script type="text/javascript">
   jwplayer("platzhalter").setup({
      "flashplayer": "/jwplayer/player.swf",
      "file": "/videos/trabant601.flv",
      "height": "300",
      "width": "400",
      "controlbar.position": "bottom"
   });
</script>

Die folgende Abbildung zeigt das Ergebnis. Das Video wird vom Abspielprogramm dargestellt und am unteren Rand sind die Steuerelemente zu sehen.

Beispiel-Screenshot: Einbindung eines Abspielprogramm und eines Videos Beispiel-Screenshot: Einbindung eines Abspielprogramm und eines Videos

Einbinden der Untertitel

Nachdem das Video in die Webseite integriert wurde, müssen als nächstes die Untertitel hinzugefügt werden. Hierzu muss die bereits oben erstellte Untertitel-Datei in das Abspielprogramm eingebunden werden. Der Funktionsaufruf muss lediglich um einen Parameter, der die Untertitel-Datei bestimmt, erweitert werden.

<script type="text/javascript">
   jwplayer("platzhalter").setup({
      "flashplayer": "/jwplayer/player.swf",
      "file": "/videos/trabant601.flv",
      "height": "300",
  "height": "300",
      "width": "400",
      "controlbar.position": "bottom"
      "plugins": {
         "captions-2": {
             "file": "/videos/trabant601.ttx"
         }
      }
   });
      "width": "400",
      "controlbar.position": "bottom"
      "plugins": {
         "captions-2": {
             "file": "/videos/trabant601.ttx"
         }
      }
   });
</script>

Im Folgenden sehen Sie das vorherige Video mit den zuschaltbaren Untertiteln.

Beispiel-Screenshot: Video mit eingeblendeten Untertiteln. Beispiel-Screenshot: Video mit eingeblendeten Untertiteln.

Die Schaltfläche zum Ein- und Ausschalten der Untertitel wird oben rechts im Video angezeigt. Die Untertitel selbst werden am unteren Rand des Videos dargestellt.

Einbinden der Audio-Deskription

Nun muss noch die oben erstellte Audio-Deskription in den Player eingebunden werden. Über einen weiteren Parameter beim Funktionsaufruf ist dies ebenfalls sehr einfach möglich.

<script type="text/javascript">
   jwplayer("platzhalter").setup({
      "flashplayer": "/jwplayer/player.swf",
      "file": "/videos/trabant601.flv",
      "height": "300",
      "width": "400",
      "controlbar.position": "bottom"
      "plugins": {
         "captions-2": {
             "file": "/videos/trabant601.ttx"
         },
         "audiodescription-2": {
            "file": "/work/webguide_examples/videos/trabant601.mp3",
            "volume":"10"
         }
      }
   });
</script>

In der nächsten Abbildungen sehen Sie, die zusätzliche Schaltfläche, zum Ein- und Ausschalten der Audio-Deskription, auf der rechten Seite des Videos.

Beispiel-Screenshot: Video mit Schaltflächen zum Ein- und Ausschalten der Audiodeskription. Beispiel-Screenshot: Video mit Schaltflächen zum Ein- und Ausschalten der Audiodeskription.

Tastatursteuerung

Das Problem der Tastatursteuerung und der Tastaturfallen ist im aktuellen "JW Player" zwar weitgehend gelöst, um aber allen Nutzerinnen und Nutzern mit älteren Browsern ebenfalls die Steuerung per Tastatur zu ermöglichen, kann es sinnvoll sein, zusätzliche HTML-Steuerelemente einzufügen. In unserem Beispiel nutzen wir eine Liste mit sechs Links, die jeweils JavaScript-Funktionen des Abspielprogramms aufrufen.

<ul>
   <li class="player-play">
      <a href="#" 
         onclick="jwplayer().play();
                  return false;">Start/Pause</a>
   </li>
   <li class="player-stop">
      <a href="#" 
         onclick="jwplayer().stop();
                  return false;">Stop</a>
   </li>
   <li class="player-forward">
      <a href="#" 
         onclick="var p=jwplayer().getPosition();
                  jwplayer().seek(p-10);
                  return false;">zurück</a>
   </li>
   <li class="player-back">
      <a href="#" 
         onclick="var p=jwplayer().getPosition();
                  jwplayer().seek(p+10);
                  return false;">vor</a>
   </li>
   <li class="player-mute">
      <a href="#" 
         onclick="jwplayer().setMute();
                  return false;">Ton an/aus</a>
   </li>
   <li class="player-down">
      <a href="#" 
         onclick="/videos/trabant601.mp4">Video runterladen</a>
   </li>
</ul>

Die Links im Überblick:

  • Start/Pause: Zum Starten und Anhalten des Videos. Die Funktion ist Teil der JavaScript-Bibliothek des "JW Players".
  • Stop: Zum Beenden des Videos. Die Funktion ist Teil der JavaScript-Bibliothek des "JW Players".
  • vor: Springt ca. 10 Sekunden vor. Diese Funktion wird aus zwei Bibliotheks-Funktionen zusammengesetzt. Zunächst wird die aktuelle Position des Videos ausgelesen. Auf diese Position werden 10 Sekunden hinzugerechnet und die neu berechnete Position wird angesprungen.
  • zurück: Springt ca. 10 Sekunden zurück. Diese Funktion wird aus zwei Bibliotheks-Funktionen zusammengesetzt. Zunächst wird die aktuelle Position des Videos ausgelesen. Von dieser Position werden 10 Sekunden abgezogen und die berechnete Position wird angesprungen.
  • Ton an/aus: Schaltet die Tonwiedergabe ein oder aus. Diese Funktion ist ebenfalls Teil der JavaScript-Bibliothek des "JW Players".
  • Video runterladen: Ein herkömmlicher Link zu einem Download, falls es zu einem Problem mit der Wiedergabe im eingebetteten Abspielprogramm kommt.

Die Liste kann dann mittels CSS-Eigenschaften und Hintergrundgrafiken noch ein wenig gestaltet werden und das fertige Ergebnis zeigt dann folgende Abbildung.

Beispiel-Screenshot: Video mit Schaltflächen zur Steuerung der Videofunktionen. Beispiel-Screenshot: Video mit Schaltflächen zur Steuerung der Videofunktionen.

© Bundesministerium für Arbeit und Soziales