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"
  }

  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: "aHR0cHM6Ly9zdGF0aWMudmVjdGVlenkuY29tL3N5c3RlbS9yZXNvdXJjZXMvdGh1bWJuYWlscy8wMjUvMDY3Lzc2Mi9zbWFsbC80ay1iZWF1dGlmdWwtY29sb3JmdWwtYWJzdHJhY3Qtd2FsbHBhcGVyLXBob3RvLmpwZw=="
  }

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