Kategorien
Design HTML/CSS Webdesign

HTML5: Plyr, responsiver und barrierefreier Video-Player

Wer Video- und Audiodateien in eine Website integrieren möchte, setzt heutzutage auf HTML5. Mit Plyr steht einem hierfür ein umfangreiches Werkzeug zur Verfügung, mit dem sich eine individuelle Bedienoberfläche für HTML5-Video und -Audio realisieren lässt. Und wie es sich für eine zeitgemäße Webtechnik gehört, ist Plyr sowohl responsiv als auch barrierefrei.

plyr_beispiel

Einfache Handhabung, frei konfigurierbar

Die Handhabung des Frameworks ist einfach. Es gibt drei Dateien: eine JavaScript-, eine Stylesheet- und eine SVG-Datei. Die JavaScript- und Stylesheet-Datei müssen im HTML-Dokument eingebunden werden. Sie sorgen für die notwendige Funktionalität und das Aussehen der Bedienoberfläche. Die Icons der einzelnen Buttons sind als SVG-Sprites vorhanden und werden über die Stylesheet-Datei eingebunden.

Die Auszeichnung der Videos und Audios erfolg wie gewohnt über die entsprechenden HTML5-Elemente. Ein zusätzlicher „<div>“-Container mit der Klasse „player“ sorgt dafür, dass Aussehen und Funktionalität vom Plyr-Framework übernommen werden.

<div class="player">
  <video poster="film.jpg" controls>
    <source src="film.mp4" type="video/mp4">
    …
  </video>
</div>

Plyr ergänzt klassische Buttons zum Abspielen und Anhalten sowie zur Lautstärkeregelung. Außerdem werden ein Button zum Wechsel in den Vollbildmodus sowie einer zum Einblenden von Untertiteln dargestellt. Ein Fortschrittsbalken, über den auch innerhalb der Video- beziehungsweise Audio-Datei hin- und hergesprungen werden kann, gehört ebenfalls zur Standarddarstellung des Players. Zusätzlich werden die aktuelle Abspielzeit sowie die Gesamtlänge angezeigt.

plyr_icons
SVG-Icons, die sich auch ändern lassen

Außerdem gibt es zahlreiche Optionen, mit denen Aussehen und Verhalten der Bedienoberfläche per JavaScript konfiguriert werden können. So kann man angeben, welche Buttons und Informationen dargestellt werden sollen. Auch die Bezeichnungen der einzelnen Buttons lässt sich über ein Sprachobjekt definieren.

plyr.setup({
  controls: ["play", "volume"],
  i18n: {play: "Abspielen", volume: "Lautstärke"}
})

Im Beispiel werden über „plyr.setup()“ nur die Buttons zum Abspielen sowie zur Lautstärkeregelung eingeblendet. Die Benennung erfolgt über die Option „i18n“. Per Tooltip werden die Bezeichnungen angezeigt.

Das Aussehen des Players kann man per Stylesheet anpassen. Neben einer klassischen Stylesheet-Datei ist auch eine SASS- und LESS-Datei vorhanden. Für eigene Icons lässt sich die SVG-Datei ersetzen.

Barrierefreie Steuerung und responsive Darstellung

Alle Elemente des Players werden semantisch per HTML5 ausgezeichnet. Die Lautstärkeregelung ist beispielsweise als „<input>“-Element mit „range“-Attribut vorhanden. Der Fortschrittsbalken wird per „<progress>“-Element realisiert.

Außerdem werden Screenreader und WebVTT unterstützt. Letztes ermöglicht die Einblendung von Untertiteln, um Videodateien für Menschen mit Hörbehinderungen zugänglich zu machen.

plyr_vtt
Unterstützung von WebVTT für Untertiteleinblendungen

Wenn man schon auf HTML5 und SVG setzt, darf die Unterstützung responsiver Layouts natürlich nicht fehlen. Auch hier ist Plyr vorbildlich. Videos werden immer so dargestellt, dass sie höchstens so breit sind wie das Browserfenster beziehungsweise Display.

Die Bedienoberfläche wird bei Bedarf zudem mehrzeilig angeordnet.

YouTube-Videos mit eigenem Player

Gerade Videos werden häufig nicht selbst gehostet, sondern per YouTube in die eigene Website integriert. Auch hierbei muss man auf das eigene Aussehen dank Plyr nicht verzichten. Das Framework ermöglicht es, externe YouTube-Videos mit der Bedienoberfläche von Plyr auszustatten. Dazu muss einfach ein „<div>“-Element eingebunden werden, welchem die ID des entsprechenden YouTube-Videos übergeben wird.

<div data-video-id="L1h9xxCU20g" data-type="youtube"></div>

Per JavaScript sorgt Plyr dafür, dass das Video mit entsprechender Bedienoberfläche eingeblendet wird. Für zukünftige Versionen ist auch geplant, die Videoplattform Vimeo zu unterstützen.

Individuelle Steuerung per JavaScript möglich

Zusätzlich zur Bedienoberfläche stellt Plyr auch eine eigene API zur Verfügung, mit der Audio- und Videodateien unabhängig vom Player gesteuert werden können. Methoden wie „play()“ und „pause()“ erlauben es, eine Video- oder Audiodatei zum Beispiel aus einem beliebigen Link oder Button heraus zu starten und anzuhalten.

document.querySelectorAll(".player")[0].plyr.pause();

Im Beispiel wird das Abspielen eines Videos angehalten.

Browserunterstützung und Link zum Beitrag

Plyr wird von allen modernen Browsern unterstützt. Der Internet Explorer ist ab Version 10 dabei. Hier und da muss man allerdings mit kleinen Einschränkungen leben. So besitzt der Internet Explorer 10 keinen Vollbildmodus. Unter Safari mobile muss mangels Unterstützung auf das native Aussehen zurückgegriffen werden.

Plyr macht es zudem möglich, das Framework für bestimmte Browser und Geräte zu deaktivieren. So ist es beispielsweise möglich, auf mobilen Geräten grundsätzlich auf Plyr zu verzichten.

Eine gute Dokumentation sowie Demos für die Video-, Audio- und YouTube-Darstellung sind vorhanden. Plyr steht unter der weit verbreiteten MIT-Lizenz und kann auch kommerziell eingesetzt werden.

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Antworten auf „HTML5: Plyr, responsiver und barrierefreier Video-Player“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.