Skip to content

Commit 780b2b4

Browse files
tsitsi
authored
Merge branch 'master' into infra/agents.md
2 parents 7a98a4c + 8872c9a commit 780b2b4

24 files changed

Lines changed: 295 additions & 6 deletions

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
# [3.9.0](https://github.com/cloudinary/cloudinary-video-player/compare/v3.8.1...v3.9.0) (2026-02-23)
2+
3+
4+
### Features
5+
6+
* high dynamic-range (HDR) support ([#982](https://github.com/cloudinary/cloudinary-video-player/issues/982)) ([4e9d589](https://github.com/cloudinary/cloudinary-video-player/commit/4e9d5892acdafd95a34041975466490752f11597))
7+
8+
9+
110
## [3.8.1](https://github.com/cloudinary/cloudinary-video-player/compare/v3.8.0...v3.8.1) (2026-02-22)
211

312

‎docs/es-modules/hdr.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Cloudinary Video Player</title>
6+
<link
7+
href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
8+
rel="icon"
9+
type="image/png"
10+
/>
11+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
</head>
14+
<body>
15+
<div class="container p-4 col-12 col-md-9 col-xl-6">
16+
<nav class="nav mb-2">
17+
<a href="/index.html">&#60;&#60; Back to examples index</a>
18+
</nav>
19+
<h1>Cloudinary Video Player</h1>
20+
<h3 class="mb-4">HDR</h3>
21+
22+
<div class="form-check mb-2">
23+
<input type="checkbox" class="form-check-input" id="hdr-toggle" checked>
24+
<label class="form-check-label" for="hdr-toggle">Enable HDR</label>
25+
</div>
26+
27+
<video
28+
id="player"
29+
playsinline
30+
controls
31+
muted
32+
autoplay
33+
class="cld-video-player"
34+
width="500"
35+
></video>
36+
</div>
37+
38+
<script type="module">
39+
import { videoPlayer } from 'cloudinary-video-player';
40+
import 'cloudinary-video-player/cld-video-player.min.css';
41+
42+
function loadSource(hdrEnabled) {
43+
player.source('video/examples/hdr', { hdr: hdrEnabled, info: { title: hdrEnabled ? 'HDR' : 'SDR' } });
44+
}
45+
46+
const player = videoPlayer('player', { cloudName: 'prod' });
47+
loadSource(true);
48+
49+
document.getElementById('hdr-toggle').addEventListener('change', function () {
50+
loadSource(this.checked);
51+
});
52+
</script>
53+
54+
<!-- Bootstrap -->
55+
<link
56+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
57+
rel="stylesheet"
58+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
59+
crossorigin="anonymous"
60+
/>
61+
</body>
62+
</html>

‎docs/es-modules/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ <h3 class="mt-4">Code examples:</h3>
6161
<li><a href="./floating-player.html">Floating Player</a></li>
6262
<li><a href="./fluid.html">Fluid Layouts</a></li>
6363
<li><a href="./force-hls-subtitles.html">Force HLS Subtitles</a></li>
64+
<li><a href="./hdr.html">HDR</a></li>
6465
<li><a href="./interaction-area.html">Interaction Area</a></li>
6566
<li><a href="./multiple-players.html">Multiple Players</a></li>
6667
<li><a href="./playlist.html">Playlist</a></li>

‎docs/hdr.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Cloudinary Video Player</title>
6+
<link href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png" rel="icon" type="image/png">
7+
8+
<!-- Bootstrap -->
9+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10+
11+
<!-- highlight.js -->
12+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
13+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
14+
<script>hljs.initHighlightingOnLoad();</script>
15+
16+
<!--
17+
We're loading scripts & style dynamically for development/testing.
18+
Real-world usage would look like this:
19+
20+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
21+
<script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>
22+
-->
23+
24+
<script type="text/javascript" src="./scripts.js"></script>
25+
26+
<script type="text/javascript">
27+
var player;
28+
29+
function loadSource(hdrEnabled) {
30+
player.source('video/examples/hdr', { hdr: hdrEnabled, info: { title: hdrEnabled ? 'HDR' : 'SDR' } });
31+
}
32+
33+
window.addEventListener('load', function(){
34+
player = cloudinary.videoPlayer('player', { cloud_name: 'prod' });
35+
loadSource(true);
36+
37+
document.getElementById('hdr-toggle').addEventListener('change', function() {
38+
loadSource(this.checked);
39+
});
40+
}, false);
41+
</script>
42+
43+
</head>
44+
<body>
45+
<div class="container p-4 col-12 col-md-9 col-xl-6">
46+
<nav class="nav mb-2">
47+
<a href="./index.html">&#60;&#60; Back to examples index</a>
48+
</nav>
49+
<h1>Cloudinary Video Player</h1>
50+
<h3 class="mb-4">HDR</h3>
51+
52+
<div class="form-check mb-2">
53+
<input type="checkbox" class="form-check-input" id="hdr-toggle" checked>
54+
<label class="form-check-label" for="hdr-toggle">Enable HDR</label>
55+
</div>
56+
57+
<video
58+
id="player"
59+
playsinline
60+
controls
61+
muted
62+
autoplay
63+
class="cld-video-player"
64+
width="500">
65+
</video>
66+
67+
<p class="mt-4">
68+
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
69+
</p>
70+
71+
<h3 class="mt-4">Example Code:</h3>
72+
<pre>
73+
<code class="language-html">
74+
&lt;video
75+
id="player"
76+
playsinline
77+
controls
78+
muted
79+
autoplay
80+
class="cld-video-player"
81+
width="500"&gt;
82+
&lt;/video&gt;
83+
</code>
84+
<code class="language-javascript">
85+
player = cloudinary.videoPlayer('player', { cloud_name: 'prod' });
86+
player.source('video/examples/hdr', { hdr: true, info: { title: 'HDR' } });
87+
</code>
88+
</pre>
89+
</div>
90+
91+
</body>
92+
</html>

‎docs/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ <h3 class="mt-4">Some code examples:</h3>
6565
<li><a href="./floating-player.html">Floating Player</a></li>
6666
<li><a href="./fluid.html">Fluid Layouts</a></li>
6767
<li><a href="./force-hls-subtitles-ios.html">Force HLS Subtitles</a></li>
68+
<li><a href="./hdr.html">HDR</a></li>
6869
<li><a href="./interaction-area.html">Interaction Area</a></li>
6970
<li><a href="./live-streaming.html">Live Streaming</a></li>
7071
<li><a href="./multiple-players.html">Multiple Players</a></li>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "cloudinary-video-player",
3-
"version": "3.8.1",
3+
"version": "3.9.0",
44
"description": "Cloudinary Video Player",
55
"author": "Cloudinary",
66
"license": "MIT",

‎src/config/configSchema.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,10 @@
143143
"type": "boolean",
144144
"default": false
145145
},
146+
"hdr": {
147+
"type": "boolean",
148+
"default": false
149+
},
146150
"seekThumbnails": {
147151
"type": "boolean",
148152
"default": true

‎src/plugins/cloudinary/models/video-source/video-source.const.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export const DEFAULT_POSTER_PARAMS = { format: 'jpg', resource_type: 'video' };
33
export const DEFAULT_VIDEO_PARAMS = {
44
resource_type: 'video',
55
type: 'upload',
6+
hdr: false,
67
transformation: [],
78
sourceTransformation: {},
89
sourceTypes: ['auto'],

‎src/plugins/cloudinary/models/video-source/video-source.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,15 @@ class VideoSource extends BaseSource {
210210
}
211211
}
212212

213+
// dr (dynamic range) is not yet exposed by @cloudinary/url-gen, so we use raw_transformation
214+
if (this.hdr() === true && window.matchMedia && window.matchMedia('(dynamic-range: high)').matches) {
215+
opts.transformation = mergeTransformations(opts.transformation, {
216+
fetch_format:'mp4',
217+
video_codec: 'h265',
218+
raw_transformation: 'dr_high'
219+
});
220+
}
221+
213222
const src = appendQueryParams(this.config().url(this.publicId(), opts), this.queryParams());
214223

215224
return {

0 commit comments

Comments
 (0)