Skip to content

feat: better error message for 423 (processing) #999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tsi merged 8 commits into from
Mar 12, 2026
Merged

feat: better error message for 423 (processing) #999

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ddfe103
chore: align example pages
tsi Mar 12, 2026
6a8a681
fix: pass aspect-ratio to videojs if present
tsi Mar 12, 2026
716bcfd
fix: poster to inherit transformations
tsi Mar 12, 2026
d1377be
feat: better error message for 423 (processing)
tsi Mar 12, 2026
711ac11
chore: filter poster transformations
tsi Mar 12, 2026
653a914
fix: resize transformation handling
tsi Mar 12, 2026
269f1fb
chore: msg.innerHTML
tsi Mar 12, 2026
5e5787c
chore: filter poster transformations
tsi Mar 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions docs/aspect-ratio-crop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,28 @@

<script type="text/javascript">
window.addEventListener('load', function(){
var player1 = cloudinary.videoPlayer('player-1', { cloudName: 'demo' });
player1.source({
var player1 = cloudinary.videoPlayer('player-1', {
Copy link
Copy Markdown
Collaborator Author

@tsi tsi Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For better testing of our VS videojs aspectRatio handling, I changed it to be called in player()

cloudName: 'demo',
publicId: 'sea_turtle',
aspectRatio: '1:1',
cropMode: 'fill'
cropMode: 'fill',
breakpoints: true,
transformation: [
{ effect: 'blur:500' },
{ effect: 'saturation:-100' }
]
Comment on lines +26 to +29
Copy link
Copy Markdown
Collaborator Author

@tsi tsi Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And added a custom transformation to see how they are being merged

});

var player2 = cloudinary.videoPlayer('player-2', { cloudName: 'demo' });
player2.source({
var player2 = cloudinary.videoPlayer('player-2', {
cloudName: 'demo',
publicId: 'sea_turtle',
aspectRatio: '4:3',
cropMode: 'pad',
cropPadColor: 'blue'
});

var player3 = cloudinary.videoPlayer('player-3', { cloudName: 'demo' });
player3.source({
var player3 = cloudinary.videoPlayer('player-3', {
cloudName: 'demo',
publicId: 'sea_turtle',
aspectRatio: '9:16',
cropMode: 'smart'
Expand All @@ -55,8 +60,6 @@ <h4 class="mb-2">fill - crops to fit aspect ratio</h4>
id="player-1"
playsinline
controls
muted
autoplay
Comment on lines -58 to -59
Copy link
Copy Markdown
Collaborator Author

@tsi tsi Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we can see the poater

class="cld-video-player"
width="500">
</video>
Expand All @@ -66,8 +69,6 @@ <h4 class="mt-4 mb-2">pad - letterboxes to fit</h4>
id="player-2"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="500">
</video>
Expand All @@ -77,8 +78,6 @@ <h4 class="mt-4 mb-2">smart with 9:16 (portrait)</h4>
id="player-3"
playsinline
controls
muted
autoplay
class="cld-video-player"
width="280">
</video>
Expand Down
113 changes: 68 additions & 45 deletions docs/breakpoints.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,29 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Breakpoints - Cloudinary Video Player</title>
<title>Cloudinary Video Player</title>
<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">

<!-- Bootstrap -->
<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">

<script type="text/javascript" src="scripts.js"></script>
<!-- highlight.js -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<!--
We're loading scripts & style dynamically for development/testing.
Real-world usage would look like this:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
<script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>

-->

<script type="text/javascript" src="./scripts.js"></script>

<style>
.player-container {
margin-bottom: 30px;
}
.video-url {
margin-top: 15px;
padding: 10px;
Expand All @@ -28,85 +38,98 @@

<script type="text/javascript">
window.addEventListener('load', function(){

const player = cloudinary.videoPlayer('player-with-breakpoints', {
cloudName: 'demo',
breakpoints: true,
maxDpr: 2.0
});
player.source('sea_turtle');

// Display video URL using multiple methods
function updateVideoUrl() {
// Try getting from video element
const videoElement = player.videojs?.el()?.querySelector('video') ||
const videoElement = player.videojs?.el()?.querySelector('video') ||
document.querySelector('#player-with-breakpoints video') ||
document.querySelector('.vjs-tech');

const src = videoElement?.currentSrc || videoElement?.src || '';

if (src) {
document.getElementById('video-url').textContent = src;
return true;
}
return false;
}

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

}, false);
</script>

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

<div class="container p-4">
<h1 class="mb-4">Breakpoints - Responsive Video Resolution</h1>

<p class="lead">
<p class="mb-4">
Breakpoints automatically select the optimal video resolution based on container width and device pixel ratio (DPR).
Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.
</p>

<video
id="player-with-breakpoints"
playsinline
controls
muted
autoplay
class="cld-video-player cld-video-player-skin-dark cld-fluid"
width="500"
></video>

<div class="video-url">
<strong>Video URL:</strong><br>
<span id="video-url">Loading...</span>
</div>

<p class="mt-4">
<a href="https://cloudinary.com/documentation/cloudinary_video_player">Full documentation</a>
</p>

<div class="player-container">
<h3>Breakpoints Example (DPR 2.0)</h3>
<p>The player automatically rounds container width to the nearest rendition [640, 1280, 1920, 3840] and lets Cloudinary handle DPR scaling.</p>

<video
id="player-with-breakpoints"
controls
muted
class="cld-video-player cld-video-player-skin-dark cld-fluid">
</video>

<div class="video-url mt-3">
<strong>Video URL:</strong><br>
<span id="video-url">Loading...</span>
</div>

<details class="mt-3">
<summary><strong>View Code</strong></summary>
<pre><code>const player = cloudinary.videoPlayer('player', {
<h3 class="mt-4">Example Code:</h3>
<pre>
<code class="language-html">
&lt;video
id="player"
controls
muted
autoplay
class="cld-video-player cld-fluid"
width="500"
&gt;&lt;/video&gt;
</code>
<code class="language-javascript">

// Initialize player with breakpoints
const player = cloudinary.videoPlayer('player', {
cloudName: 'demo',
breakpoints: true,
maxDpr: 2.0
});

player.source('sea_turtle');</code></pre>
</details>
</div>
// Load source
player.source('sea_turtle');
</code>
</pre>

<h3 class="mt-5">Configuration Options</h3>
<h3 class="mt-4">Configuration Options</h3>
<ul>
<li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
<li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
<li><strong>Renditions:</strong> [640, 1280, 1920, 3840] - Container width is rounded to nearest value</li>
</ul>

<p class="mt-4">
<a href="./index.html">← Back to Examples</a>
</p>

</div>

</body>
Expand Down
53 changes: 23 additions & 30 deletions docs/es-modules/breakpoints.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Breakpoints - Cloudinary Video Player</title>
<title>Cloudinary Video Player</title>
Copy link
Copy Markdown
Collaborator Author

@tsi tsi Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked cursor to align the breakpoints example with the others

<link
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"
rel="icon"
Expand All @@ -11,9 +11,6 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.player-container {
margin-bottom: 30px;
}
.video-url {
margin-top: 15px;
padding: 10px;
Expand All @@ -38,34 +35,33 @@ <h3 class="mb-4">Breakpoints - Responsive Video Resolution</h3>
Container width is rounded to the nearest rendition [640, 1280, 1920, 3840] and Cloudinary handles DPR scaling.
</p>

<div class="player-container">
<h4 class="mt-4">Breakpoints Example (DPR 2.0)</h4>
<video
id="player-with-breakpoints"
class="cld-video-player"
controls
muted
width="500"
></video>
<video
id="player-with-breakpoints"
class="cld-video-player cld-fluid"
crossorigin="anonymous"
controls
muted
playsinline
width="500"
></video>

<div class="video-url">
<strong>Video URL:</strong><br>
<span id="video-url">Loading...</span>
</div>
<div class="video-url">
<strong>Video URL:</strong><br>
<span id="video-url">Loading...</span>
</div>

<h4 class="mt-4">Configuration</h4>
<ul>
<li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
<li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
<li><strong>Renditions:</strong> [640, 1280, 1920, 3840]</li>
</ul>

<p class="mt-4">
<a href="https://cloudinary.com/documentation/cloudinary_video_player"
>Full documentation</a
>
</p>

<h3 class="mt-4">Configuration Options</h3>
<ul>
<li><code>breakpoints</code> (boolean): Enable/disable breakpoints</li>
<li><code>dpr</code> (number): Device pixel ratio - 1.0, 1.5, or 2.0 (default: 2.0)</li>
<li><strong>Renditions:</strong> [640, 1280, 1920, 3840] - Container width is rounded to nearest value</li>
</ul>
</div>

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

// Display video URL using multiple methods
function updateVideoUrl() {
// Try getting from video element
const videoElement = player.videojs?.el()?.querySelector('video') ||
const videoElement = player.videojs?.el()?.querySelector('video') ||
document.querySelector('#player-with-breakpoints video') ||
document.querySelector('.vjs-tech');

const src = videoElement?.currentSrc || videoElement?.src || '';

if (src) {
document.getElementById('video-url').textContent = src;
return true;
}
return false;
}

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

Expand Down
31 changes: 31 additions & 0 deletions src/components/error-display/error-display.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import videojs from 'video.js';
import { PLAYER_EVENT } from 'utils/consts';

const ErrorDisplay = videojs.getComponent('ErrorDisplay');

class CldErrorDisplay extends ErrorDisplay {
Copy link
Copy Markdown
Collaborator Author

@tsi tsi Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Custom error display component to 1. allow html link and 2. handle the refresh click

content() {
const error = this.player().error();
if (!error) return '';

const wrapper = videojs.dom.createEl('div', { className: 'cld-error-display-content' });
const msg = videojs.dom.createEl('span', { className: 'cld-error-message' });
if (error.isHtml) {
msg.innerHTML = this.localize(error.message);
} else {
msg.textContent = this.localize(error.message);
}
wrapper.appendChild(msg);

const refreshLink = msg.querySelector('.cld-error-refresh');
if (refreshLink) {
refreshLink.onclick = (e) => {
e.preventDefault();
this.player().trigger(PLAYER_EVENT.REFRESH);
};
}
return wrapper;
}
}

export default CldErrorDisplay;
5 changes: 5 additions & 0 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import videojs from 'video.js';
import CldErrorDisplay from './error-display/error-display';
import JumpForwardButton from './jumpButtons/jump-10-plus';
import JumpBackButton from './jumpButtons/jump-10-minus';
import LogoButton from './logoButton/logo-button';
Expand All @@ -6,7 +8,10 @@ import TitleBar from './title-bar/title-bar';
import SourceSwitcherButton from './source-switcher-button/source-switcher-button';
import BigPauseButton from './bigPauseButton/big-pause-button';

videojs.registerComponent('ErrorDisplay', CldErrorDisplay);

export {
CldErrorDisplay,
JumpForwardButton,
JumpBackButton,
LogoButton,
Expand Down
Loading
Loading