Dokumentation

Funktionen

• Datenschutzorientierte externe Dienste – YouTube, Vimeo, SoundCloud mit DSGVO-konformer Einwilligungsschicht
• Websiteweite Datenschutzeinstellungen – Zentralisierte Backend-Konfiguration für Texte, Links und Überschriften der Datenschutzebene
• Medienbibliothek – Wiederverwendbare Mediendatensätze auf Ihrer gesamten Website
• Automatische Wiedergabelisten – Ab 2 Elementen werden automatisch Wiedergabelisten erstellt
• Volle Barrierefreiheit – Untertitel, Kapitel, Audiodeskription, Gebärdensprache, Tastatursteuerung
• HLS-Streaming – Adaptives Bitrate-Streaming mit hls.js (Chrome / Firefox / Edge / Desktop-Safari) und nativem HLS auf iOS / iPadOS – beide Varianten sind in die Untertitel-, Transkript- und Qualitätsmenüs von VidPly integriert
• DASH-Streaming – MPEG-DASH über dash.js mit adaptiver Qualität und Untertiteln (in Video-/Audiotypen integriert)
• SoundCloud-Renderer – Erstklassige SoundCloud-Wiedergabe über die SoundCloud-Widget-API (zusätzlich zur DSGVO-Einwilligungsschicht)
• Puffer-Spinner – Zentrierter Lade-Spinner, der automatisch angezeigt wird, während die Medien gepuffert werden
• Optionaler Download-Button – Medienbezogene Download-Steuerung mit Unterstützung für benutzerdefinierte URLs
• Moderner Player – Responsive, Bild-in-Bild, Qualitätsumschaltung, Wiedergabegeschwindigkeit
• TypeScript-Codebasis – Der mitgelieferte VidPly-Player ist nun in strengem TypeScript mit integrierten .d.ts Deklarationen
• Bedingtes Laden von Assets – Lädt nur das für Ihre Medientypen benötigte JavaScript
• Listenansicht & Detailseite – Fügen Sie ein VidPly-Listenansicht-Inhaltselement für eine oder mehrere durchsuchbare Zeilen (horizontales Regal oder responsives Raster), optionale zeilenweise Paginierung und Sortiersteuerung, Kategorie-Chips auf Karten sowie Links zu einer VidPly-Detailseite mit kurzer + langer (RTE) Beschreibung, Kategorien und Slug- oder ?media= URLs; verknüpfte Übersetzungen folgen der Konfiguration der Standardsprachenzeile (siehe `Documentation/Listview.md`)

Schnellstart

Installieren

composer require mpc/mpc-vidply

1. Datenbankaktualisierung → Wartung → Datenbankstruktur analysieren
2. Statische Vorlage einbinden → Startseite → „VidPly Player (mpc_vidply)“
3. Caches leeren

Medien erstellen

Modul „Liste“ → VidPly-Medien

Medientyp auswählen:

• Video – MP4 oder WebM hochladen oder HLS/DASH-Streaming-URLs hinzufügen (mit progressiven Fallbacks)
• Audio – MP3 oder OGG hochladen oder HLS-/DASH-Streaming-URLs hinzufügen (mit progressiven Fallbacks)
• YouTube – Video-URL einfügen
• Vimeo – Video-URL einfügen
• SoundCloud – Track-/Set-URL einfügen

Einstellungen für die Datenschutzebene konfigurieren

Modul „Liste“ → Einstellungen für die Datenschutzebene

Inhalte der Datenschutzebene für YouTube, Vimeo und SoundCloud verwalten:

• Überschrift (optional) – Wird über dem Datenschutztext angezeigt
• Einleitungstext – Text vor dem Link zur Datenschutzerklärung
• Abschlusstext – Text nach dem Link zur Datenschutzerklärung
• Link zur Datenschutzerklärung – URL zur Seite mit der Datenschutzerklärung
• Linktext – Text für den Link zur Datenschutzerklärung
• Schaltflächenbeschriftung (optional) – Barrierefreie Beschriftung für die Wiedergabetaste

Die Einstellungen unterstützen mehrsprachige Inhalte und gelten sowohl für einzelne Titel als auch für Wiedergabelisten. Leere Felder werden mit Standardübersetzungen ausgefüllt.

Zur Seite hinzufügen

Seitenmodul → Inhalt hinzufügen → VidPly Player

• Medienelemente auswählen (1 = einzelner Player, 2+ = Wiedergabeliste)
• Player-Optionen konfigurieren
• Speichern und anzeigen

Medientypen

Datenschutzebene

Für YouTube, Vimeo und SoundCloud:

• Kein Tracking vor der Einwilligung des Nutzers
• Overlay des Wiedergabetasters mit Datenschutzhinweis
• Aktivierung mit einem Klick – wird sofort geladen und abgespielt
• Zentrale Backend-Konfiguration für alle Datenschutztexte
• Mehrsprachige Unterstützung für Datenschutzeinstellungen
• Automatisch übersetzte Fallbacks (Deutsch und Englisch)

Konfiguration

Player-Optionen

Tastaturkürzel

• Leertaste/K – Abspielen/Pause
• M – Stummschalten
• F – Vollbild
• C – Untertitel
• ←/→ – Vor-/Zurückspringen ±10 s
• ↑/↓ – Lautstärke ±10 %

Barrierefreiheit

• Untertitel – WebVTT-Dateien mit Sprachcodes
• Kapitel – WebVTT-Datei mit Zeitstempeln zur Navigation
• Audiodeskription – Alternative Audiospuren für sehbehinderte Nutzer
• Gebärdensprache – Videos mit Gebärdensprachdolmetschung
• Transkripte – Automatisch generierte, durchsuchbare Transkripte aus Untertiteln

Wiedergabelisten

Einzelnes Element → Einzelner Player
2+ Elemente → Automatische Wiedergabeliste mit visuellem Bedienfeld, Titelnavigation, automatischem Vorlauf und Wiederholungsoptionen

Lazy-Loading-Verhalten (Video/Audio einschließlich HLS/DASH-Quellen):

• Wenn die automatische Wiedergabe deaktiviert ist, konfiguriert die Erweiterung VidPly so, dass das Laden über das Netzwerk zurückgestellt wird, bis der Benutzer die Wiedergabe startet (reduzierte anfängliche Bandbreite für Seiten mit vielen Playern).
• In Wiedergabelisten initialisiert die Auswahl eines Titels die Benutzeroberfläche/Metadaten (Poster, Dauer, Untertitel-/Kapitelmenüs), und ein Klick auf einen Wiedergabelisten-Eintrag lädt und spielt diesen Titel ab.

Erweitert

Bedingtes Laden von Assets

Lädt nur das für Ihre Medientypen benötigte JavaScript:

• Externe Dienste – PrivacyLayer.js (~5 KB)
• Video/Audio – VidPly-Kern + PlaylistInit (~180 KB)
• HLS-Quellen – Fügt hls.js hinzu, wenn .m3u8-Streams erkannt werden
• DASH-Quellen – Fügt dash.js hinzu, wenn .mpd-Streams erkannt werden
• Playlists – PlaylistInit.js wird bei 2 oder mehr Elementen geladen

Leistungssteigerung: Bis zu 97 % Reduzierung bei externen Diensten.

Vorlagenstruktur

Modulare Template-Teile:

• VidPly/Assets.html - Registrierung von Assets
• VidPly/VideoSources.html - Darstellung der Videoquelle
• VidPly/AudioSources.html - Darstellung der Audioquelle
• VidPly/Tracks.html - Untertitel-/Kapitelspuren
• VidPly/MetadataScripts.html - Metadaten zur Barrierefreiheit
• VidPly/PrivacyLayer.html - Einwilligung für externe Dienste

Dokumentation

• Editorenhandbuch – So nutzen Sie VidPly für Content-Editoren
• Listenansicht & Detailansicht – Übersicht im Mediathek-Stil, Detailseite, Routing, Paginierung, i18n-Verhalten
• Schnellstart für Entwickler – Kurzreferenz für Entwickler
• AssetLoading.md – Optimierung des bedingten Ladens von Assets
• Partials.md – Vorlagenstruktur und Anpassung
• PrivacyLayer.md – Implementierung des Datenschutzes für externe Dienste
• HLS-Implementation.md – Technische Details zu HLS- und DASH-Streaming
• SettingsArchitecture.md – Architektur des Konfigurationssystems

Fehlerbehebung

Medien werden nicht angezeigt?

• Überprüfen Sie, ob der Mediendatensatz nicht ausgeblendet ist
• Überprüfen Sie, ob die Datei/URL zugänglich ist
• Überprüfen Sie die MM-Beziehung in der Datenbank

Wiedergabeliste funktioniert nicht?

• Für die Wiedergabeliste sind mindestens 2 Elemente erforderlich
• Überprüfen Sie die JavaScript-Konsole auf Fehler
• Überprüfen Sie, ob PlaylistInit.js geladen wird

Datenschutzebene funktioniert nicht?

• TYPO3-Caches leeren
• Überprüfen, ob PrivacyLayer.js geladen wird
• Überprüfen Sie, ob die Einstellungen für die Datenschutzebene konfiguriert sind

Anforderungen

• TYPO3: 13.4+ oder 14.x
• PHP: 8.2+ (8.3 empfohlen)
• Composer: Erforderlich
• Browser: Chrome 90+, Firefox 88+, Safari 14+

Lizenz

GNU General Public License v2.0 oder höher

Autor

Matthias Peltzer