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.6.16, 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.6.16/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 available at Resources/Public/JavaScript/vidply/)

The renderer decides automatically 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 the Native HLS bridge is used to ensure full feature parity – including the 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 user interface for visible subtitles, ensuring that 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 fragments are loaded for long-form or live streams. The same event is triggered by the native iOS path for cuechange.

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.0/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 described 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 has added CSP cdn.jsdelivr.net whitelists scripts by default.

 

Why these directives are required:

• media-src 'blob:' — hls.js / dash.js If you set a blob: URL during <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 prefers 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 still 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 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 – Stand-alone VidPly embeds can load specified versions from jsDelivr; mpc-vidply hls.js 1.6.16 and dash.js 5.2.0 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