✔ Playing static and vod videos
npm install cafe-video-player
$ npm install --save cafe-video-player
$ yarn add cafe-video-player
`
Example
✔ To play vod, follow the example below:
`jsx
import { VideoPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
type: "vod",
id: "6623",
banner: "image path", // (to display cover image from external url) optional
subtitleUrl: "subtitle url", // (to display subtitle from external url) optional
currentTime: 100, // (jump to second 100) optional
onChangeCurrentTime: (currentTime: number) => console.log(currentTime), //optional, This function returns the current time value when clicking on the progress bar or the backward and forward buttons.
subtitles = [{lang: "string", title: "string", url: "subtitle url"}] // optional
/*
subtitle example
subtitles = [
{lang: "fa", title: "فارسی", url: "https://hamrahi.cloud/subtitles/216-282790-6770242c63370b3aa9ce680b-sub_fa.srt"},
{lang: "en", title: "انگلیسی", url: "https://hamrahi.cloud/subtitles/216-282790-6770242c63370b58ecce680d-sub_en.srt"},
]
*/
onPlay: (currentTime: number) => console.log("Video started at:", currentTime),
onSpeedChange: (oldSpeed: number, newSpeed: number) => console.log(Playback speed changed from ${oldSpeed}x to ${newSpeed}x),
onFullscreenChange:(status: boolean) => console.log(Fullscreen status:${status}),
onSubtitleStatusChange: (subtitle, status) => console.log("Subtitle status changed:", subtitle, "Enabled:", status),
};
return (
);
}
`
Example
✔ To play static videos, follow the example below:
- id corresponds to the video link, which must be base64 format
- banner corresponds to the cover link, which must be base64 format
`jsx
import { VideoPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
type: "static",
id: "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEv",
banner: "image path", // (to display cover image from external url) optional
onChangeCurrentTime: (currentTime: number) => console.log(currentTime), //optional, This function returns the current time value when clicking on the progress bar or the backward and forward buttons.
subtitles = [{lang: "string", title: "string", url: "subtitle url"}] // optional
/*
subtitle example
subtitles = [
{lang: "fa", title: "فارسی", url: "https://hamrahi.cloud/subtitles/216-282790-6770242c63370b3aa9ce680b-sub_fa.srt"},
{lang: "en", title: "انگلیسی", url: "https://hamrahi.cloud/subtitles/216-282790-6770242c63370b58ecce680d-sub_en.srt"},
]
*/
onPlay: (currentTime: number) => console.log("Video started at:", currentTime),
onSpeedChange: (oldSpeed: number, newSpeed: number) => console.log(Playback speed changed from ${oldSpeed}x to ${newSpeed}x),
onFullscreenChange:(status: boolean) => console.log(Fullscreen status:${status}),
onSubtitleStatusChange: (subtitle, status) => console.log("Subtitle status changed:", subtitle, "Enabled:", status),
};
return (
);
}
`
Example
✔ To use the mini-player feature, follow the example below:
`jsx
import { MiniPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
type: "vod",
id: "6623",
onClose: () => {},
};
return (
);
}
`
Example
✔ You can use bannerAlt props to set custom alt for video banner
`jsx
import { VideoPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
id: "6623",
type: "vod",
bannerAlt: "alt for video banner",
};
return (
);
}
`
For the modals to work correctly, you need to add the following tag to the end of the body tag in the \_document file.
`jsx
`
To display the player styles correctly, you must import the videoPlayerStyles.css file from the node \_module folder inside the \_app file according to the example below.
`jsx
import "../node_modules/cafe-video-player/videoPlayerStyles.css";
`
To display the images correctly, you must put the following configuration in the next.config.ts file.
`jsx
images: {
remotePatterns: [
{
protocol: "https",
hostname: "**"
}
]
},
`
Video HighLighter Integration Guide
This document explains how to integrate and use the Video HighLighter feature in a Next.js project.
Overview
The Video HighLighter enhances the video player with additional UI and state indicators during the download and preparation of video content. To enable it, several props must be passed to the player component.
Props
$3
Indicates the current state of the Video HighLighter process. Accepted values:
- skeleton: Shows the skeleton loading state.
- waiting: Indicates the waiting period before video download begins.
- download_start: The download process has started.
- download_error: An error occurred during the download.
- undefined: Default value. Hides all Video HighLighter-related sections.
$3
A numeric value representing the percentage of the download progress.
$3
Total duration of the video in seconds (numeric value).
$3
Text displayed under the progress bar while downloading the video.
For greater flexibility (e.g., multiline messages), this prop should be passed as a JSX element.
$3
A callback function executed if a download error occurs.
$3
An image used as the banner for the video.
Important Notes
After the video has been successfully downloaded, make sure to:
1. Set the vhl_status to undefined.
2. Pass the video id using the id prop to the player to start playback and load video details.
---
🧪 Example Usage in a Next.js Component
`tsx
import { VideoPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
vhl_status="download_start"
vhl_progress={42}
vhl_duration={300}
vhl_statusText={Downloading highlights...
Please wait.
}
vhl_onRetry={handleRetry}
banner="/images/video-banner.jpg"
id="abc123"
};
return (
);
}
`
Advertisement Integration Guide
This document explains how to integrate and use the Advertisement feature in a Next.js project with the cafe-video-player.
---
Overview
The Advertisement feature allows you to show video ads before playback.
It supports skip functionality, clickable ads, and callback hooks for both skipping and ad completion.
---
Props
An object that must follow the IAdvertisement interface:
`ts
export interface IAdvertisement {
videoUrl: string; // The ad video source URL (static video, required)
adText?: string; // Optional text for the ad button. Defaults to "اطلاعات بیشتر" if not provided
skipDelay?: number; // Number of seconds before the skip button becomes clickable. If not provided or 0, the ad cannot be skipped
onSkipAd?: (currentTime: number) => void; // Callback when the ad is skipped, receives the currentTime (optional)
onEndAd?: (currentTime: number) => void; // Callback when the ad finishes, receives the currentTime (optional)
onClickAd?: (currentTime: number) => void; // Callback when the ad button is clicked, receives the currentTime. If not defined, the ad button will not be shown (optional)
}
`
🧪 Example Usage in a Next.js Component
`tsx
import { VideoPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
type: "vod",
id: "6623",
advertisement: {
videoUrl: "https://example.com/ad.mp4",
adText: "Visit our sponsor",
skipDelay: 5,
onSkipAd: (currentTime: number) => console.log("Ad skipped at:", currentTime),
onEndAd: (currentTime: number) => console.log("Ad ended at:", currentTime),
onClickAd: (currentTime: number) => console.log("Ad clicked at:", currentTime),
},
};
return (
);
}
``