diff --git a/docs/es-modules/profiles.html b/docs/es-modules/profiles.html
index f2481395..73195488 100644
--- a/docs/es-modules/profiles.html
+++ b/docs/es-modules/profiles.html
@@ -30,9 +30,31 @@ Player with default profile
muted
>
+ Player with custom profile
+
+
+ Player with custom profile and overrides
+
+
Full documentationFull documentation
@@ -49,6 +71,29 @@ Player with default profile
playerWithDefaultProfile.source('sea_turtle');
})();
+
+ (async () => {
+ const playerWithCustomProfile = await player('player-custom-profile', {
+ cloudName: 'prod',
+ profile: 'myCustomProfile'
+ });
+
+ playerWithCustomProfile.source('samples/cld-sample-video');
+ })();
+
+ (async () => {
+ 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');
+ })();
diff --git a/docs/es-modules/raw-url.html b/docs/es-modules/raw-url.html
index 915a9ddb..617fe7e2 100644
--- a/docs/es-modules/raw-url.html
+++ b/docs/es-modules/raw-url.html
@@ -63,7 +63,7 @@ Video with raw URL - ABR
const player = videoPlayer('player', config);
- player.source('https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_10mb.mp4');
+ player.source('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
const abrPlayer = videoPlayer('abrPlayer', config);
diff --git a/docs/profiles.html b/docs/profiles.html
index 00b09f7c..676a1850 100644
--- a/docs/profiles.html
+++ b/docs/profiles.html
@@ -31,6 +31,29 @@
playerWithDefaultProfile.source('sea_turtle');
}, false);
+
+ window.addEventListener('load', async function() {
+ const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
+ cloudName: 'prod',
+ profile: 'myCustomProfile',
+ });
+
+ playerWithCustomProfile.source('samples/cld-sample-video');
+ }, false);
+
+ 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);
@@ -78,6 +101,87 @@ Example Code:
}, false);
+
+ Player with custom profile
+
+
+ Example Code:
+
+
+
+
+ <video
+ id="player-custom-profile"
+ controls
+ autoplay
+ muted
+ class="cld-video-player"
+ width="500">
+ </video>
+
+
+
+ window.addEventListener('load', async function() {
+ const playerWithCustomProfile = await cloudinary.player('player-custom-profile', {
+ cloudName: 'prod',
+ profile: 'myCustomProfile',
+ });
+
+ playerWithCustomProfile.source('samples/cld-sample-video');
+ }, false);
+
+
+
+ Player with custom profile and overrides
+
+
+ Example Code:
+
+
+
+
+ <video
+ id="player-custom-profile-overrides"
+ controls
+ autoplay
+ muted
+ class="cld-video-player"
+ width="500">
+ </video>
+
+
+
+ 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);
+
+
diff --git a/docs/raw-url.html b/docs/raw-url.html
index 43dcaa5d..dcc5cd5c 100644
--- a/docs/raw-url.html
+++ b/docs/raw-url.html
@@ -35,7 +35,7 @@
player = cloudinary.videoPlayer('player', config);
- player.source('https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_10mb.mp4');
+ player.source('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
adpPlayer = cloudinary.videoPlayer('adpPlayer',config);
@@ -106,7 +106,7 @@ Example Code:
player = cloudinary.videoPlayer('player', config);
- player.source('https://res.cloudinary.com/demo/video/upload/sea_turtle.mp4');
+ player.source('https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4');
adpPlayer = cloudinary.videoPlayer('adpPlayer',config);
diff --git a/src/index.es.js b/src/index.es.js
index da6e2826..f19be260 100644
--- a/src/index.es.js
+++ b/src/index.es.js
@@ -13,7 +13,6 @@ import cloudinary from './index.js';
export const videoPlayer = cloudinary.videoPlayer;
export const videoPlayers = cloudinary.videoPlayers;
-export const videoPlayerWithProfile = cloudinary.videoPlayerWithProfile;
export const player = cloudinary.player;
diff --git a/src/index.js b/src/index.js
index 9a0cf729..252c105e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,10 +29,6 @@ const getPlayers = config => (selector, playerOptions, ready) => {
export const videoPlayer = getVideoPlayer();
export const videoPlayers = getVideoPlayers();
-export const videoPlayerWithProfile = (id, playerOptions, ready) => {
- console.warn('videoPlayerWithProfile method is DEPRECATED and will be removed soon, please use new `player` method instead');
- return getPlayer()(id, playerOptions, ready);
-};
export const player = getPlayer();
export const players = getPlayers();
@@ -51,7 +47,6 @@ const cloudinary = {
...(window.cloudinary || {}),
videoPlayer,
videoPlayers,
- videoPlayerWithProfile,
player,
players,
Cloudinary: {
diff --git a/src/index.videoPlayerWithProfile.js b/src/index.videoPlayerWithProfile.js
deleted file mode 100644
index e739ba95..00000000
--- a/src/index.videoPlayerWithProfile.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// This file is bundled as `videoPlayerWithProfile.js` to be imported as a tree-shaken module.
-
-// Usage:
-// import videoPlayerWithProfile from 'cloudinary-video-player/videoPlayerWithProfile';
-
-export { videoPlayerWithProfile as default } from './index.js';
diff --git a/src/player.js b/src/player.js
index 0c6250bb..21580ed4 100644
--- a/src/player.js
+++ b/src/player.js
@@ -1,23 +1,32 @@
import VideoPlayer from './video-player';
import { defaultProfiles } from './config/profiles';
import { isRawUrl } from './plugins/cloudinary/common';
+import { unsigned_url_prefix } from '@cloudinary/url-gen/backwards/utils/unsigned_url_prefix';
-export const getProfile = async (cloudName, profile) => {
+export const getProfile = async (profile, initOptions) => {
if (Object.keys(defaultProfiles).includes(profile)) {
return defaultProfiles[profile];
}
- if (isRawUrl(profile)) {
- return await fetch(profile, { method: 'GET' }).then(res => res.json());
- }
+ const urlPrefix = unsigned_url_prefix(
+ null,
+ initOptions.cloudName ?? initOptions.cloud_name,
+ initOptions.private_cdn,
+ initOptions.cdn_subdomain,
+ initOptions.secure_cdn_subdomain,
+ initOptions.cname,
+ initOptions.secure,
+ initOptions.secure_distribution,
+ );
- throw new Error('Custom profiles will be supported soon, please use one of default profiles: "cldDefault", "cldLooping" or "cldAdaptiveStream"');
+ const profileUrl = isRawUrl(profile) ? profile : `${urlPrefix}/_applet_/video_service/video_player_profiles/${profile.replaceAll(' ', '+')}.json`;
+ return fetch(profileUrl, { method: 'GET' }).then(res => res.json());
};
const player = async (elem, initOptions, ready) => {
const { profile, ...otherInitOptions } = initOptions;
try {
- const profileOptions = profile ? await getProfile(otherInitOptions.cloud_name, profile) : {};
+ const profileOptions = profile ? await getProfile(profile, otherInitOptions) : {};
const options = Object.assign({}, profileOptions.playerOptions, otherInitOptions);
const videoPlayer = new VideoPlayer(elem, options, ready);
diff --git a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts
index c198ffbf..7f6ff6cb 100644
--- a/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts
+++ b/test/e2e/specs/linksConsoleErrorsEsmPage.spec.ts
@@ -11,6 +11,7 @@ const ESM_URL = 'https://cld-vp-esm-pages.netlify.app/';
for (const link of ESM_LINKS) {
vpTest(`Test console errors on link ${link.name}`, async ({ page, consoleErrors, vpExamples }) => {
vpTest.skip(link.name === 'Adaptive Streaming', 'Flaky on CI');
+ vpTest.skip(link.name === 'Raw URL', 'Flaky');
/**
* Navigate to ESM Imports examples page
*/
diff --git a/webpack/es6.config.js b/webpack/es6.config.js
index 1e82ee76..f3bea539 100644
--- a/webpack/es6.config.js
+++ b/webpack/es6.config.js
@@ -13,7 +13,6 @@ module.exports = merge(webpackCommon, {
entry: {
'cld-video-player': './index.es.js', // default
'videoPlayer': './index.videoPlayer.js',
- 'videoPlayerWithProfile': './index.videoPlayerWithProfile.js',
'player': './index.player.js',
'all': './index.all.js'
},