Skip to main content

HDR

This page documents how stream dynamic range is detected in DIVA Web and how HDR and Dolby Vision indicators are rendered in the UI.

What you learn​

You are instantiating DIVA Player in your web front-end and want HDR preference and capability to be evaluated correctly for entitlement and playback.

The goal of this article is to provide a working baseline where:

  • HDR preference is enabled through hdrMode.
  • Device capability is provided through deviceCapabilities.hasHDRSupport.
  • Internal runtime stream detection can drive HDR/Dolby UI.

Before starting​

  • Ensure your DIVA Back Office instance is up and running.
  • Ask your video engineering team for <videoId> and <settings URL>.
  • Ensure your test stream has HDR and/or Dolby Vision variants in manifest metadata.

Instantiation​

Write the Basic instantiation code, then add HDR-related configuration.

Working sample code (.tsx)​

Write App() as follows to provide HDR preference and capability in a BO integration:

import { BoAdapterWebComponentProps, DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const videoId = "<videoId>";

const libs = {
	mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
	shaka: "https://ajax.googleapis.com/ajax/libs/shaka-player/4.16.15/shaka-player.compiled.js",
	hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
	googleIMA: false,
	googleDAI: false,
	googleCast: false,
	threeJs: false,
};

const config = {
	videoId,
	hdrMode: true,  // Enable HDR startup preference (Optional)
	libs,
};

function App() {
	const props: BoAdapterWebComponentProps = {
		settingsUrl: "<settings URL>",
		languageCode: "en-US",
		languageDictionary: "en-US",
		onDivaBoAdapterError: console.error,
		config,
	};

	return <DivaWebBoAdapter {...props} />;
}

export default App;

End-to-end flow​

  1. The active media player (HLS or DASH) computes dynamic range flags.
  2. The player updates internal HDR/Dolby state.
  3. Engine player manager forwards this state through internal item/player pipelines.
  4. UI renders the proper badge/icon when runtime conditions are met.

Platform support​

Current HDR support status:

  • RW: supported on all browsers.
  • TV platforms supported:
    • Tizen
    • webOS
    • Hisense
  • Not supported:
    • PS4
    • PS5
    • Xbox

How to use HDR​

1. Enable HDR preference​

Set hdrMode: true in player config so your integration requests HDR playback when possible.

const config = {
	videoId,
	hdrMode: true,
	libs,
};

2. Return HDR-capable sources in metadata/entitlement​

Ensure your backend and metadata pipeline return HDR-capable content/variants when hdrMode is enabled and device capability allows it.

3. Drive UI with runtime detection​

HDR and Dolby Vision indicators are driven by internal runtime detection in DIVA Player/UI.

No public runtime dynamic-range subscription API is exposed for direct integration usage.

4. Verify the flow​

  • Verify hdrMode is true in launch/config.
  • Verify entitlement data includes:
    • videoCapabilities.hdr
    • userpreference.hdr
  • Verify HDR/Dolby behavior at runtime using supported UI/player outcomes.

Base player and engine propagation​

  • Runtime detection state is maintained internally by media players.
  • Concrete players update internal dynamic-range state whenever detection changes.
  • Engine player manager forwards this internal state to UI consumers.

HDR capability detection (isHDRSupported)​

Capability detection is used as a device capability signal.

Decision path:

  • Firefox/Safari:
    • display capability check AND codec support check
  • Other browsers:
    • display capability check AND MediaCapabilities decoding check

Checks involved:

  • Display capability:
    • high color depth (screen.colorDepth > 24) or wide gamut media queries (p3 / rec2020)
    • high dynamic range media queries (dynamic-range: high or video-dynamic-range: high)
  • Codec support (Safari/Firefox branch):
    • video.canPlayType(...) for HEVC HDR codec strings
  • Decoding capability (other browsers branch):
    • navigator.mediaCapabilities.decodingInfo(...) with HDR media config (transferFunction: 'pq', colorGamut: 'rec2020')

How HDR capability is sent in entitlement request​

isHDRSupported is wired into adapter/device capabilities and then injected into entitlement data mapping.

Flow:

  1. Web BO adapter registers capability callback (deviceCapabilities.hasHDRSupport = isHDRSupported).
  2. Entitlement request builder receives deviceCapabilities.hasHDRSupport.
  3. During data mapping construction, it resolves:
    • videoCapabilities.hdr = await hasHDRSupport?.() ?? await isHDRSupportedFallback()
  4. The resolved mapping is serialized into Data JSON and sent in entitlement request body.

hdrMode launch prop​

hdrMode is a launch/config preference signal and is different from runtime stream detection.

  • hdrMode: requested HDR preference/activation at item/config level.

UI logo rendering​

Logo rendering is implemented in HdrDolby component.

Behavior:

  • On item change, UI state resets.
  • Component reacts to internal runtime detection updates from player/engine.
  • If HDR and Dolby Vision are both unavailable, component renders nothing.
  • If HDR is active, HDR badge is shown.
  • If Dolby Vision is active, Dolby Vision icon is shown.
  • If both are active, both visuals are shown.

Quick troubleshooting​

  • No HDR/DV logo:
    • Check manifest metadata (video range / supplemental codecs / codec strings).
    • Confirm stream switched to HDR/DV-capable level or variant.
    • Verify playback behavior on HDR/Dolby-capable test stream/device combinations.
  • Unexpected logo:
    • Inspect active level/track codec fields used by detection logic.
    • Validate active level/variant at the moment of rendering.