How to Enable Dolby Audio and Dolby Vision in hls.js

  • Sep 11, 2026
  • Knowledge

Title
How to Enable Dolby Audio and Dolby Vision in hls.js
SEO/Search Tags
URL Name
Dolby-Audio-and-Dolby-Vision-in-hls-js
Created By
kciec, 9/11/2026 12:56 PM
Summary
Last Modified By
kciec, 9/11/2026 12:57 PM
Validation Status
Validated
Publication Status
Published
Assigned To
Assigned By
Assignment Due Date
Promoted
False

Article Content

hls.js is a lightweight JavaScript library focused exclusively on HLS playback in browsers that support the MediaSource Extensions API. It is widely used for HLS playback on non-Apple platforms (since Safari has native HLS support). hls.js is valued for its small footprint, simplicity of integration, and active development community.

For Dolby content, hls.js parses SUPPLEMENTAL-CODECS attributes in HLS master playlists for backward-compatible Dolby Vision profiles, VIDEO-RANGE attributes for distinguishing HDR transfer functions, and CHANNELS attributes for detecting Dolby Atmos content.

Project URL: https://github.com/video-dev/hls.js

Demo Player: https://hls-js.netlify.app/demo/

Advantages:

  • Small library size (~100 KB minified)
  • Simple, focused API for HLS playback
  • HDR preference configuration
  • SUPPLEMENTAL-CODECS support for backward-compatible Dolby Vision
  • Built-in DRM support via EME
  • Active development and large community

Limitations:

  • HLS only; no MPEG-DASH support
  • Less granular codec preference control compared to Shaka Player or dash.js
  • No built-in spatial audio preference flag
  • FairPlay DRM requires careful configuration of the license URL and certificate
  • On Safari, native HLS is typically preferred over hls.js for DRM content

Supported Technologies

NOTE: Dolby recommends using the most recent version of hls.js whenever possible. While older versions may support specific technologies, newer releases typically provide improved stability, broader platform compatibility, and the latest playback enhancements. The versions listed below indicate framework-level support only and should not be interpreted as a guarantee of playback support on a particular device or platform.

TechnologyMinimum recommended versionNotes
Dolby Digital Plus (ec-3)v0.12+Standard codec string matching
Dolby Digital Plus with Dolby Atmos (DD+ with JOC)v0.14+CHANNELS attribute with 16/JOC
Dolby AC-4v1.x+Codec string ac-4.xx.yy.zz; CHANNELS with IMSA
HDR10 / HLG videov1.x+VIDEO-RANGE attribute (PQ, HLG)
Dolby Vision (non-backward-compatible)v1.x+Codec strings dvh1.* / dvhe.*
Dolby Vision (backward-compatible via SUPPLEMENTAL-CODECS)v1.x+SUPPLEMENTAL-CODECS attribute parsing
HDR preferencev1.4+videoPreference.preferHDR and allowedVideoRanges
PlayReady DRMv1.4+Via EME (emeEnabled: true)
Widevine DRMv1.4+Via EME (emeEnabled: true)
FairPlay DRMv1.4+Via EME (emeEnabled: true)

Example Player Configuration

The example below shows the minimum setup required to initialize hls.js and begin playback.

Note: The sample code in this article is provided as an example implementation and should not be considered production-ready. Before deployment, it should be reviewed, tested, and adapted to the specific requirements of your application and environment.

<video id="video" controls></video> <script src="hls.js"></script> <script> const video = document.querySelector('#video'); if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource('https://example.com/content/master.m3u8';); hls.attachMedia(video); hls.on(Hls.Events.MEDIA_ATTACHED, () => { video.play(); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { // Fallback to native HLS on Safari video.src = 'https://example.com/content/master.m3u8';; video.play(); } </script>

Configuring for Dolby Content

hls.js uses a configuration object passed to the constructor. For Dolby content, the most important settings are the HDR video preference (which controls whether the player prefers HDR variants over SDR), the initial ABR bandwidth estimate (which should be set high enough to allow selection of high-bitrate Dolby Atmos tracks), and the DRM configuration.

const config = { debug: false, // Enable Encrypted Media Extensions for DRM emeEnabled: true, // Set a high initial bandwidth estimate so that // high-bitrate Dolby Atmos tracks are considered abrEwmaDefaultEstimate: 10_000_000, // Prefer HDR variants when available videoPreference: { preferHDR: true, allowedVideoRanges: ['SDR', 'HLG', 'PQ'] }, // DRM configuration drmSystems: { 'com.apple.fps': { licenseUrl: 'https://fps.example.com/license';, serverCertificateUrl: 'https://fps.example.com/certificate.cer'; }, 'com.widevine.alpha': { licenseUrl: 'https://wv.example.com/license'; }, 'com.microsoft.playready': { licenseUrl: 'https://pr.example.com/license'; } } }; const hls = new Hls(config); hls.loadSource('https://example.com/content/master.m3u8';); hls.attachMedia(document.querySelector('#video'));

Detecting Active Dolby Formats

hls.js fires a BUFFER_CREATED event when source buffers are created, which includes the codec information for each track. You can also inspect the CHANNELS attribute from the parsed audio tracks to determine whether Dolby Atmos is active.

hls.on(Hls.Events.BUFFER_CREATED, (event, data) => { // Check audio if (data.tracks.audio) { const audioCodec = data.tracks.audio.codec; const audioTrack = hls.audioTracks[hls.audioTrack]; const channels = audioTrack ? audioTrack.channels : ''; if (audioCodec.includes('ec-3') || audioCodec.includes('ac-4')) { const isJoc = channels.includes('JOC'); const isIMSA = channels.includes('IMSA'); const isAC4Atmos = audioCodec.includes('ac-4.02.01.03') || audioCodec.includes('ac-4.02.01.04'); if (isJoc || isAC4Atmos || isIMSA) { console.log('Dolby Atmos playback active'); } else { console.log('Dolby Audio playback active'); } } } // Check video if (data.tracks.video) { const videoCodec = data.tracks.video.codec; if (videoCodec.includes('dvh1') || videoCodec.includes('dvhe') || videoCodec.includes('dav1')) { console.log('Dolby Vision playback active'); } } });

Manual Track Selection

hls.js allows manual selection of audio tracks and quality levels:

hls.on(Hls.Events.MANIFEST_PARSED, (event, data) => { // Log available levels and audio tracks for (const [id, level] of data.levels.entries()) { console.log(`Level ${id}: video=${level.videoCodec}, ` + `audio=${level.audioCodec}`); } for (const [id, audio] of data.audioTracks.entries()) { console.log(`Audio ${id}: name=${audio.name}, ` + `lang=${audio.lang}`); } // Force a specific video level or audio track // hls.nextLevel = 3; // hls.audioTrack = 1; });

MediaSource.isTypeSupported() Polyfill for Dolby Vision

Similar to Shaka Player, hls.js may need a polyfill for MediaSource.isTypeSupported() on platforms where the browser incorrectly rejects Dolby Vision codec strings. This is particularly relevant on LG WebOS TVs and some other smart TV platforms.

const original = MediaSource.isTypeSupported; MediaSource.isTypeSupported = function(mimeType) { return original(mimeType) || mimeType.includes('dvh1') || mimeType.includes('dvhe'); };
Web




Don't see what you're looking for? Visit our Forums

Dolby Atmos content creation Dolby Vision content creation Encoding, Distribution, & App Development