Integrationen

Dynamische Inhalte (Vue, Swiper, AJAX)

VidPly wird DOMContentLoaded. Falls Ihre Website danach Player-Markup einfügt (Vue v-html, Swiper-Slide-Klone, Turbo usw.) einfügt, rufen Sie die öffentliche Scan-API auf, damit neue [data-vidply-init] / [data-playlist] Elemente erfasst werden.

Neuescannen nach HTML-Einbindung

PlaylistInit.js und PrivacyLayer.js beides abhören:

document.dispatchEvent(new CustomEvent('mpc:dynamic-content:ready', {
  detail: { root: containerElement }  // Element or Document fragment to scan
}));

Oder rufe direkt auf:

window.VidPlyInit.scan(containerElement);

• containerElement — Stamm des neu eingefügten HTML-Codes (eine Folie, ein Modal oder document für einen vollständigen erneuten Scan).
• Doppelte Swiper-Folien (.swiper-slide-duplicate) werden standardmäßig übersprungen, damit das geklonte DOM die Player nicht doppelt initialisiert.

Player auf inaktiven Folien anhalten

Beim Wechseln von Swiper-Folien (oder Ähnlichem) werden Player, die nicht mehr sichtbar sind, angehalten:

window.VidPlyInit.pauseOutside(activeSlideElement);

Dadurch werden alle initialisierten Player angehalten, deren <video> / Wrapper sich außerhalb des angegebenen Containers befindet.

Spät geladene Skripte

Wenn VidPly-Assets geladen werden, nachdem Vue die Folien bereits gerendert hat, PlaylistInit.js wird bei der Ausführung des Moduls ein Nachholvorgang durchgeführt (catchUpVueContainers). Aus Gründen der Zuverlässigkeit wird dennoch mpc:dynamic-content:ready nach jeder dynamischen Aktualisierung aus, um die Zuverlässigkeit zu gewährleisten.

Debug

Stellen Sie window.VIDPLY_DEBUG = true vor dem Laden der VidPly-Skripte ein, damit alle VidPly-Konsolenprotokolle sichtbar bleiben.

Themen-Synchronisierung (dunkel / hell)

Erweiterungskonfiguration (Admin → Settings → Extension Configuration → mpc_vidply):

Wenn die Design-Synchronisierung aktiviert ist, passt sich der Player dem Hell-/Dunkel-Modus der Seite an (Änderungen der Body-Klasse und benutzerdefinierte Ereignisse).

Programmatische API (nach dem PlaylistInit.js dem Laden):

window.VidPlyTheme.setTheme('dark');   // or 'light'
window.VidPlyTheme.getPlayers();       // alive Player instances
window.VidPlyTheme.detectPageTheme();  // read current page theme

Siehe „Einstellungsarchitektur“ → „Erweiterungskonfiguration“.

Content Security Policy (CSP)

VidPly registriert CSP-Änderungen in Configuration/ContentSecurityPolicies.php und erweitert connect-src über PolicyMutatedEvent für Streaming-CDNs.

Streaming (HLS / DASH)

Erforderlich für adaptives Streaming in modernen Browsern:

• media-src: blob:, data:, https: (sowie 'self')
• worker-src: blob:
• connect-src: blob:, data:, https: (Abruf von Segmenten/Manifesten)

Details und Fehlerbehebung: Implementierung von HLS- und DASH-Streaming.

Mitgelieferte Skripte

mpc-vidply liefert hls.js und dash.js unter Resources/Public/JavaScript/. Für die TYPO3-Erweiterung ist (seit v1.2.6) kein CDN-Skript-Ursprung erforderlich.

mp-core und Inline-Nonces

Auf Websites, die mp-core verwenden, können Inline- <script> / <style> Blöcke möglicherweise CSP-Nonces enthalten script-src / style-src. VidPly stellt sicher, nonceProxy erhalten bleibt, sodass script-src-elem / style-src-elem , sodass Theme-Bootstrap- und Structured-Data-Blöcke nicht blockiert werden, wenn VidPly vorhanden ist (v1.2.7).

Wenn Sie die CSP in Ihrem Website-Paket anpassen, stellen Sie sicher, dass die oben genannten Streaming-Anweisungen nicht überschrieben werden, ohne die Anforderungen von VidPly zu integrieren.

Strukturierte Daten (JSON-LD) mit mp-core

VidPly gibt schema.org VideoObject / AudioObject (bzw. ItemList auf Seiten mit mehreren Videos) von page.headerData.2042.

Standalone (nur mpc-vidply)

Ein spezielles <script type="application/ld+json"> wird gerendert, wenn Medien vorhanden sind. Deaktivieren über die Website-Einstellung:

# config/sites/<site>/config.yaml
settings:
  structuredDataEnabled: false

Wenn Ihre Website keine Site-Einstellung enthält, die diesen Schlüssel definiert, fügen Sie ihn manuell hinzu – mpc-vidply liest structuredDataEnabled mit Standardwert true.

Bei installiertem mp-core

Wenn mp-core geladen wird und ein JSON-LD erzeugt @grapherzeugt, fügt VidPly seinen Video-Knoten in diesen Graphen ein und setzt WebPage.mainEntity (ein einzelnes Skript-Tag). Wenn mp-core keinen verwertbaren Graphen liefert, greift VidPly auf die eigenständige Ausgabe zurück.

Auf mp-core-Websites erfordern strukturierte Daten möglicherweise auch „seo.schema.enabled“ (beide Schalter müssen für den globalen JSON-LD-Pfad von mp-core auf „true“ gesetzt sein). Der VidPly-eigene Prozessor berücksichtigt weiterhin structuredDataEnabled.

Vollständige Feldzuordnung und Watch-URL-Auflösung: Entwickler-Schnellstart → Strukturierte Daten.

Media-Session-API

Der integrierte VidPly-Player registriert Media-Session-Handler (Sperrbildschirm / Headset / Benachrichtigungssteuerung und Metadaten zur aktuellen Wiedergabe). Auf Seiten mit mehreren Playern zielt die API auf die Instanz ab, die tatsächlich gerade spielt (v1.2.8). Es ist keine TYPO3-Konfiguration erforderlich.

Progressive Enhancement (ohne JavaScript)

Lokale Video-/Audio-Inhaltselemente werden semantisch gerendert <video controls> / <audio controls> mit <source> und <track> -Elementen dargestellt. Ohne JavaScript zeigen Browser native HTML5-Steuerelemente an; VidPly erweitert denselben Markup beim Laden der Skripte. Externe Dienste (YouTube/Vimeo/SoundCloud) benötigen JavaScript zur Einwilligungsabfrage, um Einbettungen zu laden.

Überschreibungen der Website-Paketvorlage

Verweisen Sie die VidPly-Inhaltselemente auf Ihre Frame-/Header-Partials:

lib.mpcVidplyContentElement.layoutRootPaths.10 = {$styles.templates.layoutRootPath}
lib.mpcVidplyContentElement.partialRootPaths.10 = {$styles.templates.partialRootPath}

Teilvorlagen für den Player überschreiben:

tt_content.mpc_vidply {
    partialRootPaths.20 = EXT:your_sitepackage/Resources/Private/Partials/
}

Siehe „Partials.md“ für Dateinamen und data-* Hooks, die vom Listview.js.

SoundCloud-Renderer-Modus (erweitert)

Standardverhalten in TYPO3: SoundCloud verwendet den Iframe-Pfad der Datenschutzebene (~7 KB JS). Um SoundCloud über die einheitliche Steuerleiste von VidPly zu steuern, überschreiben Sie PrivacyLayer.html und legen Sie $needsVidPlay = true für SoundCloud in einem benutzerdefinierten Prozessor fest. Schritt für Schritt: „PrivacyLayer.md“ → SoundCloud in den Renderer-Modus umschalten.