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

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

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