Implementierung von HLS- und DASH-Streaming

Browser-Unterstützung

HLS

DASH

Technische Einrichtung

HLS

1. hls.js-Bibliothek

Lokal geladen von mpc-vidply über Resources/Private/Partials/VidPly/Assets.html wenn eine .m3u8 Quelle von der VidPlyProcessor:

 

Bei der Vendored-Datei handelt es sich um die veröffentlichte Version 1.6.16, nicht um einen lokalen masterCheckout eines Branches von hls.js. Kopieren Sie beim Upgrade das Release-Artefakt (npm / GitHub-Tag) in Resources/Public/JavaScript/hls.min.js.

 

das CDN-Fallback von VidPly (wird nur verwendet, wenn hls.js noch nicht auf der Seite vorhanden ist, z. B. bei eigenständigen Einbettungen):

cdn.jsdelivr.net/npm/hls.js@1.6.16/dist/hls.min.js

2. VidPly-HLS-Renderer

Datei: .libs/vidply/src/renderers/HLSRenderer.ts (Quellcode des eigenständigen Players; der ausgelieferte Build wird unter Resources/Public/JavaScript/vidply/)

Der Renderer entscheidet selbstständig, ob er hls.js oder die native HLS-Unterstützung des Browsers verwendet werden soll:

• Unter iOS / iPadOS (/iPad|iPhone|iPod/ UA oder iPad im Desktop-Modus: MacIntel + maxTouchPoints > 1) ist MSE nicht verfügbar, daher nutzt der Renderer die native <video> HLS-Wiedergabe über HTML5Renderer.
• Auf allen anderen Plattformen (Chrome, Firefox, Edge und Desktop-Safari unter macOS) wird hls.js für vollständige Funktionsparität – Qualitätsmenü, erweiterte Untertitelgestaltung und eine einheitliche Benutzererfahrung über alle Browser hinweg.

Native HLS-Brücke für iOS / iPadOS

Wenn der native Weg gewählt wird, fügt der Renderer Listener an HTMLMediaElement.textTracks , damit das Untertitelmenü, das interaktive Transkript und das Qualitätsmenü von VidPly weiterhin funktionieren:

this.media.textTracks.addEventListener('addtrack', checkTracks);
this.media.textTracks.addEventListener('removetrack', checkTracks);
this.media.addEventListener('loadedmetadata', checkTracks);

Jeder addtrack Burst (einer pro Untertitelvariante im Manifest) wird entprellt (~150 ms), bevor VidPly die Benutzeroberfläche für sichtbare Untertitel neu berechnet, sodass das Menü selbst bei mehrsprachigen Streams in einem einzigen Render-Durchgang erstellt wird.

Aktualisierungen von Live-Transkripten und Untertiteln

Der Renderer überwacht Hls.Events.SUBTITLE_FRAG_PROCESSED und sendet ein generisches textcuesupdate Ereignis, sodass das interaktive Transkript und die Live-Untertitel synchron bleiben, während neue Untertitel-Fragmente für Langzeit- oder Live-Streams geladen werden. Dasselbe Ereignis wird vom nativen iOS-Pfad bei cuechange.

DASH

1. „dash.js“-Bibliothek

Lokal geladen von mpc-vidply über Resources/Private/Partials/VidPly/Assets.html , wenn eine .mpd Quelle erkannt wird:

VidPlys CDN-Fallback (wird nur verwendet, wenn „dash.js“ noch nicht auf der Seite vorhanden ist):

cdn.jsdelivr.net/npm/dashjs@5.2.0/dist/modern/umd/dash.all.min.js

2. VidPly DASH-Renderer

Datei: .libs/vidply/src/renderers/DASHRenderer.ts (Quellcode des eigenständigen Players; der ausgelieferte Build wird unter Resources/Public/JavaScript/vidply/)

Funktionen:

• Adaptives Bitrate-Streaming mit automatischer Qualitätsumschaltung
• TTML-/STPP-Untertitel (nativ von dash.js gerendert)
• WebVTT-Untertitel (Verarbeitung durch das Untertitel-System von VidPly + interaktives Transkript)
• Integration der Benutzeroberfläche zur Qualitätsauswahl
• Robuster Teardown (dash.reset() dann dash.destroy()), um SourceBuffer Fehler beim Streamwechsel
• Geschwindigkeitssteuerung für DASH-Streams standardmäßig ausgeblendet (hideSpeedForDash: true)

Content Security Policy

Datei: Configuration/ContentSecurityPolicies.php

Erforderliche CSP-Anweisungen (gemeinsam für HLS und DASH):

'media-src'       => ['blob:', 'data:', 'https:'],
'worker-src'      => ['blob:'],
'connect-src'     => ['blob:', 'data:', 'https:'],
'script-src-elem' => ["'self'"],

 

Hinweis: mpc-vidply hls.js und dash.js werden lokal bereitgestellt (Resources/Public/JavaScript/). Die an anderer Stelle in dieser Datei genannten jsDelivr-URLs dienen ausschließlich als Fallback für eigenständige VidPly-Einbettungen – sie sind bei Verwendung der TYPO3-Erweiterung mit mitgelieferten Skripten nicht erforderlich. Seit Version 1.2.6 setzt die Erweiterung CSP cdn.jsdelivr.net Skripte standardmäßig auf die Whitelist.

 

Warum diese Direktiven benötigt werden:

• media-src 'blob:' — hls.js / dash.js Legen Sie eine blob: URL während <video>.src während der Wiedergabe fest.
• media-src 'data:' — Einige HLS-Varianten betten Init-Segmente / WebVTT inline als data: URIs ein.
• worker-src 'blob:' — hls.js / dash.js Worker aus blob: URLs zum Demuxen.
• connect-src 'https:' — Abrufen von Segmenten und Manifesten von beliebigen CDNs.
• script-src-elem 'self' — als Vendor-Bibliothek hls.min.js / dash.all.min.js aus der Erweiterung.
• script-src-elem 'https://cdn.jsdelivr.net' — Nur erforderlich, wenn Sie auf den CDN-Fallback von VidPly anstelle der eingebundenen Dateien zurückgreifen.

Verwendung

Backend

HLS und DASH sind keine eigenständigen Medientypen. Stattdessen werden Streaming-Quellen als Dateien innerhalb des Medientyps „Video“ oder „Audio“ hinzugefügt.

HLS/DASH zu einem Video-Datensatz hinzufügen:

1. Erstellen Sie einen VidPly-Mediendatensatz vom Typ „Video“
2. Fügen Sie ein .m3u8 (HLS)- oder .mpd (DASH)-Datei als Medienquelle hinzu
3. Fügen Sie optional progressive Fallbacks (MP4, WebM) hinzu – der Player bevorzugt DASH → HLS → progressiv
4. Fügen Sie optional lokale VTT-Dateien hinzu, um eingebettete Untertitel zu überschreiben
5. Fügen Sie ein Posterbild hinzu (zulässige Formate: png, jpg, jpeg, webp, svg)
6. Speichern

HLS/DASH zu einem Audio-Eintrag hinzufügen:

1. Erstellen Sie einen VidPly-Mediendatensatz vom Typ „Audio“
2. Fügen Sie ein .m3u8 (HLS)- oder .mpd (DASH)-Datei als Medienquelle hinzu
3. Fügen Sie optional progressive Fallbacks (MP3, OGG) hinzu
4. Speichern

Frontend

• Erkennt den Stream-Typ automatisch anhand des MIME-Typs oder der URL-Erweiterung (.m3u8 bei HLS .mpd für DASH)
• Priorität der Quellen: DASH → HLS → progressiver Fallback
• iOS / iPadOS verwenden natives HLS, zeigen aber dennoch Untertitel, Transkripte und Qualität über die Benutzeroberfläche von VidPly an; alle anderen Browser verwenden hls.js. Alle Browser verwenden dash.js für DASH.
• Eingebettete Untertitel aus HLS-/DASH-Manifesten werden standardmäßig verwendet; lokale VTT-Dateien dienen als optionale Überschreibungen
• Qualitätsumschaltung verfügbar (sofern der Stream mehrere Stufen bietet)
• Ein zentrierter Puffer-Indikator wird automatisch angezeigt, während der Stream gepuffert wird

Testen

ddev typo3 cache:flush

HLS-Test-URLs:

• Apple-Demo: devstreaming-cdn.apple.com/videos/streaming/examples/img_bipbop_adv_example_fmp4/master.m3u8
• Akamai-Demo: cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8

DASH-Test-URLs:

• DASH-IF: dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd
• Unified Streaming: demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.mpd

Fehlerbehebung

Stream wird nicht abgespielt:

• Überprüfen Sie, ob die URL öffentlich zugänglich ist
• Überprüfen Sie die CORS-Header auf dem Stream-Server (einschließlich Access-Control-Allow-Origin für Range Anfragen)
• Überprüfen Sie die CSP-Konfiguration (einschließlich blob:, data:, worker-src 'blob:')
• Auf JavaScript-Konsolenfehler prüfen

Keine Schaltfläche „Qualität“:

• Überprüfen Sie, ob der Stream mehrere Qualitätsstufen bietet
• Überprüfen, ob hls.min.js / dash.all.min.js korrekt geladen wird (Registerkarte „Netzwerk“)
• Unter iOS: Qualitätsvarianten werden nur angezeigt, wenn das Manifest sie über native TextTrack– VidPly erkennt sie automatisch über addtrack

Untertitel/Transkript werden bei iOS-HLS nicht angezeigt:

• Überprüfen Sie, ob das Manifest #EXT-X-MEDIA:TYPE=SUBTITLES Varianten enthält
• Untertitel erscheinen kurz nach loadedmetadata (mit einer Verzögerung von ca. 150 ms) – geben Sie dem Player nach dem Drücken der Wiedergabetaste einen Moment Zeit

CSP-Fehler:

• Prüfen, ob ContentSecurityPolicies.php , ob vorhanden und registriert
• Alle Caches leeren
• Überprüfen blob: und data: sind für beide media-src und connect-src

Leistung

• Adaptive Bitrate – Passt die Qualität automatisch an (HLS und DASH)
• Pufferoptimierung – Reibungslose Wiedergabe
• CDN-Bereitstellung – Eigenständige VidPly-Einbettungen können festgelegte Versionen von jsDelivr laden; mpc-vidply hls.js 1.6.16 und dash.js 5.2.0 werden lokal bereitgestellt
• Minimaler Overhead – hls.js / dash.js wird nur geladen, wenn eine .m3u8 / .mpd Quelle tatsächlich verwendet wird
• Bedingtes Laden — hls.js und dash.js werden unabhängig voneinander geladen, basierend auf den vom VidPlyProcessor
• Native HLS auf iOS – Vermeidet den Aufwand für die Ausführung hls.js auf Geräten, auf denen es ohnehin nicht ausgeführt werden kann, und behält gleichzeitig die vollständige VidPly-Benutzeroberfläche über die native TextTrack Brücke