Implementation of HLS and DASH streaming

Browser support

HLS

DASH

Technical facilities

HLS

1. hls.js library

Loaded locally from mpc-vidply via Resources/Private/Partials/VidPly/Assets.html if a .m3u8 source from the VidPlyProcessor:

 

The ‘Vendored’ file refers to the published version 1.7.2, not a local mastercheckout of a branch of hls.js. When upgrading, copy the release artefact (npm / GitHub tag) into Resources/Public/JavaScript/hls.min.js.

 

VidPly’s CDN fallback (only used if hls.js is not already present on the page, e.g. for standalone embeds):

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

2. VidPly HLS Renderer

File: .libs/vidply/src/renderers/HLSRenderer.ts (Source code of the standalone player; the delivered build is located at Resources/Public/JavaScript/vidply/)

The renderer decides for itself whether to hls.js or the browser’s native HLS support should be used:

• On iOS / iPadOS (/iPad|iPhone|iPod/ UA or iPad in desktop mode: MacIntel + maxTouchPoints > 1) MSE is not available, so the renderer uses the native <video> HLS playback via HTML5Renderer.
• On all other platforms (Chrome, Firefox, Edge and desktop Safari on macOS), hls.js for full feature parity – quality menu, advanced subtitle styling and a consistent user experience across all browsers.

Native HLS bridge for iOS/iPadOS

If the native approach is chosen, the renderer adds listeners to HTMLMediaElement.textTracks so that VidPly’s subtitle menu, interactive transcript and quality menu continue to function:

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

Each addtrack burst (one per subtitle variant in the manifest) is debounced (~150 ms) before VidPly recalculates the visible subtitle UI, ensuring the menu is rendered in a single pass even for multilingual streams.

Updates to live transcripts and subtitles

The renderer monitors Hls.Events.SUBTITLE_FRAG_PROCESSED and emits a generic textcuesupdate event, ensuring that the interactive transcript and live subtitles remain synchronised whilst new subtitle segments are loaded for long or live streams. The same event is triggered by the native iOS path during cuechange.

Live Stream User Interface

In the case of liveStream: 'auto' (the default in the bundled player), VidPly detects HLS live playlists and adapts the control bar:

• ‘LIVE’ badge instead of the total duration
• ‘Restart’ and ‘Playback speed’ are hidden
• ‘Skip forward’ and ‘Go live’ are only available if the viewer is more than a few seconds behind the live feed
• VOD HLS sources (finite playlists) retain the standard seek controls – detection is based on the live rather than the temporary Infinity duration on start-up

Import live TV streams as video media records so that the HLS renderer is used even if the URL also matches the audio domain’s allowlists.

DASH

1. dash.js library

Loaded locally from mpc-vidply via Resources/Private/Partials/VidPly/Assets.html , when a .mpd source is detected:

VidPly’s CDN fallback (only used if ‘dash.js’ is not already present on the page):

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

2. VidPly DASH renderer

File: .libs/vidply/src/renderers/DASHRenderer.ts (Source code of the standalone player; the delivered build is provided under Resources/Public/JavaScript/vidply/)

Features:

• Adaptive bitrate streaming with automatic quality switching
• TTML/STPP subtitles (rendered natively by dash.js)
• WebVTT subtitles (processed by the VidPly subtitle system + interactive transcript)
• Integration of the user interface for quality selection
• Robust teardown (dash.reset() then dash.destroy()), to SourceBuffer errors during stream switching
• Speed control for DASH streams hidden by default (hideSpeedForDash: true)

Content Security Policy

File: Configuration/ContentSecurityPolicies.php

Required CSP directives (common to both HLS and DASH):

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

 

Note: mpc-vidply hls.js and dash.js are served locally (Resources/Public/JavaScript/). The jsDelivr URLs mentioned elsewhere in this file serve solely as a fallback for standalone VidPly embeds – they are not required when using the TYPO3 extension with the supplied scripts. Since version 1.2.6, the extension does not, by default, cdn.jsdelivr.net scripts by default.

 

Why these instructions are necessary:

• media-src 'blob:' — hls.js / dash.js Set a blob: URL <video>.src playback.
• media-src 'data:' — Some HLS variants embed init segments / WebVTT inline as data: URIs.
• worker-src 'blob:' — hls.js / dash.js Extract blob: URLs for demuxing.
• connect-src 'https:' — Retrieving segments and manifests from any CDNs.
• script-src-elem 'self' — As a vendor library hls.min.js / dash.all.min.js from the extension.
• script-src-elem 'https://cdn.jsdelivr.net' — Only required if you are using VidPly’s CDN fallback instead of the embedded files.

Usage

Backend

HLS and DASH are not standalone media types. Instead, streaming sources are added as files within the ‘Video’ or ‘Audio’ media type.

Adding HLS/DASH to a video record:

1. Create a VidPly media record of the ‘Video’ type
2. Add an .m3u8 (HLS) or .mpd (DASH) file as a media source
3. Optionally, add progressive fallbacks (MP4, WebM) – the player prioritises DASH → HLS → progressive
4. Optionally, add local VTT files to override embedded subtitles
5. Add a poster image (supported formats: png, jpg, jpeg, webp, svg)
6. Save

Add HLS/DASH to an audio entry:

1. Create a VidPly media record of type ‘Audio’
2. Add an .m3u8 (HLS) or .mpd (DASH) file as a media source
3. Optionally, add progressive fallbacks (MP3, OGG)
4. Save

Frontend

• Automatically detects the stream type based on the MIME type or the URL extension (.m3u8 for HLS .mpd for DASH)
• Source priority: DASH → HLS → progressive fallback
• iOS / iPadOS use native HLS, but continue to display subtitles, transcripts and quality via the VidPly user interface; all other browsers use hls.js. All browsers use dash.js for DASH.
• Embedded subtitles from HLS/DASH manifests are used by default; local VTT files serve as optional overrides
• Quality switching available (provided the stream offers multiple levels)
• A centred buffer indicator is automatically displayed whilst the stream is buffering

Test

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

Troubleshooting

Stream won’t play:

• Check that the URL is publicly accessible
• Check the CORS headers on the stream server (including Access-Control-Allow-Origin for Range requests)
• Check the CSP configuration (including blob:, data:, worker-src 'blob:')
• Check for JavaScript console errors

No ‘Quality’ button:

• Check whether the stream offers multiple quality levels
• Check whether hls.min.js / dash.all.min.js it loads correctly (the ‘Network’ tab)
• On iOS: Quality options are only displayed if the manifest specifies them via native TextTrack– VidPly detects them automatically via addtrack

Subtitles/transcripts are not displayed with iOS HLS:

• Check whether the manifest #EXT-X-MEDIA:TYPE=SUBTITLES contains variants
• Subtitles appear shortly after loadedmetadata (with a delay of approx. 150 ms) – give the player a moment after pressing the play button

CSP error:

• Check whether ContentSecurityPolicies.php whether they are present and registered
• Clear all caches
• Check blob: and data: are for both media-src and connect-src

Performance

• Adaptive bitrate – Automatically adjusts the quality (HLS and DASH)
• Buffering optimisation – Seamless playback
• CDN delivery – Standalone VidPly embeds can load specified versions from jsDelivr; mpc-vidply hls.js 1.7.2 and dash.js 5.2.1 are served locally
• Minimal overhead – hls.js / dash.js is only loaded if a .m3u8 / .mpd source is actually being used
• Conditional loading — hls.js and dash.js are loaded independently of one another, based on the VidPlyProcessor
• Native HLS on iOS – Avoids the overhead of running hls.js on devices where it cannot run anyway, whilst retaining the full VidPly user interface via the native TextTrack bridge