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 – Stammelement 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 angehalten, die nicht mehr sichtbar sind:

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 erfolgt die Weiterleitung mpc:dynamic-content:ready aus Sicherheitsgründen nach jeder dynamischen Aktualisierung.

Debug

Stellen Sie window.VIDPLY_DEBUG = true vor dem Laden der VidPly-Skripte ein, um alle VidPly-Konsolenprotokolle sichtbar zu halten.

Themen-Synchronisierung (dunkel / hell)

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

Wenn die Design-Synchronisierung aktiviert ist, passt sich der Player dem hellen bzw. dunklen Modus der Seite an (data-bs-theme, Body-/HTML-Klassen #themeSwitch sowie theme:change Ereignisse). Es werden nur Player aktualisiert, deren Wrapper data-vidply-theme-sync="1" , werden aktualisiert – und zwar nur dann, wenn sich das erkannte Design tatsächlich ändert. VidPlyTheme.setTheme() ist eine explizite Anforderung und gilt für jeden Player.

Die Stile für die Listenansicht, die Episoden und die Datenschutzebene wechseln erst bei einer expliziten Zustimmung – data-bs-theme="dark" auf der Seite oder data-theme="dark" in der Komponente – niemals allein aufgrund des Farbschemas des Betriebssystems, da der Seitenhintergrund zur Website gehört.

Programmatische API (nach 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 / media-src über PolicyMutatedEvent mit den Hosts aus der Erweiterungskonfiguration.

Streaming (HLS / DASH) und externe Mediendateien

Erforderlich für adaptives Streaming in modernen Browsern:

• media-src: blob:, data: (sowie 'self'), sowie die Hosts in allowedVideoDomains / allowedAudioDomains
• worker-src: blob:
• connect-src: blob:sowie die Hosts in allowedVideoDomains / allowedAudioDomains (Segment-/Manifest-Abrufe)

Die Erweiterung fügt nicht mehr das gesamte https: Schema hinzu. Ein Eintrag in der Zulassungsliste *.cdn.example.com wird zu cdn.example.com und *.cdn.example.com; ein Eintrag mit einem Schema () behält es bei. Wenn ein Stream seine Segmente von einem anderen Host als dem im Manifest angegebenen lädt, fügen Sie diesen Host ebenfalls zur Zulassungsliste hinzu.

Details und Fehlerbehebung: HLS-Implementierung.

Von Drittanbietern bereitgestellte Skripte

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

mp-core und Inline-Nonces

Auf Websites, die mp-core verwenden, können Inline- <script> / <style> Blöcke können 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. Deaktivierung ü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 einziges 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. Ohne JavaScript zeigen Browser native HTML5-Steuerelemente an; VidPly erweitert denselben Markup, sobald Skripte geladen werden. Externe Dienste (YouTube/Vimeo/SoundCloud) benötigen JavaScript zur Einwilligung, 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}

Überschreiben Sie Player-Partials:

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

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

SoundCloud-Renderer-Modus (erweitert)

Standardverhalten in TYPO3: SoundCloud verwendet den Iframe-Pfad der Datenschutzschicht (~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 → SoundCloud in den Renderer-Modus umschalten.