Skip to content

Comments

feat: high dynamic-range (HDR) detection#982

Open
tsi wants to merge 4 commits intomasterfrom
VIDEO-20707-hdr
Open

feat: high dynamic-range (HDR) detection#982
tsi wants to merge 4 commits intomasterfrom
VIDEO-20707-hdr

Conversation

@tsi
Copy link
Collaborator

@tsi tsi commented Feb 17, 2026

Add HDR option for Cloudinary video transformations

Summary

Adds an hdr: true option so the player applies Cloudinary HDR transformations (vc_h265, dr_high) when the device and screen support HDR.

Changes

Feature

  • src/video-player.const.js: Added hdr to SOURCE_PARAMS
  • src/plugins/cloudinary/models/video-source/video-source.js: When hdr: true and matchMedia('(dynamic-range: high)').matches, merges { video_codec: 'h265', raw_transformation: 'dr_high' } into the transformation
  • src/plugins/cloudinary/models/video-source/video-source.const.js: Added hdr: false to DEFAULT_VIDEO_PARAMS

Note: dr (dynamic range) is not yet supported by @cloudinary/url-gen, so dr_high is applied via raw_transformation.

Input validation

  • src/config/configSchema.json: Added hdr: { type: "boolean", default: false }
  • src/validators/validators.js: Added hdr: validator.isBoolean to sourceValidators

Analytics

  • src/utils/get-analytics-player-options.js: Included hdr in source options for analytics

Example pages

  • docs/hdr.html: NonESM example with cloud_name: 'prod', publicId: 'video/examples/hdr', and an "Enable HDR" toggle
  • docs/es-modules/hdr.html: ESM example with the same setup
  • docs/index.html and docs/es-modules/index.html: Added HDR links

E2E tests

  • test/e2e/testData/ExampleLinkNames.ts: Added HDR
  • test/e2e/testData/pageLinksData.ts and esmPageLinksData.ts: Added HDR page links
  • test/e2e/src/pom/hdrPage.ts: New page object
  • test/e2e/src/pom/PageManager.ts: Added hdrPage getter
  • test/e2e/specs/commonSpecs/hdrPageVideoPlaying.ts: Shared spec for HDR page
  • test/e2e/specs/NonESM/hdrPage.spec.ts and test/e2e/specs/ESM/esmHdrPage.spec.ts: E2E specs

Unit tests

  • test/unit/videoSource.test.js: Added describe('HDR option tests') with 4 tests:
    • hdr: true + HDR supported → URL contains vc_h265 and dr_high
    • hdr: true + HDR not supported → URL does not contain dr_high
    • hdr: false → no HDR transformation
    • hdr not set → no HDR transformation

Usage

player.source('video/examples/hdr', { hdr: true, info: { title: 'HDR' } });

@tsi tsi requested a review from a team as a code owner February 17, 2026 15:40
@netlify
Copy link

netlify bot commented Feb 17, 2026

Deploy Preview for cld-vp-esm-pages ready!

Name Link
🔨 Latest commit d122c19
🔍 Latest deploy log https://app.netlify.com/projects/cld-vp-esm-pages/deploys/6995c03a3e65a00008f09234
😎 Deploy Preview https://deploy-preview-982--cld-vp-esm-pages.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Feb 17, 2026

Deploy Preview for cld-video-player ready!

Name Link
🔨 Latest commit d122c19
🔍 Latest deploy log https://app.netlify.com/projects/cld-video-player/deploys/6995c0398323c400089d59db
😎 Deploy Preview https://deploy-preview-982--cld-video-player.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant