Skip to content

Commit 210a235

Browse files
tsitsi
authored
feat(VIDEO-20073): video-specific config (#920)
* feat: fetch video-specific config * feat(VIDEO-20073): video-specific config * chore(VIDEO-20073): video-specific config simplified * chore: update unit test * chore: normalize constructor input * fix: clearer index entry-points and methods * test: video-config e2e * chore: simplify and test build system (#922) * chore: simplify and test build system * docs: transformations example page * chore: refactor and cleanup icons (#923) * chore: video_player_config path * chore: video-config internal analytics
1 parent d97165a commit 210a235

28 files changed

+428
-442
lines changed

‎docs/es-modules/fluid.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ <h3 class="mb-4">Fluid Layouts</h3>
3939
</div>
4040

4141
<script type="module">
42-
import { videoPlayer } from 'cloudinary-video-player';
42+
import videoPlayer from 'cloudinary-video-player/videoPlayer';
4343
import 'cloudinary-video-player/cld-video-player.min.css';
4444

4545
const player = videoPlayer('player', { cloudName: 'demo' });

‎docs/es-modules/profiles.html‎

Lines changed: 60 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@
1919
<h1>Cloudinary Video Player</h1>
2020
<h3 class="mb-4">Profiles</h3>
2121

22-
<h5>Player with default profile</h5>
22+
<p>
23+
Player profiles provide a mechanism to define and save your video player configuration
24+
to your Cloudinary account and then reference this profile as part of your video player setup.
25+
For details, see the <a href="https://cloudinary.com/documentation/video_player_how_to_embed#player_profiles">player profiles documentation</a>.
26+
</p>
27+
28+
<h4 class="mt-4 mb-2">Default profile - applies predefined player configuration</h4>
2329
<video
2430
id="player-default-profile"
2531
class="cld-video-player"
@@ -30,7 +36,7 @@ <h5>Player with default profile</h5>
3036
muted
3137
></video>
3238

33-
<h5>Player with custom profile</h5>
39+
<h4 class="mt-4 mb-2">Custom profile - loads player and source config from profile</h4>
3440
<video
3541
id="player-custom-profile"
3642
class="cld-video-player"
@@ -41,9 +47,31 @@ <h5>Player with custom profile</h5>
4147
muted
4248
></video>
4349

44-
<h5>Player with custom profile and overrides</h5>
50+
<h4 class="mt-4 mb-2">Override player config - profile config overridden by JS player options</h4>
51+
<video
52+
id="player-profile-override"
53+
class="cld-video-player"
54+
width="500"
55+
playsinline
56+
controls
57+
autoplay
58+
muted
59+
></video>
60+
61+
<h4 class="mt-4 mb-2">Override source config - profile transformation overridden by JS source options</h4>
4562
<video
46-
id="player-custom-profile-overrides"
63+
id="player-source-override"
64+
class="cld-video-player"
65+
width="500"
66+
playsinline
67+
controls
68+
autoplay
69+
muted
70+
></video>
71+
72+
<h4 class="mt-4 mb-2">No profile - fetches asset-specific config from publicId/config.json</h4>
73+
<video
74+
id="player-asset-config"
4775
class="cld-video-player"
4876
width="500"
4977
playsinline
@@ -65,35 +93,51 @@ <h5>Player with custom profile and overrides</h5>
6593
import 'cloudinary-video-player/cld-video-player.min.css';
6694

6795
(async () => {
68-
const playerWithDefaultProfile = await player('player-default-profile', {
96+
const defaultPlayer = await player('player-default-profile', {
6997
cloudName: 'demo',
7098
profile: 'cld-default'
7199
});
72100

73-
playerWithDefaultProfile.source('sea_turtle');
101+
defaultPlayer.source('samples/sea-turtle');
74102
})();
75103

76104
(async () => {
77-
const playerWithCustomProfile = await player('player-custom-profile', {
105+
await player('player-custom-profile', {
78106
cloudName: 'prod',
79-
profile: 'myCustomProfile'
107+
profile: 'demo-profile',
108+
publicId: 'samples/sea-turtle',
80109
});
81-
82-
playerWithCustomProfile.source('samples/cld-sample-video');
83110
})();
84111

85112
(async () => {
86-
const playerWithCustomProfileAndOverrides = await cloudinary.player('player-custom-profile-overrides', {
113+
await player('player-profile-override', {
87114
cloudName: 'prod',
88-
profile: 'myCustomProfile',
115+
profile: 'demo-profile',
116+
publicId: 'samples/sea-turtle',
89117
colors: {
90-
base: "#1532a8"
118+
base: '#22004D',
119+
accent: '#FA65C7',
120+
text: '#FF06D2'
91121
},
92-
seekThumbnails: false,
93-
aiHighlightsGraph: true,
94122
});
123+
})();
95124

96-
playerWithCustomProfileAndOverrides.source('samples/cld-sample-video');
125+
(async () => {
126+
await player('player-source-override', {
127+
cloudName: 'prod',
128+
profile: 'demo-profile',
129+
publicId: 'samples/sea-turtle',
130+
transformation: {
131+
effect: 'blur:500'
132+
},
133+
});
134+
})();
135+
136+
(async () => {
137+
await player('player-asset-config', {
138+
cloudName: 'prod',
139+
publicId: 'samples/sea-turtle',
140+
});
97141
})();
98142
</script>
99143

‎docs/es-modules/transformations.html‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -54,34 +54,36 @@ <h4 class="mt-4 mb-2">via data-cld-transformation</h4>
5454

5555
<script type="module">
5656
import 'cloudinary-video-player/cld-video-player.min.css';
57-
import { videoPlayer } from 'cloudinary-video-player';
57+
import player from 'cloudinary-video-player/player';
5858

59-
const player = videoPlayer('player-1', {
60-
cloudName: 'demo'
61-
});
59+
(async () => {
60+
const myPlayer = await player('player-1', {
61+
cloudName: 'demo'
62+
});
6263

63-
player.source({
64-
publicId: 'snow_horses',
65-
info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
66-
transformation: [
67-
{ width: 400, crop: 'limit' },
68-
{ effect: 'blur:500' },
69-
{ effect: 'saturation:-100' }
70-
]
71-
});
64+
myPlayer.source({
65+
publicId: 'snow_horses',
66+
info: { title: 'Snow Horses', subtitle: 'A movie about horses' },
67+
transformation: [
68+
{ width: 400, crop: 'limit' },
69+
{ effect: 'blur:500' },
70+
{ effect: 'saturation:-100' }
71+
]
72+
});
7273

73-
videoPlayer('player-2', {
74-
cloudName: 'demo',
75-
transformation: [
76-
{ width: 400, crop: 'limit' },
77-
{ effect: 'blur:500' },
78-
{ effect: 'saturation:-100' }
79-
]
80-
});
74+
player('player-2', {
75+
cloudName: 'demo',
76+
transformation: [
77+
{ width: 400, crop: 'limit' },
78+
{ effect: 'blur:500' },
79+
{ effect: 'saturation:-100' }
80+
]
81+
});
8182

82-
videoPlayer('player-3', {
83-
cloudName: 'demo'
84-
});
83+
player('player-3', {
84+
cloudName: 'demo'
85+
});
86+
})();
8587
</script>
8688

8789
<!-- Bootstrap -->

0 commit comments

Comments
 (0)