Inhalt:

Barrierefreies Video Player "Framework"

Bei der Bereitstellung von Videobeiträgen im Web gilt es zu beachten, diese Beiträge auch barrierefrei (für alle Nutzergruppen) anbieten zu können. Diese Anforderungen ergeben sich aus den Richtlinien für eine barrierefreie Webgestaltung (siehe WCAG http://www.w3.org/TR/WCAG20/).

Das hier zum Download dargestellte Player-Framework bietet folgende Möglichkeiten

  • Beiträge können mit Untertitel versehen werden
  • Beiträge können mit einer weiteren Audiospur (Audiobeschreibung) versehen werden um Inhalte im Film besser verständlich zu machen
  • Möglichkeit zur Integration von Gebärdensprachvideos
  • Alle Funktionen sind zusätzlich auch nur über die Tastatur bedienbar (z.b. Play, Pause, Ton etc.)
  • Transkription (Toggle: auf und zu klappen)
  • Videos können in einer höheren Qualität und größer betrachtet werden
  • HTML5 iPhone/iPad/iPod Weiche für entsprechend codierte mp4/h264 Videos

Technische Basis des Video Player "Frameworks"

Das Framework basiert auf:

Demo

Demobeispiel

Referenzen

wien.gv.at/tv

Credits

Tests

Erfolgreich getestet derzeit in:

  • IE6 (eingeschränkt)
  • IE7
  • IE8
  • FF 3.6
  • Opera 10.6
  • Chrome 6
  • Safari 4
  • Safari 5
  • iPone 3 (Safari)
  • iPod 3 (Safari)
  • iPone 4 (Safari)

Lizenzen

Das Framework selbst unterliegt GNU General Public License.
Alle verwendeten Scripts, Player oder Elemente externer Quellen (v.a. jQuery, JW Player, swfobject...) müssen von ebendort runtergeladen werden. Benutzer müssen selbst sicherstellen, dass Sie die jeweiligen Rechte besitzen.

Installation

  1. Playerpaket auf einem Server uploaden und entzippen
  2. Download JW Player
    http://www.longtailvideo.com/players/jw-flv-player/
    Playerfile ablegen unter video/player (player.swf)
  3. Download oder Link auf jQuery im HTML Head
    http://jquery.com/
  4. Download oder Link auf swfobject im HTML Head
    http://code.google.com/p/swfobject/
  5. Download Colorbox und verlinken im HTML Head
    http://colorpowered.com/colorbox/
    Files ablegen unter video/colorbox (jquery.colorbox.js, colorbox.css, images)
  6. in HTML File z.b. testjq.html
    Meta Pfade kontrollieren und ggf. ändern
    Javascript Config: Pfade kontrollieren und ggf. ändern (z.b. zu den testfiles)

Konfiguration

Videogrößen und erweiterte Filmsteuerung

Anpassbar in: video/css/video.css

Videoplayer Skin

Anpassbar in: video/skin/...

HTML Head Config Javascript

  • playerUrl: default (eher nicht zu ändern)
  • playerSkin: Pfad zum player skin
  • playerWidth: Breite des Videos im Verhältnis zum umgebenden Container (video.css)
  • playerHeight: Höhe des Videos im Verhältnis zum umgebenden Container (video.css)
  • playerWidthBig: Breite des Grossformatvideos (wenn vorhanden) im Verhältnis zum umgebenden Container (video.css)
  • playerHeightBig: Höhe des des Grossformatvideos (wenn vorhanden) im Verhältnis zum umgebenden Container (video.css)
  • playerFlv: Video Url
  • playerFlvBig: Grossformatvideo Url
  • playerFlvImg: Vorschaubild
  • currentVolume: Default Lautstärke Audiospur des Videos
  • accessibilityPluginsPath: Accessibilityplugins JW Player (eher nicht zu ändern)
  • accessibilityPluginsCapsOnlyPath: Accessibilityplugins JW Player (eher nicht zu ändern)
  • accessibilityPluginsAudioOnlyPath: Accessibilityplugins JW Player (eher nicht zu ändern)
  • audioButton: Wenn Audidescription File vorhanden dann auf "on" setzen (on, off)
  • audioDescFile: Audidescription File Url
  • audioDescVolume: Audidescription Lautstärke
  • captionButton: Wenn Caption File vorhanden dann auf "on" setzen (on, off)
  • captionFile: Caption File Url
  • captionBackground: Caption Hintergrund (true, false)
  • signButton: Wenn Gebärdensprachvideo File als Medienalternative vorhanden dann auf "on" setzen (on, off)
  • signLanguageUrl: Gebärdensprachvideo File Url
  • signLanguageImg: Gebärdensprachvideo Vorschaubild

Weitere Infos

  • Je nach Flash Einstellung ist es möglich, dass das Paket lokal (ohne Server) nicht läuft (vor allem das Video)
  • Für iPhone/iPad/iPod Useragents wird das gleche Video ausgeliefert wie für "normale" Browser allerdings mittels HTML5. Um die Videos auch auf diesen mobilen Useragents verfügbar zu machen, ist speziell auf das Format und auf den Codec des Videos zu achten.

Weiterentwicklung

  • Es ist geplant das Playerframework in nächster Zeit weiterzuentwickeln. Alle Personen die Interesse haben sind eingeladen den Code zu reviewen und ggf. weiterzuentwickeln und wieder zur Verfügung zu stellen.
  • Folgende Erweiterungen wären u.a. sinnvoll:
    • Multivideo Darstellung
      Darstellung von mehreren Videos auf einer Page (Beta dafür bereits in Arbeit)
    • Integration in Module/Extensions/Plugins für Open Source CMS Systeme (Drupal, Typo3, Wordpress etc.)
    • Weitere Anregungen die hoffentlich kommen ;-)

Download

 

AnhangTypGröße
Download Version 0.9 (21.10.2010)zip.png2.02 MB

Böse Frage

Ich hab mir die Lösung (auf wien.at) aus Bedienersicht mal vorgenommen. Beim durchtabben ist mir aufgefallen, dass ich zwar in die Steuerung des Videos selbst (nicht die "dazuprogrammierte") hineingekommen bin, dort aber nicht mehr raus! Klassischer Fall von Tastaturfalle :/

Gibt es da einen Workaround dafür, dass man die Steuerung innerhalb des Players komplett deaktiviert/ ausblendet oder erst garnicht das Video selbst anklicken / antabben kann?

Oder gibt es für blinde Besucher eine andere Möglichkeit, da drüber zu kommen?

Danke für Euren Input!

Ronald

Warum Flash?

Mich würde mal interessieren, warum hier auf die Flash-Lösung gebaut wird, wo doch die für HTML 5 nötigen Codecs ebenfalls Untertitel und mehrere Audiospuren anbieten?

Theoretisch sind ja mit auch zusätzliche externe Quellen zum Video zuschaltbar.

Ist HTML 5 video denn so schlecht zugänglich?

Multivideo-Lösung

Hallo,

danke für das Script :)
Gibt es dafür mittlerweile eine Multivideo-Lösung?

Grüße,
Nina

Multivideo-Lösung

ja gibt es

http://www.web-tech.at/multivideoframework/player5/test.html

wird aber noch etwas dauern bis ein paket geschnürt wird

Meine Erfahrungen mit dem Framework

Die Technik gefällt mir sehr gut, das Ergebnis noch besser. Ich habe den Player mal probeweise aufgesetzt: http://w7t.de/d
und werde ihn wohl demnächst auf einer Website für hörsehbehinderte und taubblinde Menschen einsetzen.

Einige Beobachtungen dabei:

1. Die Lizenzpolitik von http://www.longtailvideo.com/ ist, gelinde gesagt, unübersichtlich.

2. Etwas Mühe bereitete mir das Konvertieren der Videos in das richtige Format, damit die Videos auch auf iOS-Geräten (iPad, iPhone, iPod) laufen. Schließlich schaffte ich es mit FormatFactory http://format-factory.softonic.de/ (aktuelle Version verwenden!) und folgenden Einstellungen:
- Mobile Gerät kompatibel MP4
-- MP4 480x360 AVC
3. Da die Videos aber erst starteten, nachdem sie komplett herunter geladen waren - was nicht der Sinn eines online-Players sein kann, musste ich nochmals nachbearbeiten. Ein kleines, frei verfügbares Programm namens MP4FastStart.exe "did the trick".

4. Im Framework, das hier heruntergeladen werden kann, musste ich noch einen nervigen Fehler eliminieren:
Beim Einblenden der Mitschrift wurde die Seite neu geladen, und der Fokus an den Seitenanfang gesetzt. Was insbesondere für Benutzer von Screen Readern recht nervig sein kann.
Ursache:
<a id="vie_tv-transkript-hide" href="#" onclick="return false;">Mitschrift einblenden</a">
Richtig wäre:
<a id="vie_tv-transkript-hide" href="javascript:void(0)" onclick ...

youtube

spiel auch youtube videos

1. das file yt.swf (ist im jwplayer paket enthalten) in das playerverzeichnis

2. einfach bei den playerurls youtube urls angeben
z.b.:
playerFlv = "http://www.youtube.com/watch%3Fv%3DIBTE-RoMsvw";
playerFlvBig = "http://www.youtube.com/watch%3Fv%3DIBTE-RoMsvw";

user 1

Das nenn ich ein lebendiges Projekt!

Am A-Tag haben wir noch darüber gesprochen, dass das Abspielen von Youtube-Videos eine tolle Ergänzung zum Video-Framework wäre. Und einen Werktag später ist es schon Realität! Danke!

Präsentation A-Tag

Am A-Tag 2010 (05.11.2010) wird das Playerpaket vorgestellt. Hier ist die Präsentation dazu.