cafe-video-player
v2.0.25
Published
✔ Playing static and vod videos
Downloads
176
Readme
cafe-video-player
✔ Playing static and vod videos
Installation
$ npm install --save cafe-video-player
$ yarn add cafe-video-player
Example
✔ To play vod, follow the example below:
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"},
]
*/
};
return (
<div>
<VideoPlayerLibrary params={params} />
</div>
);
}
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
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"},
]
*/
};
return (
<div>
<VideoPlayerLibrary params={params} />
</div>
);
}
Example
✔ To use the mini-player feature, follow the example below:
import { MiniPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
type: "vod",
id: "6623",
onClose: () => {},
};
return (
<div>
<MiniPlayerLibrary params={params} />
</div>
);
}
Example
✔ You can use bannerAlt props to set custom alt for video banner
import { VideoPlayerLibrary } from "cafe-video-player";
export default function HomePage() {
const params = {
id: "6623",
type: "vod",
bannerAlt: "alt for video banner",
};
return (
<div>
<VideoPlayerLibrary params={params} />
</div>
);
}
For the modals to work correctly, you need to add the following tag to the end of the body tag in the _document file.
<div id="dialog-react-root-videoPlayer" />
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.
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.
images: {
remotePatterns: [
{
protocol: "https",
hostname: "**"
}
]
},