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 1.6.16 (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 5.2.0 (modernes UMD) mit adaptiver Qualität und Untertiteln (in Video-/Audioformate integriert)
• Import über URL – Fügen Sie im Backend eine Medien-URL ein, um den Typ automatisch zu erkennen, Online-Medien einzubinden und Titel, Interpret und Poster vorab auszufüllen
• SoundCloud-Unterstützung – DSGVO-Einwilligungslayer, anschließend Wiedergabe über das SoundCloud-Widget (optionales Opt-in für Entwickler zur Nutzung einheitlicher VidPly-Steuerelemente – siehe Datenschutzschicht)
• Puffer-Ladeanzeige – Zentrierte Ladeanzeige, die automatisch angezeigt wird, während die Medien gepuffert werden
• Optionaler Download-Button – Umschaltfunktion pro Medium; progressive Quellen (MP4/WebM/MP3) werden automatisch verwendet; für reine HLS-/DASH-Elemente fügen Sie eine progressive Fallback-Datei hinzu
• Floating Player – Optionales benutzerdefiniertes Bild-in-Bild: verschiebbares, in der Größe anpassbares Fenster auf der Seite (pro Mediendatensatz)
• Moderner Player – Responsives PiP im Browser, Qualitätsumschaltung, Wiedergabegeschwindigkeit, Overlay mit Tastenkürzeln
• Strukturierte Daten (JSON-LD) – VideoObject / AudioObject (sowie ItemList auf Galerieseiten) für SEO-Rich-Results – siehe Entwickler-Schnellstart
• TypeScript-Codebasis – Der mitgelieferte VidPly-Player ist nun in strengem TypeScript geschrieben und enthält .d.ts Deklarationen
• Bedingtes Laden von Assets – Es werden nur die für Ihre Medientypen benötigten JavaScript-Dateien geladen
• Listenansicht & Detailseite – Fügen Sie ein VidPly-Listansicht-Inhaltselement für eine oder mehrere durchblätterbare Zeilen hinzu (horizontales Regal oder responsives Raster), optionale Paginierung und Sortiersteuerung pro Zeile, Kategorie-Chips auf Karten sowie Links zu einer VidPly-Detailseite mit kurzer und langer (RTE) Beschreibung, Kategorien und Slug oder ?media= URLs; verknüpfte Übersetzungen folgen der Konfiguration für die Standardsprachenzeile (siehe Listenansicht und Detailseite)

Schnellstart

Installieren

composer require mpc/mpc-vidply

1. Datenbankaktualisierung → Admin-Tools → Wartung → Datenbankstruktur analysieren
2. Site-Set einbinden → Site-Verwaltung → Sites → Ihre Site → Sets → Hinzufügen mpc/mpc-vidply
   (oder fügen Sie mpc/mpc-vidply zu dependencies in config/sites/<site>/config.yaml)
3. Caches leeren

Medien erstellen

Modul „Liste“ → VidPly Media

Der schnellste Weg: Verwenden Sie „Von URL importieren“ oben im Formular – fügen Sie einen YouTube-, Vimeo-, SoundCloud- oder Streaming-Link (.m3u8 / .mpd) oder einen auf der Whitelist stehenden externen MP4-/MP3-Link ein. VidPly erkennt den Typ und füllt die Metadaten automatisch aus. Siehe den Editor-Leitfaden.

Oder wählen Sie den Medientyp manuell aus:

• 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 – Fügen Sie eine Video-URL ein
• Vimeo – Fügen Sie die Video-URL ein
• SoundCloud – Track-/Set-URL einfügen

Player zur Seite hinzufügen

Seitenmodul → Inhalt hinzufügen → VidPly-Player – Wählen Sie einen oder mehrere Medientitel aus (ab 2 wird eine Wiedergabeliste erstellt). Informationen zu Player-Optionen, Untertiteln, Wiedergabelisten und Datenschutz finden Sie im Editor-Handbuch.

Mediathek erstellen (Listenansicht)

Fügen Sie ein VidPly-Listview-Inhaltselement für durchsuchbare Übersichtszeilen und eine VidPly-Detailseite für die Anzeige einzelner Medien (Slug-URLs, Kategorien, ausführliche Beschreibungen) hinzu. Schritt für Schritt: Listview & Detail.

Dokumentation

Beginnen Sie mit dem Dokumentationsindex für die zielgruppenbasierte Navigation (Redakteure, Administratoren, Entwickler).

Fehlerbehebung

Voraussetzungen

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

fluid_styled_content ist optional. VidPly registriert sein eigenes TypoScript zur Darstellung von Frontend-Inhalten (lib.mpcVidplyContentElement) und liefert ein kompatibles Standard-Layout für tt_content Header und Rahmenklassen mit.

Lizenz

GNU General Public License v2.0 oder höher

Autor

Matthias Peltzer