Skip to content

feat(VIDEO-20073): video-specific config #920

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

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

feat(VIDEO-20073): video-specific config #920

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
694ef94
feat: fetch video-specific config
tsi Oct 23, 2025
cdda3a2
feat(VIDEO-20073): video-specific config
tsi Oct 26, 2025
fcfa603
chore(VIDEO-20073): video-specific config simplified
tsi Oct 26, 2025
ce0f2ac
chore: update unit test
tsi Oct 26, 2025
2b9fcbb
chore: normalize constructor input
tsi Oct 26, 2025
b342659
fix: clearer index entry-points and methods
tsi Oct 27, 2025
3efca4a
test: video-config e2e
tsi Oct 27, 2025
2a93020
chore: simplify and test build system (#922)
tsi Oct 30, 2025
8c71e04
Merge branch 'master' into VIDEO-20073-video-config
tsi Oct 30, 2025
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
76 changes: 60 additions & 16 deletions docs/es-modules/profiles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,13 @@
<h1>Cloudinary Video Player</h1>
<h3 class="mb-4">Profiles</h3>

<h5>Player with default profile</h5>
<p>
Player profiles provide a mechanism to define and save your video player configuration
to your Cloudinary account and then reference this profile as part of your video player setup.
For details, see the <a href="https://cloudinary.com/documentation/video_player_how_to_embed#player_profiles">player profiles documentation</a>.
</p>

<h4 class="mt-4 mb-2">Default profile - applies predefined player configuration</h4>
<video
id="player-default-profile"
class="cld-video-player"
Expand All @@ -30,7 +36,7 @@ <h5>Player with default profile</h5>
muted
></video>

<h5>Player with custom profile</h5>
<h4 class="mt-4 mb-2">Custom profile - loads player and source config from profile</h4>
<video
id="player-custom-profile"
class="cld-video-player"
Expand All @@ -41,9 +47,31 @@ <h5>Player with custom profile</h5>
muted
></video>

<h5>Player with custom profile and overrides</h5>
<h4 class="mt-4 mb-2">Override player config - profile config overridden by JS player options</h4>
<video
id="player-profile-override"
class="cld-video-player"
width="500"
playsinline
controls
autoplay
muted
></video>

<h4 class="mt-4 mb-2">Override source config - profile transformation overridden by JS source options</h4>
<video
id="player-custom-profile-overrides"
id="player-source-override"
class="cld-video-player"
width="500"
playsinline
controls
autoplay
muted
></video>

<h4 class="mt-4 mb-2">No profile - fetches asset-specific config from publicId/config.json</h4>
<video
id="player-asset-config"
class="cld-video-player"
width="500"
playsinline
Expand All @@ -65,35 +93,51 @@ <h5>Player with custom profile and overrides</h5>
import 'cloudinary-video-player/cld-video-player.min.css';

(async () => {
const playerWithDefaultProfile = await player('player-default-profile', {
const defaultPlayer = await player('player-default-profile', {
cloudName: 'demo',
profile: 'cld-default'
});

playerWithDefaultProfile.source('sea_turtle');
defaultPlayer.source('samples/sea-turtle');
})();

(async () => {
const playerWithCustomProfile = await player('player-custom-profile', {
await player('player-custom-profile', {
cloudName: 'prod',
profile: 'myCustomProfile'
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
});

playerWithCustomProfile.source('samples/cld-sample-video');
})();

(async () => {
const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
await player('player-profile-override', {
cloudName: 'prod',
profile: 'myCustomProfile',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
colors: {
base: "#1532a8"
base: '#22004D',
accent: '#FA65C7',
text: '#FF06D2'
},
seekThumbnails: false,
aiHighlightsGraph: true,
});
})();

playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
(async () => {
await player('player-source-override', {
cloudName: 'prod',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
transformation: {
effect: 'blur:500'
},
});
})();

(async () => {
await player('player-asset-config', {
cloudName: 'prod',
publicId: 'samples/sea-turtle',
});
})();
</script>

Expand Down
202 changes: 111 additions & 91 deletions docs/profiles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,35 +24,51 @@

<script type="text/javascript">
window.addEventListener('load', async () => {
const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
const player = await cloudinary.player('player-default-profile', {
cloudName: 'demo',
profile: 'cld-default',
});

playerWithDefaultProfile.source('sea_turtle');
player.source('samples/sea-turtle');
}, false);

window.addEventListener('load', async function() {
const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
window.addEventListener('load', async () => {
await cloudinary.player('player-custom-profile', {
cloudName: 'prod',
profile: 'myCustomProfile',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
});

playerWithCustomProfile.source('samples/cld-sample-video');
}, false);

window.addEventListener('load', async function() {
const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
window.addEventListener('load', async () => {
await cloudinary.player('player-profile-override', {
cloudName: 'prod',
profile: 'myCustomProfile',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
colors: {
base: "#1532a8"
base: '#22004D',
accent: '#FA65C7',
text: '#FF06D2'
},
seekThumbnails: false,
aiHighlightsGraph: true,
});
}, false);

playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
window.addEventListener('load', async () => {
await cloudinary.player('player-source-override', {
cloudName: 'prod',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
transformation: {
effect: 'blur:500'
},
});
}, false);

window.addEventListener('load', async () => {
await cloudinary.player('player-asset-config', {
cloudName: 'prod',
publicId: 'samples/sea-turtle',
});
}, false);
</script>
</head>
Expand All @@ -64,7 +80,13 @@
<h1>Cloudinary Video Player</h1>
<h3 class="mb-4">Profiles</h3>

<h5>Player with default profile</h5>
<p>
Player profiles provide a mechanism to define and save your video player configuration
to your Cloudinary account and then reference this profile as part of your video player setup.
For details, see the <a href="https://cloudinary.com/documentation/video_player_how_to_embed#player_profiles">player profiles documentation</a>.
</p>

<h4 class="mt-4 mb-2">Default profile - applies predefined player configuration</h4>
<video
id="player-default-profile"
playsinline
Expand All @@ -75,34 +97,7 @@ <h5>Player with default profile</h5>
width="500">
</video>

<h3 class="mt-4">Example Code:</h3>

<pre>
<code class="language-html">

&lt;video
id="player-default-profile"
controls
autoplay
muted
class="cld-video-player"
width="500"&gt;
&lt;/video&gt;

</code>
<code class="language-javascript">
window.addEventListener('load', async function() {
const playerWithDefaultProfile = await cloudinary.player('player-default-profile', {
cloudName: 'demo',
profile: 'cld-default',
});

playerWithDefaultProfile.source('sea_turtle');
}, false);
</code>
</pre>

<h5>Player with custom profile</h5>
<h4 class="mt-4 mb-2">Custom profile - loads player and source config from profile</h4>
<video
id="player-custom-profile"
playsinline
Expand All @@ -113,36 +108,31 @@ <h5>Player with custom profile</h5>
width="500">
</video>

<h3 class="mt-4">Example Code:</h3>

<pre>
<code class="language-html">

&lt;video
id="player-custom-profile"
controls
autoplay
muted
class="cld-video-player"
width="500"&gt;
&lt;/video&gt;

</code>
<code class="language-javascript">
window.addEventListener('load', async function() {
const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
cloudName: 'prod',
profile: 'myCustomProfile',
});
<h4 class="mt-4 mb-2">Override player config - profile config overridden by JS player options</h4>
<video
id="player-profile-override"
playsinline
controls
autoplay
muted
class="cld-video-player"
width="500">
</video>

playerWithCustomProfile.source('samples/cld-sample-video');
}, false);
</code>
</pre>
<h4 class="mt-4 mb-2">Override source config - profile transformation overridden by JS source options</h4>
<video
id="player-source-override"
playsinline
controls
autoplay
muted
class="cld-video-player"
width="500">
</video>

<h5>Player with custom profile and overrides</h5>
<h4 class="mt-4 mb-2">No profile - fetches asset-specific config from publicId/config.json</h4>
<video
id="player-custom-profile-overrides"
id="player-asset-config"
playsinline
controls
autoplay
Expand All @@ -151,38 +141,68 @@ <h5>Player with custom profile and overrides</h5>
width="500">
</video>

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

<h3 class="mt-4">Example Code:</h3>
<pre>
<code class="language-html">

&lt;video
id="player-custom-profile-overrides"
id="player-custom-profile"
controls
autoplay
muted
class="cld-video-player"
width="500"&gt;
&lt;/video&gt;
</code>
<code class="language-javascript">
// Load profile configuration with source() method
const player = await cloudinary.player('player-default-profile', {
cloudName: 'demo',
profile: 'cld-default',
});

player.source('samples/sea-turtle');

// Load profile configuration with publicId
await cloudinary.player('player-custom-profile', {
cloudName: 'prod',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
});

// Override player config (colors) - JS options take precedence
await cloudinary.player('player-profile-override', {
cloudName: 'prod',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
colors: {
base: '#22004D',
accent: '#FA65C7',
text: '#FF06D2'
},
});

// Override source config (transformation) - JS options take precedence
await cloudinary.player('player-source-override', {
cloudName: 'prod',
profile: 'demo-profile',
publicId: 'samples/sea-turtle',
transformation: {
effect: 'blur:500'
},
});

</code>
<code class="language-javascript">
window.addEventListener('load', async function() {
const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
cloudName: 'prod',
profile: 'myCustomProfile',
colors: {
base: "#1532a8"
},
seekThumbnails: false,
aiHighlightsGraph: true,
});

playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
}, false);
</code>
</pre>
</div>
// No profile - fetches config from asset
await cloudinary.player('player-asset-config', {
cloudName: 'prod',
publicId: 'samples/sea-turtle',
});
</code>
</pre>
</div>

</body>
</html>
Loading