Skip to main content

Dolby Vision

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

What you learn​

You are instantiating DIVA Player in your web front-end and want Dolby Vision streams to be evaluated and rendered correctly at runtime.

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

  • HDR preference is enabled through hdrMode.
  • Device HDR capability is provided through deviceCapabilities.hasHDRSupport.
  • Internal runtime stream detection drives Dolby Vision 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 Dolby Vision variants in manifest metadata.

Instantiation​

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

Working sample code (.tsx)​

Write App() as follows to provide startup HDR preference and device capability:

import { BoAdapterWebComponentProps, DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
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/Dolby Vision startup preference (Optional)
	libs,
};

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

	return <DivaWebComponent {...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 Dolby Vision/HDR state.
  3. Engine player manager forwards this state through internal item/player pipelines.
  4. UI renders the Dolby Vision icon when runtime conditions are met.

Platform support​

Current Dolby Vision support follows the same runtime pipeline used for HDR.

  • RW: supported on all browsers where stream metadata and player detection rules are available.
  • TV platforms supported:
    • Tizen
    • webOS
    • Hisense
  • Not supported:
    • PS4
    • PS5
    • Xbox

How to use Dolby Vision​

1. Enable startup dynamic-range preference​

Set hdrMode: true in player config so your integration requests HDR-capable playback paths when available.

const config = {
	videoId,
	hdrMode: true, // Keep enabled to request HDR-capable playback
	libs,
};

2. Return Dolby Vision-capable sources in metadata/entitlement​

Ensure your backend and metadata pipeline return Dolby Vision-capable variants when HDR mode is enabled and the device can render compatible output.

3. Drive UI with runtime detection​

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

No public streamDynamicRange API is exposed for direct subscription in integrations.

4. Verify the flow​

  • Verify hdrMode is true in launch/config.
  • Verify entitlement data includes:
    • videoCapabilities.hdr
    • userpreference.hdr
  • Verify Dolby Vision behavior at runtime using supported UI/player outcomes.
  • Verify the Dolby Vision icon appears only when the active track is Dolby Vision and the device supports Dolby Vision.

Package context: HLS and DASH Dolby Vision detection​

HLS detection rules​

In player runtime, HLS computes dynamic range from level metadata and codec information:

  • isDolbyVision is derived from supplemental codecs tokens or video codec tokens.
  • isHdr and isDolbyVision are clamped by device HDR rendering capability.

Conceptually, detection follows:

isDolbyVision = hasDolbyVisionSupplementalCodecs || hasDolbyVisionVideoCodec;
return { isHdr: activeFlags.isHdr && canRenderHdr, isDolbyVision: activeFlags.isDolbyVision && canRenderHdr };

DASH detection rules​

In DASH runtime, Dolby Vision is derived from active variant codec values:

  • isDolbyVision when codec includes dvav, dvhe, or dvh1.
  • isHdr when hdr metadata is PQ/HLG or codec includes HDR indicators.

Conceptually, detection follows:

const isDolbyVision = !!(codec && (codec.includes("dvav") || codec.includes("dvhe") || codec.includes("dvh1")));

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.

Device capability and UI gating​

Dolby Vision badge rendering is gated by both content flags and device capability:

  • Runtime content flag: internal Dolby Vision detection state
  • Device flag: deviceModel.hasDolbyVisionSupport()

In WebTV UI (HdrDolby component), the Dolby Vision icon is shown only when both are true.

Entitlement and startup signals​

There is no separate dolbyVisionMode startup prop.

  • hdrMode is the startup preference signal.
  • Runtime Dolby Vision state is resolved internally during playback.

Entitlement mapping uses HDR capability and preference keys:

  • videoCapabilities.hdr
  • userpreference.hdr

Dolby Vision visibility is then finalized at runtime from stream metadata and device support checks.

How HDR capability is sent in entitlement request​

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

Flow:

  1. Web BO adapter registers capability callback (deviceCapabilities.hasHDRSupport).
  2. Entitlement request builder receives deviceCapabilities.hasHDRSupport.
  3. During data mapping construction, it resolves videoCapabilities.hdr.
  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.
  • Runtime Dolby Vision state: active-stream detection handled internally by player and UI.

Quick troubleshooting​

  • No Dolby Vision icon:
    • Check manifest metadata and active track codec values (dvav, dvhe, dvh1).
    • Confirm active level/variant is Dolby Vision-capable.
    • Verify playback behavior on a Dolby Vision-capable test stream/device combination.
    • Verify device capability returns true from hasDolbyVisionSupport().
  • Icon appears unexpectedly:
    • Inspect active level/variant codec fields used by detection logic.
    • Validate active track at the same time UI subscribes and renders.
  • Expecting entitlement-only behavior:
    • Dolby Vision is decided by runtime detection plus device support, not by a dedicated Dolby entitlement key.