Skip to content

Commit 92dc982

Browse files
tsitsi
authored
feat: better error message for 423 (processing) (#999)
* chore: align example pages * fix: pass aspect-ratio to videojs if present * fix: poster to inherit transformations * feat: better error message for 423 (processing) * chore: filter poster transformations * fix: resize transformation handling * chore: msg.innerHTML * chore: filter poster transformations
1 parent 9a09051 commit 92dc982

File tree

13 files changed

+270
-160
lines changed

13 files changed

+270
-160
lines changed

‎docs/aspect-ratio-crop.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,28 @@
1717

1818
<script type="text/javascript">
1919
window.addEventListener('load', function(){
20-
var player1 = cloudinary.videoPlayer('player-1', { cloudName: 'demo' });
21-
player1.source({
20+
var player1 = cloudinary.videoPlayer('player-1', {
21+
cloudName: 'demo',
2222
publicId: 'sea_turtle',
2323
aspectRatio: '1:1',
24-
cropMode: 'fill'
24+
cropMode: 'fill',
25+
breakpoints: true,
26+
transformation: [
27+
{ effect: 'blur:500' },
28+
{ effect: 'saturation:-100' }
29+
]
2530
});
2631

27-
var player2 = cloudinary.videoPlayer('player-2', { cloudName: 'demo' });
28-
player2.source({
32+
var player2 = cloudinary.videoPlayer('player-2', {
33+
cloudName: 'demo',
2934
publicId: 'sea_turtle',
3035
aspectRatio: '4:3',
3136
cropMode: 'pad',
3237
cropPadColor: 'blue'
3338
});
3439

35-
var player3 = cloudinary.videoPlayer('player-3', { cloudName: 'demo' });
36-
player3.source({
40+
var player3 = cloudinary.videoPlayer('player-3', {
41+
cloudName: 'demo',
3742
publicId: 'sea_turtle',
3843
aspectRatio: '9:16',
3944
cropMode: 'smart'
@@ -55,8 +60,6 @@ <h4 class="mb-2">fill - crops to fit aspect ratio</h4>
5560
id="player-1"
5661
playsinline
5762
controls
58-
muted
59-
autoplay
6063
class="cld-video-player"
6164
width="500">
6265
</video>
@@ -66,8 +69,6 @@ <h4 class="mt-4 mb-2">pad - letterboxes to fit</h4>
6669
id="player-2"
6770
playsinline
6871
controls
69-
muted
70-
autoplay
7172
class="cld-video-player"
7273
width="500">
7374
</video>
@@ -77,8 +78,6 @@ <h4 class="mt-4 mb-2">smart with 9:16 (portrait)</h4>
7778
id="player-3"
7879
playsinline
7980
controls
80-
muted
81-
autoplay
8281
class="cld-video-player"
8382
width="280">
8483
</video>

‎docs/breakpoints.html‎

Lines changed: 68 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,29 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>Breakpoints - Cloudinary Video Player</title>
5+
<title>Cloudinary Video Player</title>
76
<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">
87

98
<!-- Bootstrap -->
109
<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">
1110

12-
<script type="text/javascript" src="scripts.js"></script>
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+
25+
<script type="text/javascript" src="./scripts.js"></script>
1326

1427
<style>
15-
.player-container {
16-
margin-bottom: 30px;
17-
}
1828
.video-url {
1929
margin-top: 15px;
2030
padding: 10px;
@@ -28,85 +38,98 @@
2838

2939
<script type="text/javascript">
3040
window.addEventListener('load', function(){
31-
41+
3242
const player = cloudinary.videoPlayer('player-with-breakpoints', {
3343
cloudName: 'demo',
3444
breakpoints: true,
3545
maxDpr: 2.0
3646
});
3747
player.source('sea_turtle');
3848

39-
// Display video URL using multiple methods
4049
function updateVideoUrl() {
41-
// Try getting from video element
42-
const videoElement = player.videojs?.el()?.querySelector('video') ||
50+
const videoElement = player.videojs?.el()?.querySelector('video') ||
4351
document.querySelector('#player-with-breakpoints video') ||
4452
document.querySelector('.vjs-tech');
45-
53+
4654
const src = videoElement?.currentSrc || videoElement?.src || '';
47-
55+
4856
if (src) {
4957
document.getElementById('video-url').textContent = src;
5058
return true;
5159
}
5260
return false;
5361
}
5462

55-
// Update URL when video source is loaded
5663
player.on('loadedmetadata', updateVideoUrl);
5764

5865
}, false);
5966
</script>
6067

6168
</head>
6269
<body>
70+
<div class="container p-4 col-12 col-md-9 col-xl-6">
71+
<nav class="nav mb-2">
72+
<a href="./index.html">&#60;&#60; Back to examples index</a>
73+
</nav>
74+
<h1>Cloudinary Video Player</h1>
75+
<h3 class="mb-4">Breakpoints - Responsive Video Resolution</h3>
6376

64-
<div class="container p-4">
65-
<h1 class="mb-4">Breakpoints - Responsive Video Resolution</h1>
66-
67-
<p class="lead">
77+
<p class="mb-4">
6878
Breakpoints automatically select the optimal video resolution based on container width and device pixel ratio (DPR).
79+
Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.
80+
</p>
81+
82+
<video
83+
id="player-with-breakpoints"
84+
playsinline
85+
controls
86+
muted
87+
autoplay
88+
class="cld-video-player cld-video-player-skin-dark cld-fluid"
89+
width="500"
90+
></video>
91+
92+
<div class="video-url">
93+
<strong>Video URL:</strong><br>
94+
<span id="video-url">Loading...</span>
95+
</div>
96+
97+
<p class="mt-4">
98+
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
6999
</p>
70100

71-
<div class="player-container">
72-
<h3>Breakpoints Example (DPR 2.0)</h3>
73-
<p>The player automatically rounds container width to the nearest rendition [640, 1280, 1920, 3840] and lets Cloudinary handle DPR scaling.</p>
74-
75-
<video
76-
id="player-with-breakpoints"
77-
controls
78-
muted
79-
class="cld-video-player cld-video-player-skin-dark cld-fluid">
80-
</video>
81-
82-
<div class="video-url mt-3">
83-
<strong>Video URL:</strong><br>
84-
<span id="video-url">Loading...</span>
85-
</div>
86-
87-
<details class="mt-3">
88-
<summary><strong>View Code</strong></summary>
89-
<pre><code>const player = cloudinary.videoPlayer('player', {
101+
<h3 class="mt-4">Example Code:</h3>
102+
<pre>
103+
<code class="language-html">
104+
&lt;video
105+
id="player"
106+
controls
107+
muted
108+
autoplay
109+
class="cld-video-player cld-fluid"
110+
width="500"
111+
&gt;&lt;/video&gt;
112+
</code>
113+
<code class="language-javascript">
114+
115+
// Initialize player with breakpoints
116+
const player = cloudinary.videoPlayer('player', {
90117
cloudName: 'demo',
91118
breakpoints: true,
92119
maxDpr: 2.0
93120
});
94121

95-
player.source('sea_turtle');</code></pre>
96-
</details>
97-
</div>
122+
// Load source
123+
player.source('sea_turtle');
124+
</code>
125+
</pre>
98126

99-
<h3 class="mt-5">Configuration Options</h3>
127+
<h3 class="mt-4">Configuration Options</h3>
100128
<ul>
101129
<li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
102130
<li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
103131
<li><strong>Renditions:</strong> [640, 1280, 1920, 3840] - Container width is rounded to nearest value</li>
104132
</ul>
105-
106-
<p class="mt-4">
107-
<a href="./index.html">← Back to Examples</a>
108-
</p>
109-
110133
</div>
111134

112135
</body>

‎docs/es-modules/breakpoints.html‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Breakpoints - Cloudinary Video Player</title>
5+
<title>Cloudinary Video Player</title>
66
<link
77
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"
88
rel="icon"
@@ -11,9 +11,6 @@
1111
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1313
<style>
14-
.player-container {
15-
margin-bottom: 30px;
16-
}
1714
.video-url {
1815
margin-top: 15px;
1916
padding: 10px;
@@ -38,34 +35,33 @@ <h3 class="mb-4">Breakpoints - Responsive Video Resolution</h3>
3835
Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.
3936
</p>
4037

41-
<div class="player-container">
42-
<h4 class="mt-4">Breakpoints Example (DPR 2.0)</h4>
43-
<video
44-
id="player-with-breakpoints"
45-
class="cld-video-player"
46-
controls
47-
muted
48-
width="500"
49-
></video>
38+
<video
39+
id="player-with-breakpoints"
40+
class="cld-video-player cld-fluid"
41+
crossorigin="anonymous"
42+
controls
43+
muted
44+
playsinline
45+
width="500"
46+
></video>
5047

51-
<div class="video-url">
52-
<strong>Video URL:</strong><br>
53-
<span id="video-url">Loading...</span>
54-
</div>
48+
<div class="video-url">
49+
<strong>Video URL:</strong><br>
50+
<span id="video-url">Loading...</span>
5551
</div>
5652

57-
<h4 class="mt-4">Configuration</h4>
58-
<ul>
59-
<li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
60-
<li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
61-
<li><strong>Renditions:</strong> [640, 1280, 1920, 3840]</li>
62-
</ul>
63-
6453
<p class="mt-4">
6554
<a href="https://cloudinary.com/documentation/cloudinary_video_player"
6655
>Full documentation</a
6756
>
6857
</p>
58+
59+
<h3 class="mt-4">Configuration Options</h3>
60+
<ul>
61+
<li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
62+
<li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
63+
<li><strong>Renditions:</strong> [640, 1280, 1920, 3840] - Container width is rounded to nearest value</li>
64+
</ul>
6965
</div>
7066

7167
<script type="module">
@@ -79,23 +75,20 @@ <h4 class="mt-4">Configuration</h4>
7975
});
8076
player.source('sea_turtle');
8177

82-
// Display video URL using multiple methods
8378
function updateVideoUrl() {
84-
// Try getting from video element
85-
const videoElement = player.videojs?.el()?.querySelector('video') ||
79+
const videoElement = player.videojs?.el()?.querySelector('video') ||
8680
document.querySelector('#player-with-breakpoints video') ||
8781
document.querySelector('.vjs-tech');
88-
82+
8983
const src = videoElement?.currentSrc || videoElement?.src || '';
90-
84+
9185
if (src) {
9286
document.getElementById('video-url').textContent = src;
9387
return true;
9488
}
9589
return false;
9690
}
9791

98-
// Update URL when video source is loaded
9992
player.on('loadedmetadata', updateVideoUrl);
10093
</script>
10194

‎src/components/error-display/error-display.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import videojs from 'video.js';
2+
import { PLAYER_EVENT } from 'utils/consts';
3+
4+
const ErrorDisplay = videojs.getComponent('ErrorDisplay');
5+
6+
class CldErrorDisplay extends ErrorDisplay {
7+
content() {
8+
const error = this.player().error();
9+
if (!error) return '';
10+
11+
const wrapper = videojs.dom.createEl('div', { className: 'cld-error-display-content' });
12+
const msg = videojs.dom.createEl('span', { className: 'cld-error-message' });
13+
if (error.isHtml) {
14+
msg.innerHTML = this.localize(error.message);
15+
} else {
16+
msg.textContent = this.localize(error.message);
17+
}
18+
wrapper.appendChild(msg);
19+
20+
const refreshLink = msg.querySelector('.cld-error-refresh');
21+
if (refreshLink) {
22+
refreshLink.onclick = (e) => {
23+
e.preventDefault();
24+
this.player().trigger(PLAYER_EVENT.REFRESH);
25+
};
26+
}
27+
return wrapper;
28+
}
29+
}
30+
31+
export default CldErrorDisplay;

‎src/components/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import videojs from 'video.js';
2+
import CldErrorDisplay from './error-display/error-display';
13
import JumpForwardButton from './jumpButtons/jump-10-plus';
24
import JumpBackButton from './jumpButtons/jump-10-minus';
35
import LogoButton from './logoButton/logo-button';
@@ -6,7 +8,10 @@ import TitleBar from './title-bar/title-bar';
68
import SourceSwitcherButton from './source-switcher-button/source-switcher-button';
79
import BigPauseButton from './bigPauseButton/big-pause-button';
810

11+
videojs.registerComponent('ErrorDisplay', CldErrorDisplay);
12+
913
export {
14+
CldErrorDisplay,
1015
JumpForwardButton,
1116
JumpBackButton,
1217
LogoButton,

0 commit comments

Comments
 (0)