Skip to content

Commit 99dd5fa

Browse files
aman-imagekitaman-imagekit
committed
fix(video-player): update video sources and player options across examples to use new demo links and consistent imagekitId
1 parent 283897e commit 99dd5fa

11 files changed

Lines changed: 196 additions & 165 deletions

File tree

‎examples/javascript/src/abs.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { formatObjectAsCode } from './codegen';
44

55
// --- Actual Player Initialization (single source of truth) ---
66
const playerOptions = {
7-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
7+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
88
logo: {
99
showLogo: true,
1010
logoImageUrl: 'https://imagekit.io/icons/icon-144x144.png',
@@ -17,15 +17,15 @@ const videoJsOptions = {
1717
};
1818

1919
const srcConfigDash = {
20-
src: 'https://stage-ik.imagekit.io/nnstage/Videos/sample_1280x720_surfing_with_audio.mp4',
20+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
2121
abs: {
2222
protocol: 'dash',
2323
sr: [240, 360, 720, 1080],
2424
},
2525
};
2626

2727
const srcConfigHls = {
28-
src: 'https://stage-ik.imagekit.io/nnstage/Videos/sample_1280x720_surfing_with_audio.mp4',
28+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
2929
abs: {
3030
protocol: 'hls',
3131
sr: [240, 360, 720, 1080],

‎examples/javascript/src/chapters.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { buildPlayerInitCode, formatObjectAsCode } from './codegen';
55

66
// --- Actual Player Initialization (single source of truth) ---
77
const playerOptions = {
8-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
8+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
99
logo: {
1010
showLogo: true,
1111
logoImageUrl: 'https://imagekit.io/icons/icon-144x144.png',
@@ -17,8 +17,7 @@ const videoJsOptions = {
1717
muted: true,
1818
};
1919

20-
const videoSrc = 'https://stage-ik.imagekit.io/a8fli6vdg/New%20Folder33/JackMa_RuBbxVpuX.mp4?updatedAt=1762764326271&version=yashtest3&ik=debug=true';
21-
20+
const videoSrc = 'https://ik.imagekit.io/ikmedia/docs/video-player/subtitle_chapter/demo.mp4';
2221
// Method 1: Auto-generate chapters (AI)
2322
const srcConfigAuto = {
2423
src: videoSrc,
@@ -45,7 +44,7 @@ const srcConfigAuto = {
4544
const srcConfigUrl = {
4645
src: videoSrc,
4746
chapters: {
48-
url: 'https://ik.imagekit.io/zuqlyov9d/chapters.vtt', // Replace with your VTT file URL
47+
url: 'https://ik.imagekit.io/ikmedia/docs/video-player/subtitle_chapter/demo.vtt', // Replace with your VTT file URL
4948
},
5049
};
5150

@@ -54,9 +53,10 @@ const srcConfigManual = {
5453
src: videoSrc,
5554
chapters: {
5655
0: 'Introduction',
57-
20: 'Main Content',
58-
30: 'Key Points',
59-
60: 'Conclusion',
56+
146: 'Main Content',
57+
302: 'Advanced Topics',
58+
443: 'Q&A Session',
59+
563: 'Conclusion'
6060
},
6161
};
6262

‎examples/javascript/src/floating-window.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { buildPlayerInitCode, formatObjectAsCode } from './codegen';
44

55
// --- Actual Player Initialization (single source of truth) ---
66
const playerOptions = {
7-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
7+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
88
floatingWhenNotVisible: 'right',
99
logo: {
1010
showLogo: true,

‎examples/javascript/src/logo.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { buildPlayerInitCode, formatObjectAsCode } from './codegen';
44

55
// --- Actual Player Initialization (single source of truth) ---
66
const playerOptions = {
7-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
7+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
88
logo: {
99
showLogo: true,
1010
logoImageUrl: 'https://imagekit.io/icons/icon-144x144.png',
@@ -13,7 +13,7 @@ const playerOptions = {
1313
};
1414

1515
const srcConfig = {
16-
src: 'https://ik.imagekit.io/zuqlyov9d/example_video_2.mp4',
16+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
1717
};
1818

1919
const codeToDisplay = buildPlayerInitCode({

‎examples/javascript/src/playlist.ts‎

Lines changed: 19 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import { videoPlayer } from '@imagekit/video-player';
22
import '@imagekit/video-player/styles.css';
33
import { formatObjectAsCode } from './codegen';
44

5-
// --- Actual Player Initialization ---
6-
// --- Actual Player Initialization (single source of truth) ---
75
const playerOptions = {
8-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
6+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
97
logo: {
108
showLogo: true,
119
logoImageUrl: 'https://imagekit.io/icons/icon-144x144.png',
@@ -20,44 +18,35 @@ const videoJsOptions = {
2018
const playlistConfig = {
2119
sources: [
2220
{
23-
src: 'https://ik.imagekit.io/demo/sample-video.mp4?tr=rt-180,so-2&v=1234',
24-
info: {
25-
title: 'Sample Video',
26-
description: 'This is a sample video demonstrating the playlist functionality with a description.'
27-
},
28-
transformation: [
29-
{
30-
width: 1000,
31-
height: 500,
32-
},
33-
],
21+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/horses.mp4",
22+
info: { title: "Horses Running", description: "Horses grazing in the field" },
3423
},
3524
{
36-
src: 'https://ik.imagekit.io/zuqlyov9d/SEO-friendly%20file%20names.mp4',
37-
info: { title: 'Another Video' },
38-
},
39-
{
40-
src: 'https://ik.imagekit.io/zuqlyov9d/example_video_2.mp4',
41-
info: {
42-
title: 'Third Time Is The Charm',
43-
description: 'This video shows how descriptions appear in playlist items when provided.'
25+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/lion.mp4",
26+
info: {
27+
title: "Lion",
28+
description: "Lion roaming in the wild",
4429
},
4530
},
4631
{
47-
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
48-
info: { title: 'A very long name. It will not fit in the single line.' },
32+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/dog_running.mp4",
33+
info: { title: "Dog Running" },
4934
},
5035
{
51-
src: 'https://ik.imagekit.io/zuqlyov9d/SEO-friendly%20file%20names.mp4',
52-
info: {
53-
title: 'Video 5',
54-
description: 'Some playlist items have descriptions while others do not, demonstrating the optional nature of this field.'
36+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/man_smiling.mp4",
37+
info: {
38+
title: "Man Smiling",
39+
description: "Man smiling at the camera",
5540
},
5641
},
5742
{
58-
src: 'https://ik.imagekit.io/zuqlyov9d/example_video_2.mp4',
59-
info: { title: 'Video 6' },
43+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/rhino.mp4",
44+
info: { title: "Rhino at the zoo"},
6045
},
46+
{
47+
src: "https://ik.imagekit.io/demo/sample-video.mp4",
48+
info: { title: "Bird on branch"}
49+
}
6150
],
6251
options: {
6352
autoAdvance: 3,

‎examples/javascript/src/recommendations.ts‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { buildPlayerInitCode, formatObjectAsCode } from './codegen';
44

55
// --- Actual Player Initialization (single source of truth) ---
66
const playerOptions = {
7-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
7+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
88
logo: {
99
showLogo: true,
1010
logoImageUrl: 'https://imagekit.io/icons/icon-144x144.png',
@@ -17,20 +17,35 @@ const videoJsOptions = {
1717
};
1818

1919
const srcConfig = {
20-
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
20+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/horses.mp4",
21+
info: { title: "Horses Running", description: "Horses grazing in the field" },
2122
recommendations: [
2223
{
23-
src: 'https://ik.imagekit.io/zuqlyov9d/SEO-friendly%20file%20names.mp4',
24-
info: { title: 'Watch This Next!' },
24+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/lion.mp4",
25+
info: {
26+
title: "Lion",
27+
description: "Lion roaming in the wild",
28+
},
2529
},
2630
{
27-
src: 'https://ik.imagekit.io/zuqlyov9d/example_video_2.mp4',
28-
info: { title: 'Or Maybe This One?' },
31+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/dog_running.mp4",
32+
info: { title: "Dog Running" },
2933
},
3034
{
31-
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
32-
info: { title: 'Watch The First One Again' },
35+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/man_smiling.mp4",
36+
info: {
37+
title: "Man Smiling",
38+
description: "Man smiling at the camera",
39+
},
3340
},
41+
{
42+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/rhino.mp4",
43+
info: { title: "Rhino at the zoo" },
44+
},
45+
{
46+
src: "https://ik.imagekit.io/demo/sample-video.mp4",
47+
info: { title: "Bird on branch"}
48+
}
3449
],
3550
};
3651

‎examples/javascript/src/seek-thumbnails.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { buildPlayerInitCode, formatObjectAsCode } from './codegen';
44

55
// --- Actual Player Initialization (single source of truth) ---
66
const playerOptions = {
7-
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
7+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
88
seekThumbnails: true,
99
logo: {
1010
showLogo: true,
@@ -18,7 +18,7 @@ const videoJsOptions = {
1818
};
1919

2020
const srcConfig = {
21-
src: 'https://stage-ik.imagekit.io/a8fli6vdg/New%20Folder33/JackMa_RuBbxVpuX.mp4?updatedAt=1762764326271&version=yashtest3&ik=debug=true',
21+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
2222
};
2323

2424
const codeToDisplay = buildPlayerInitCode({

‎examples/javascript/src/shoppable.ts‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -13,89 +13,85 @@ const playerOptions = {
1313
};
1414

1515
const srcConfig = {
16-
src: 'https://ik.imagekit.io/a1yisxurxo/aman/shoppable%20vidoes/shoppable_demo.mp4?updatedAt=1752633516273',
16+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/video.mp4",
1717
shoppable: {
1818
products: [
1919
{
2020
productId: 1,
21-
productName: 'Classic Aviators',
22-
highlightTime: { start: 2, end: 6 }, // Highlight from 0s to 6s
23-
imageUrl:
24-
'https://ik.imagekit.io/a1yisxurxo/aman/shoppable%20vidoes/glasses3.jpeg?updatedAt=1752632518026',
21+
productName: "Classic Aviators",
22+
highlightTime: { start: 2, end: 6 },
23+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/aviators.jpeg",
2524
hotspots: [
2625
{
27-
time: '00:06',
28-
x: '50%',
29-
y: '25%',
30-
tooltipPosition: 'left',
31-
clickUrl: 'https://images.pexels.com/photos/701877/pexels-photo-701877.jpeg',
32-
},
26+
time: "00:06",
27+
x: "48%",
28+
y: "35%",
29+
tooltipPosition: "left",
30+
clickUrl: "https://images.pexels.com/photos/701877/pexels-photo-701877.jpeg"
31+
}
3332
],
3433
onHover: {
35-
action: 'overlay',
36-
args: 'Click to see this product in the video',
34+
action: "overlay",
35+
args: "Click to see this product in the video"
3736
},
3837
onClick: {
39-
action: 'seek',
38+
action: "seek",
4039
pause: 5,
41-
args: { time: '00:06' },
42-
},
40+
args: { time: "00:06" }
41+
}
4342
},
4443
{
4544
productId: 2,
46-
productName: 'Wooden frame glasses for personal use',
47-
imageUrl:
48-
'https://ik.imagekit.io/a1yisxurxo/aman/shoppable%20vidoes/glasses2.jpeg?updatedAt=1752632501675',
45+
productName: "Wooden frame glasses",
46+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/wooden_frames.jpeg",
4947
onHover: {
50-
action: 'switch',
48+
action: "switch",
5149
args: {
52-
url: 'https://ik.imagekit.io/a1yisxurxo/aman/shoppable%20vidoes/glasses.jpeg?updatedAt=1752632426600',
53-
},
50+
url: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/wooden_frames.jpeg"
51+
}
5452
},
5553
onClick: {
56-
action: 'goto',
54+
action: "goto",
5755
pause: true,
5856
args: {
59-
url: 'https://www.pexels.com/search/wooden%20glasses%20frames/',
60-
},
61-
},
57+
url: "https://www.pexels.com/search/wooden%20glasses%20frames/"
58+
}
59+
}
6260
},
6361
{
6462
productId: 3,
65-
productName: 'Sunglasses',
66-
imageUrl:
67-
'https://ik.imagekit.io/a1yisxurxo/aman/shoppable%20vidoes/sunglass.jpeg?updatedAt=1752633002810',
63+
productName: "Sunglasses",
64+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/sunglass.jpeg",
6865
onHover: {
69-
action: 'overlay',
70-
args: 'Click to go to website',
66+
action: "overlay",
67+
args: "Click to go to website"
7168
},
7269
onClick: {
73-
action: 'goto',
70+
action: "goto",
7471
pause: true,
7572
args: {
76-
url: 'https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/',
77-
},
78-
},
73+
url: "https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/"
74+
}
75+
}
7976
},
8077
{
8178
productId: 4,
82-
productName: 'Eye protection',
83-
highlightTime: { start: 7, end: 9 }, // Highlight from 0s to 6s
84-
imageUrl:
85-
'https://ik.imagekit.io/a1yisxurxo/aman/shoppable%20vidoes/protection.jpeg?updatedAt=1752633320623',
79+
productName: "Eye protection",
80+
highlightTime: { start: 7, end: 9 },
81+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/protection.jpeg",
8682
onClick: {
87-
action: 'goto',
83+
action: "goto",
8884
pause: true,
8985
args: {
90-
url: 'https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/',
91-
},
92-
},
93-
},
86+
url: "https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/"
87+
}
88+
}
89+
}
9490
],
9591
showPostPlayOverlay: true,
9692
autoClose: false,
97-
startState: 'open',
98-
},
93+
startState: "open"
94+
}
9995
};
10096

10197
const codeToDisplay = buildPlayerInitCode({
@@ -107,5 +103,11 @@ const codeToDisplay = buildPlayerInitCode({
107103

108104
document.getElementById('code-display')!.textContent = codeToDisplay.trim();
109105

110-
const player = videoPlayer('player', playerOptions);
111-
player.src(srcConfig);
106+
// Helper function to initialize players
107+
function initPlayer(playerId: string, options: typeof playerOptions, config: typeof srcConfig) {
108+
const player = videoPlayer(playerId, options);
109+
player.src(config);
110+
}
111+
112+
// Initialize all players
113+
initPlayer('player', playerOptions, srcConfig);

0 commit comments

Comments
 (0)