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: "**"
    }
  ]
},