Implementierung von HLS- und DASH-Streaming

Browser-Unterstützung

HLS

DASH

Technische Einrichtung

HLS

1. hls.js-Bibliothek

Wird bei Bedarf von mpc-vidply (nur wenn eine .m3u8 Quelle vom VidPlyProcessor):

page.includeJSFooter {
    hlsjs = cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js
    hlsjs.external = 1
}

2. VidPly HLS-Renderer

Datei: libs/vidply/src/renderers/HLSRenderer.ts

Der Renderer entscheidet selbst, 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 verwendet 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 volle 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 Untertitel-Rendering im Manifest) wird entprellt (~150 ms), bevor VidPly die sichtbare Untertitel-Benutzeroberfläche neu berechnet, sodass das Menü selbst bei mehrsprachigen Streams in einem einzigen Render-Durchlauf erstellt wird.

Live-Transkript-/Untertitel-Aktualisierungen

Der Renderer wartet auf Hls.Events.SUBTITLE_FRAG_PROCESSED und sendet ein generisches textcuesupdate Ereignis, damit das interaktive Transkript und die Live-Untertitel synchron bleiben, während neue Untertitel-Fragmente für Long- und Live-Streams geladen werden. Das gleiche Ereignis wird vom nativen iOS-Pfad auf cuechange.

DASH

1. dash.js-Bibliothek

Wird bei Bedarf von mpc-vidply (nur wenn eine .mpd Quelle erkannt wird):

page.includeJSFooter {
    dashjs = cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js
    dashjs.external = 1
}

2. VidPly DASH-Renderer

Datei: libs/vidply/src/renderers/DASHRenderer.ts

Funktionen:

• Adaptives Bitrate-Streaming mit automatischer Qualitätsumschaltung
• TTML/stpp-Untertitel (nativ von dash.js gerendert)
• WebVTT-Untertitel (verarbeitet durch das Untertitel-System von VidPly + interaktives Transkript)
• Integration der Benutzeroberfläche zur Qualitätsauswahl
• Robuster Abbau (dash.reset() dann dash.destroy()), um SourceBuffer Fehler beim Stream-Wechsel
• Geschwindigkeitssteuerung standardmäßig ausgeblendet für DASH-Streams (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' => ['https://cdn.jsdelivr.net'],

Warum diese 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 'https://cdn.jsdelivr.net' — Laden hls.min.js / dash.all.min.js von jsdelivr.

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
3. Fügen Sie optional progressive Fallbacks (MP4, WebM) hinzu – der Player bevorzugt DASH → HLS → Progressive
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-Datensatz hinzufügen:

1. Erstellen Sie einen VidPly-Medien-Eintrag vom Typ „Audio“
2. Fügen Sie ein .m3u8 (HLS) oder .mpd (DASH)-Datei als Medienquelle
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 für HLS, .mpd für DASH)
• Priorität der Quellen: DASH → HLS → progressiver Fallback
• iOS / iPadOS verwenden natives HLS, zeigen aber dennoch Untertitel, Transkript 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-Spinner 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 (inkl. blob:, data:, worker-src 'blob:')
• Auf JavaScript-Konsolenfehler prüfen

Keine Schaltfläche für die Qualität:

• Überprüfen, ob der Stream mehrere Qualitätsstufen hat
• Ü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 TextTracks – VidPly erkennt sie automatisch über addtrack

Untertitel/Transkript werden auf iOS HLS nicht angezeigt:

• Überprüfen Sie, ob das Manifest #EXT-X-MEDIA:TYPE=SUBTITLES Wiedergabevarianten
• Untertitel erscheinen kurz nach loadedmetadata (mit einer Verzögerung von ca. 150 ms) – gib dem Player einen Moment Zeit, nachdem du auf „Play“ gedrückt hast

CSP-Fehler:

• Prüfen ContentSecurityPolicies.php , ob vorhanden und registriert
• Alle Caches löschen
• Ü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 – Flüssige Wiedergabe
• CDN-Bereitstellung – Schnelles Laden der Bibliothek über jsdelivr
• Minimaler Overhead – hls.js / dash.js Laden nur, 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 die Kosten für die Ausführung hls.js auf Geräten, auf denen es ohnehin nicht ausgeführt werden kann, während die vollständige VidPly-Benutzeroberfläche über die native TextTrack Brücke