Skip to content

Commit b8ad81a

Browse files
aman-imagekitaman-imagekit
committed
feedback 2
1 parent 8317552 commit b8ad81a

24 files changed

Lines changed: 311 additions & 330 deletions

File tree

‎examples/javascript/index.html‎

Lines changed: 5 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,13 @@
1-
<!-- <!DOCTYPE html>
2-
<html lang="en">
3-
4-
<head>
5-
<meta charset="UTF-8" />
6-
<title>ImageKit Video Player Example</title>
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<style>
9-
body {
10-
margin: 0;
11-
padding: 0;
12-
font-family: sans-serif;
13-
background: #f0f0f0;
14-
}
15-
</style>
16-
</head>
17-
18-
<body>
19-
<h1 style="display: flex; justify-content: center; width: 100%;">ImageKit Video Player Vanilla JS Example</h1>
20-
<video id="video" class="video-js vjs-default-skin" controls preload="auto" width="960" height="540"></video>
21-
<div style="height: 2000px; background: #e0e0e0; padding: 20px;">
22-
<h2>Scroll Test Data</h2>
23-
<p>
24-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
25-
magna aliqua.
26-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
27-
</p>
28-
<p>
29-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
30-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
31-
</p>
32-
<p>
33-
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros
34-
bibendum elit,
35-
nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida.
36-
</p>
37-
<p>
38-
Vivamus luctus egestas leo. Duis quis nunc. Nullam vel sem. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
39-
id, lorem.
40-
Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
41-
</p>
42-
<p>
43-
Quisque id odio. Praesent venenatis metus at tortor pulvinar varius. Integer tincidunt. Cras dapibus.
44-
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
45-
</p>
46-
</div>
47-
<div style="height: 600px; width: full;">
48-
<h1>ImageKit Video Player Example</h1>
49-
<p>
50-
This example demonstrates how to use the ImageKit Video Player with a playlist.
51-
The player is initialized with a video and a playlist of products.
52-
</p>
53-
<div id="video-player-container" style="max-width: 960px; margin: 0 auto;"></div>
54-
<p>
55-
The player supports various actions such as seeking to a specific time in the video,
56-
switching images on hover, and navigating to product pages on click.
57-
</p>
58-
<p>
59-
The player is designed to be responsive and works well on different screen sizes.
60-
You can customize the player styles and behavior as needed.
61-
</p>
62-
</div>
63-
<script type="module" src="./src/playlist.ts"></script>
64-
</body>
65-
66-
</html> -->
67-
681
<!DOCTYPE html>
692
<html lang="en">
3+
704
<head>
715
<meta charset="UTF-8" />
726
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
737
<title>ImageKit Video Player Examples</title>
748
<link rel="stylesheet" href="src/style.css" />
759
</head>
10+
7611
<body>
7712
<div class="container">
7813
<h1>ImageKit Video Player Examples</h1>
@@ -86,8 +21,11 @@ <h1>ImageKit Video Player Examples</h1>
8621
<li><a href="pages/chapters.html">Chapters</a></li>
8722
<li><a href="pages/subtitles.html">Subtitles</a></li>
8823
<li><a href="pages/seek-thumbnails.html">Seek thumbnails</li>
24+
<li><a href="pages/abs.html">ABS</li>
8925
</ul>
9026
</nav>
9127
</div>
28+
<script type="module"></script>
9229
</body>
30+
9331
</html>

‎examples/javascript/pages/abs.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>ABS Example</title>
8+
<link rel="stylesheet" href="/src/style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<a href="../" class="back-link">&larr; Back to examples</a>
14+
<h1>ABS Example</h1>
15+
<h2>DASH</h2>
16+
<video id="player" class="video-js" controls preload="auto" width="960" height="540"></video>
17+
<h2>HLS</h2>
18+
<video id="player-2" class="video-js" controls preload="auto" width="960" height="540"></video>
19+
<h2>Example Code</h2>
20+
<div class="code-block">
21+
<pre><code id="code-display" class="language-javascript"></code></pre>
22+
</div>
23+
</div>
24+
<script type="module" src="/src/abs.ts"></script>
25+
</body>
26+
27+
</html>

‎examples/javascript/src/abs.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { videoPlayer } from '@imagekit/video-player';
2+
import '@imagekit/video-player/dist/styles.css';
3+
4+
const codeToDisplay = `
5+
// HTML: <div id="player-container"></div>
6+
7+
import { videoPlayer } from '@imagekit/video-player';
8+
import '@imagekit/video-player/dist/styles.css';
9+
10+
const player = videoPlayer("player", {
11+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
12+
});
13+
14+
player.src({
15+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
16+
abs: {
17+
protocol: 'dash',
18+
sr: [240, 360, 720, 1080]
19+
}
20+
})
21+
22+
const player2 = videoPlayer("player-2", {
23+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
24+
});
25+
26+
player2.src({
27+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
28+
abs: {
29+
protocol: 'hls',
30+
sr: [240, 360, 720, 1080]
31+
}
32+
})
33+
`;
34+
35+
// Mount the code to the display block
36+
document.getElementById('code-display')!.textContent = codeToDisplay.trim();
37+
38+
// --- Actual Player Initialization ---
39+
// Create a video element for the player to mount on
40+
const player = videoPlayer("player", {
41+
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
42+
}, {
43+
muted: true
44+
});
45+
46+
player.src({
47+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
48+
abs: {
49+
protocol: 'dash',
50+
sr: [240, 360, 720, 1080]
51+
}
52+
})
53+
54+
const player2 = videoPlayer("player-2", {
55+
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
56+
}, {
57+
muted: true
58+
});
59+
60+
player2.src({
61+
src: 'https://ik.imagekit.io/demo/sample-video.mp4',
62+
abs: {
63+
protocol: 'hls',
64+
sr: [240, 360, 720, 1080]
65+
}
66+
})

‎examples/javascript/src/playlist.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -512,8 +512,10 @@ const codeToDisplay = `
512512
import { videoPlayer } from '@imagekit/video-player';
513513
import '@imagekit/video-player/dist/styles.css';
514514
515-
const player = videoPlayer('player-container', {
516-
imagekitId: 'your_id',
515+
const player = videoPlayer('player', {
516+
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
517+
}, {
518+
muted: true
517519
});
518520
519521
player.playlist({
@@ -559,8 +561,10 @@ document.getElementById('code-display')!.textContent = codeToDisplay.trim();
559561

560562
// --- Actual Player Initialization ---
561563
// Create a video element for the player to mount on
562-
const player = videoPlayer("player", {
564+
const player = videoPlayer('player', {
563565
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
566+
}, {
567+
muted: true
564568
});
565569

566570
const playlistManager = player.playlist({

‎examples/javascript/src/recommendations.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import { videoPlayer } from '@imagekit/video-player';
88
import '@imagekit/video-player/dist/styles.css';
99
1010
const player = videoPlayer('player', {
11-
imagekitId: 'your_id',
11+
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
12+
}, {
13+
muted: true
1214
});
1315
1416
player.src({
@@ -32,6 +34,8 @@ document.getElementById('code-display')!.textContent = codeToDisplay.trim();
3234
// --- Actual Player Initialization ---
3335
const player = videoPlayer('player', {
3436
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
37+
}, {
38+
muted: true
3539
});
3640

3741
player.src({

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ document.getElementById('code-display')!.textContent = codeToDisplay.trim();
2828
const player = videoPlayer('player', {
2929
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
3030
seekThumbnails: true,
31+
}, {
32+
muted: true
3133
});
3234

3335
player.src({

‎examples/javascript/src/subtitles.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { videoPlayer } from '@imagekit/video-player';
88
import '@imagekit/video-player/dist/styles.css';
99
1010
const player = videoPlayer('player', {
11-
imagekitId: 'your_id',
12-
width: 960,
13-
height: 540,
11+
imagekitId: 'imagekit_id', // Replace with your ImageKit ID
12+
}, {
13+
muted: true
1414
});
1515
1616
player.src({
@@ -47,6 +47,8 @@ document.getElementById('code-display')!.textContent = codeToDisplay.trim();
4747
// --- Actual Player Initialization ---
4848
const player = videoPlayer('player', {
4949
imagekitId: 'zuqlyov9d', // Replace with your ImageKit ID
50+
}, {
51+
muted: true
5052
});
5153

5254
player.src({
@@ -55,7 +57,7 @@ player.src({
5557
{
5658
autoGenerateSubtitles: true,
5759
maxWords: 4,
58-
wordHighlight: true,
60+
wordHighlight: true,
5961
},
6062
{
6163
autoGenerateSubtitles: true,

‎examples/react/src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type {
88
} from '@imagekit/video-player/react';
99

1010
import {
11-
PlayerOptions,
11+
IKPlayerOptions,
1212
SourceOptions,
1313
PlaylistOptions
1414
} from '@imagekit/video-player'
@@ -18,8 +18,8 @@ import '@imagekit/video-player/dist/styles.css';
1818
export default function App() {
1919
const playerRef = useRef<IKVideoPlayerRef>(null);
2020

21-
// 1) Define your ImageKit PlayerOptions
22-
const ikOptions: PlayerOptions = {
21+
// 1) Define your ImageKit IKPlayerOptions
22+
const ikOptions: IKPlayerOptions = {
2323
imagekitId: 'YOUR_IMAGEKIT_ID',
2424
seekThumbnails: true,
2525
logo: {

‎examples/vue/src/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@
2121
import { ref } from 'vue';
2222
// Import your component and types
2323
import { IKVideoPlayer } from '@imagekit/video-player/vue';
24-
import type { PlayerOptions, SourceOptions, PlaylistOptions } from '@imagekit/video-player';
24+
import type { IKPlayerOptions, SourceOptions, PlaylistOptions } from '@imagekit/video-player';
2525
2626
// Create a ref to get access to the component's exposed methods
2727
import type { IKVideoPlayerRef } from '@imagekit/video-player/vue';
2828
2929
const playerRef = ref<IKVideoPlayerRef | null>(null);
3030
31-
const ikOptions: PlayerOptions = {
31+
const ikOptions: IKPlayerOptions = {
3232
imagekitId: 'YOUR_IMAGEKIT_ID', // Remember to replace this
3333
seekThumbnails: true,
3434
};

‎packages/video-player/angular/interfaces.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { PlayerOptions, SourceOptions, PlaylistOptions } from '../javascript';
1+
import type { IKPlayerOptions, SourceOptions, PlaylistOptions } from '../javascript';
22

33
/** Props accepted by the Angular IKVideoPlayerComponent */
44
export interface IKVideoPlayerProps {
5-
ikOptions: PlayerOptions;
5+
ikOptions: IKPlayerOptions;
66
videoJsOptions?: any;
77
source?: SourceOptions;
88
playlist?: {

0 commit comments

Comments
 (0)