MPC-VidPly

VidPly ist eine universelle, barrierefreie Video- und Audio-Player-Erweiterung für TYPO3 13/14 und basiert auf dem freien Player vidply. Sie bietet umfassende Unterstützung für HTML5-Medien, YouTube, Vimeo, SoundCloud und HLS-Streaming mit einem datenschutzorientierten Ansatz und Konformität mit den WCAG 2.1 AA-Barrierefreiheitsrichtlinien.

Systemanforderungen

• TYPO3 13.4+ oder 14.x
• PHP 8.2 oder höher (8.3 empfohlen)
• Composer-Installation empfohlen (aber nicht erforderlich)
• Moderne Browser: Chrome 90+, Firefox 88+, Safari 14+

Wichtigste Funktionen

• Externe Dienste mit Datenschutz als oberster Priorität – YouTube, Vimeo, SoundCloud mit DSGVO-konformer Einwilligungserklärung
• Medienbibliothek – Wiederverwendbare Medienaufzeichnungen auf Ihrer gesamten Website
• Automatische Wiedergabelisten – Zwei oder mehr Elemente erstellen automatisch Wiedergabelisten
• Volle Barrierefreiheit – Untertitel, Kapitel, Audiobeschreibung, Gebärdensprache, Tastatursteuerung
• HLS-Streaming – Adaptives Bitraten-Streaming mit hls.js
• Moderner Player – Responsives Design, Bild-in-Bild, Qualitätsumschaltung, Wiedergabegeschwindigkeit

Unterstützte Medientypen

Datenschutzebene (DSGVO-Konformität)

Für externe Dienste wie YouTube, Vimeo und SoundCloud verfolgt VidPly einen Datenschutz-orientierten Ansatz:

• Vor der Einwilligung – Es werden nur ein Posterbild und die Wiedergabetaste angezeigt.
• Keine externen Anfragen – Es werden keine Tracking-Skripte oder Cookies geladen, bis der Benutzer interagiert
• Klare Datenschutzhinweise – Benutzer werden über die Datenübertragung an externe Dienste informiert
• Aktivierung mit einem Klick – Das Video wird sofort nach der Zustimmung geladen und abgespielt
• Mehrsprachige Unterstützung – Datenschutzhinweise auf Deutsch und Englisch verfügbar

Datenschutzoptimierte Einbettung

• YouTube verwendet die datenschutzoptimierte Domain youtube-nocookie.com
• Übersichtliche Player-Benutzeroberfläche mit minimalem Branding
• Keine Empfehlungen für ähnliche Videos

Barrierefreiheitsfunktionen

VidPly bietet umfassende Unterstützung für die Barrierefreiheit gemäß WCAG 2.1 AA:

Bildunterschriften und Untertitel

• Unterstützung für WebVTT-Dateien (.vtt)
• Unterstützung mehrerer Sprachen
• Konfigurierbare Arten von Spuren: Untertitel, Bildunterschriften, Beschreibungen
• Angabe von Sprachcode und -name

Kapitel

• WebVTT-basierte Kapitelmarkierungen
• Visuelle Kapitelnavigation
• Zu bestimmten Abschnitten springen

Audiobeschreibung

• Alternative Audiospur für sehbehinderte Benutzer
• Zwischen Standard- und beschriebenem Video umschalten

Gebärdensprache

• Überlagerung mit Gebärdensprachdolmetschung
• Bild-in-Bild-Anzeige

Transkripte

• Automatisch generierte, durchsuchbare Transkripte aus Untertiteln
• Anklickbare Textzeilen zum Springen zu bestimmten Stellen
• Optionale Anzeige des Transkriptfensters

Player-Optionen

Tastaturkürzel

• Leertaste oder K – Wiedergabe/Pause
• M – Stummschalten/Stummschaltung aufheben
• F – Vollbild
• C – Untertitel ein-/ausschalten
• Pfeil nach links/rechts – 10 Sekunden vor-/zurückspulen
• Aufwärts-/Abwärtspfeil – Lautstärke um 10 % erhöhen/verringern
• Home – Zum Anfang gehen
• Ende – Zum Ende gehen

Playlist-Funktionalität

• Automatische Erstellung – Durch Auswahl von zwei oder mehr Medienelementen wird eine Playlist erstellt
• Visuelles Panel – Miniaturansichtsliste mit Titelnavigation
• Automatischer Vorlauf – Spielt automatisch den nächsten Titel ab
• Wiederholungsoption – Alle Titel wiederholen
• Reihenfolge per Drag & Drop – Elemente in beliebiger Reihenfolge anordnen

HLS-Streaming

• Volle HLS-Unterstützung über die hls.js-Bibliothek
• Funktioniert in allen modernen Browsern
• Adaptives Bitraten-Streaming
• Kompatibel mit Content Security Policy (CSP)
• Ideal für Live-Streams und Langform-Inhalte

Bedingtes Laden von Assets

VidPly lädt intelligent nur das für bestimmte Medientypen erforderliche JavaScript:

• Externe Dienste (YouTube, Vimeo, SoundCloud) – Nur PrivacyLayer.js (~5 KB)
• Lokale Videos/Audiodateien – VidPlay-Kern + PlaylistInit (~180 KB)
• HLS-Streaming – Fügt hls.js nur hinzu, wenn .m3u8-Streams erkannt werden
• Wiedergabelisten – PlaylistInit.js wird nur für 2 oder mehr Elemente geladen.

Dies führt zu einer Reduzierung des JavaScript-Aufwands für externe Dienste um bis zu 97 %.

Vorlagenstruktur

Modulare Fluid-Vorlagenteile zur Anpassung:

• VidPly/Assets.html – Registrierung von Assets
• VidPly/VideoSources.html – Rendering von Videoquellen
• VidPly/AudioSources.html – Wiedergabe von Audioquellen
• VidPly/Tracks.html – Untertitel- und Kapiteltracks
• VidPly/MetadataScripts.html – Metadaten zur Barrierefreiheit
• VidPly/PrivacyLayer.html – Zustimmung zu externen Diensten

Zweistufiger Arbeitsablauf

1. Medienaufzeichnungen erstellen – Erstellen Sie wiederverwendbare Medienelemente im VidPly-Medienspeicher
2. Player zur Seite hinzufügen – Fügen Sie ein VidPly Player-Inhaltselement ein und wählen Sie Ihre Medien aus.

Installation

composer require mpc/mpc-vidply

Nach der Installation

1. Führen Sie die Datenbankaktualisierung über das Wartungsmodul durch.
2. Fügen Sie die statische Vorlage „VidPly Player (mpc_vidply)” in den Site-Settings oder auf der Startseite im Root-Template ein.
3. Alle Caches löschen.

Lizenz und Autor

VidPly wird unter der GNU General Public License v2.0 oder höher veröffentlicht. Entwickelt von Matthias Peltzer.