Skip to content

Commit 48d8e4d

Browse files
aman-imagekitaman-imagekit
committed
feat(video-player): enhance playlist functionality with chapters, subtitles, and shoppable features
1 parent 87fc48f commit 48d8e4d

4 files changed

Lines changed: 587 additions & 15 deletions

File tree

‎examples/react/src/App.tsx‎

Lines changed: 278 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function App() {
3333
info: { title: 'Bird on branch', description: 'This is a video containing bird on a branch.' }
3434
};
3535

36-
// 3) (alternative) for a playlist of videos
36+
// 3) (alternative) for a playlist of videos with ALL features enabled
3737
const playlist: {
3838
sources: SourceOptions[];
3939
options?: PlaylistOptions;
@@ -42,32 +42,308 @@ export default function App() {
4242
{
4343
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/horses.mp4",
4444
info: { title: "Horses Running", description: "Horses grazing in the field" },
45+
// Chapters: Auto-generate chapters
46+
chapters: true,
47+
// Subtitles: Auto-generated with translations
48+
textTracks: [
49+
{
50+
autoGenerate: true,
51+
maxChars: 60,
52+
highlightWords: true,
53+
},
54+
{
55+
autoGenerate: true,
56+
showAutoGenerated: false,
57+
translations: [
58+
{
59+
langCode: "hi",
60+
label: "Hindi (AI)",
61+
},
62+
{
63+
langCode: "de",
64+
label: "German (AI)",
65+
},
66+
],
67+
},
68+
],
4569
},
4670
{
4771
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/lion.mp4",
4872
info: {
4973
title: "Lion",
5074
description: "Lion roaming in the wild",
5175
},
76+
// Chapters: Auto-generate chapters
77+
chapters: true,
78+
// Subtitles: Auto-generated with translations
79+
textTracks: [
80+
{
81+
autoGenerate: true,
82+
maxChars: 60,
83+
highlightWords: true,
84+
},
85+
{
86+
autoGenerate: true,
87+
showAutoGenerated: false,
88+
translations: [
89+
{
90+
langCode: "hi",
91+
label: "Hindi (AI)",
92+
},
93+
{
94+
langCode: "de",
95+
label: "German (AI)",
96+
},
97+
],
98+
},
99+
],
100+
// Shoppable: Products with hotspots
101+
shoppable: {
102+
products: [
103+
{
104+
productId: 1,
105+
productName: "Wildlife Photography Gear",
106+
highlightTime: { start: 2, end: 6 },
107+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/aviators.jpeg",
108+
hotspots: [
109+
{
110+
time: "00:05",
111+
x: "50%",
112+
y: "40%",
113+
tooltipPosition: "right",
114+
clickUrl: "https://www.example.com/wildlife-gear"
115+
}
116+
],
117+
onHover: {
118+
action: "overlay",
119+
args: "Click to see wildlife photography gear"
120+
},
121+
onClick: {
122+
action: "goto",
123+
pause: true,
124+
args: {
125+
url: "https://www.example.com/wildlife-gear"
126+
}
127+
}
128+
}
129+
],
130+
showPostPlayOverlay: true,
131+
autoClose: false,
132+
startState: "openOnPlay"
133+
},
52134
},
53135
{
54136
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/dog_running.mp4",
55137
info: { title: "Dog Running" },
138+
// Chapters: Auto-generate chapters
139+
chapters: true,
140+
// Subtitles: Auto-generated
141+
textTracks: [
142+
{
143+
autoGenerate: true,
144+
maxChars: 60,
145+
highlightWords: true,
146+
},
147+
],
56148
},
57149
{
58150
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/man_smiling.mp4",
59151
info: {
60152
title: "Man Smiling",
61153
description: "Man smiling at the camera",
62154
},
155+
// Chapters: Auto-generate chapters
156+
chapters: true,
157+
// Subtitles: Auto-generated with translations
158+
textTracks: [
159+
{
160+
autoGenerate: true,
161+
maxChars: 60,
162+
highlightWords: true,
163+
},
164+
{
165+
autoGenerate: true,
166+
showAutoGenerated: false,
167+
translations: [
168+
{
169+
langCode: "hi",
170+
label: "Hindi (AI)",
171+
},
172+
],
173+
},
174+
],
175+
// Shoppable: Products
176+
shoppable: {
177+
products: [
178+
{
179+
productId: 1,
180+
productName: "Camera Equipment",
181+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/wooden_frames.jpeg",
182+
onHover: {
183+
action: "overlay",
184+
args: "Click to see camera equipment"
185+
},
186+
onClick: {
187+
action: "goto",
188+
pause: true,
189+
args: {
190+
url: "https://www.example.com/camera-equipment"
191+
}
192+
}
193+
}
194+
],
195+
showPostPlayOverlay: true,
196+
autoClose: false,
197+
startState: "openOnPlay"
198+
},
63199
},
64200
{
65201
src: "https://ik.imagekit.io/ikmedia/docs/video-player/playlist/rhino.mp4",
66202
info: { title: "Rhino at the zoo"},
203+
// Chapters: Auto-generate chapters
204+
chapters: true,
205+
// Subtitles: Auto-generated
206+
textTracks: [
207+
{
208+
autoGenerate: true,
209+
maxChars: 60,
210+
highlightWords: true,
211+
},
212+
],
67213
},
68214
{
69215
src: "https://ik.imagekit.io/demo/sample-video.mp4",
70-
info: { title: "Bird on branch"}
216+
info: { title: "Bird on branch"},
217+
// Chapters: Auto-generate chapters
218+
chapters: true,
219+
// Subtitles: Auto-generated with translations
220+
textTracks: [
221+
{
222+
autoGenerate: true,
223+
maxChars: 60,
224+
highlightWords: true,
225+
},
226+
{
227+
autoGenerate: true,
228+
showAutoGenerated: false,
229+
translations: [
230+
{
231+
langCode: "hi",
232+
label: "Hindi (AI)",
233+
},
234+
{
235+
langCode: "de",
236+
label: "German (AI)",
237+
},
238+
],
239+
},
240+
],
241+
},
242+
{
243+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/video.mp4",
244+
info: { title: "Shoppable Video", description: "Full-featured shoppable video with multiple products" },
245+
// Shoppable: Full product configuration from JavaScript example
246+
shoppable: {
247+
products: [
248+
{
249+
productId: 1,
250+
productName: "Classic Aviators",
251+
highlightTime: { start: 2, end: 6 },
252+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/aviators.jpeg",
253+
hotspots: [
254+
{
255+
time: "00:06",
256+
x: "48%",
257+
y: "35%",
258+
tooltipPosition: "left",
259+
clickUrl: "https://images.pexels.com/photos/701877/pexels-photo-701877.jpeg"
260+
}
261+
],
262+
onHover: {
263+
action: "overlay",
264+
args: "Click to see this product in the video"
265+
},
266+
onClick: {
267+
action: "seek",
268+
pause: 5,
269+
args: { time: "00:06" }
270+
}
271+
},
272+
{
273+
productId: 2,
274+
productName: "Wooden frame glasses",
275+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/wooden_frames.jpeg",
276+
onHover: {
277+
action: "switch",
278+
args: {
279+
url: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/wooden_frames.jpeg"
280+
}
281+
},
282+
onClick: {
283+
action: "goto",
284+
pause: true,
285+
args: {
286+
url: "https://www.pexels.com/search/wooden%20glasses%20frames/"
287+
}
288+
}
289+
},
290+
{
291+
productId: 3,
292+
productName: "Sunglasses",
293+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/sunglass.jpeg",
294+
onHover: {
295+
action: "overlay",
296+
args: "Click to go to website"
297+
},
298+
onClick: {
299+
action: "goto",
300+
pause: true,
301+
args: {
302+
url: "https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/"
303+
}
304+
}
305+
},
306+
{
307+
productId: 4,
308+
productName: "Eye protection",
309+
highlightTime: { start: 7, end: 9 },
310+
imageUrl: "https://ik.imagekit.io/ikmedia/docs/video-player/shoppable/protection.jpeg",
311+
onClick: {
312+
action: "goto",
313+
pause: true,
314+
args: {
315+
url: "https://www.pexels.com/photo/red-lens-sunglasses-on-sand-near-sea-at-sunset-selective-focus-photography-46710/"
316+
}
317+
}
318+
}
319+
],
320+
showPostPlayOverlay: true,
321+
autoClose: false,
322+
startState: "open"
323+
}
324+
},
325+
{
326+
src: "https://ik.imagekit.io/ikmedia/docs/video-player/subtitle_chapter/demo.mp4",
327+
info: { title: "Chapters & Subtitles Demo", description: "Video with AI-generated chapters and subtitles" },
328+
// Chapters: Auto-generate chapters
329+
chapters: true,
330+
// Subtitles: Auto-generated with translations
331+
textTracks: [
332+
{
333+
autoGenerate: true,
334+
translations: [
335+
{
336+
langCode: "hi",
337+
label: "Hindi (AI)",
338+
default: true,
339+
},
340+
{
341+
langCode: "de",
342+
label: "German (AI)",
343+
},
344+
],
345+
}
346+
],
71347
}
72348
], options: {
73349
autoAdvance: 1,

0 commit comments

Comments
 (0)