audiom-music-video-player-lib

✔ Playing static videos

Installation

$ npm install --save audiom-music-video-player-lib
$ yarn add audiom-music-video-player-lib

Example

• src corresponds to the video link, which must be base64 format
• banner corresponds to the cover link, which must be base64 format

import dynamic from "next/dynamic";
const StaticVideoPlayerLibrary = dynamic(() => import("audiom-music-video-player-lib"), { ssr: false })

export default function HomePage() {

  const params = {
    src: "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEv",
    banner:"aHR0cHM6Ly9zdGF0aWMudmVjdGVlenkuY29tL3N5c3RlbS9yZXNvdXJjZXMvdGh1bWJuYWlscy8wMjUvMDY3Lzc2Mi9zbWFsbC80ay1iZWF1dGlmdWwtY29sb3JmdWwtYWJzdHJhY3Qtd2FsbHBhcGVyLXBob3RvLmpwZw=="
  }

  return (
    <>
      <StaticVideoPlayerLibrary params={params} />
    </>
  );
}

For the modals to work correctly, you need to add the following tag to the end of the body tag in the _document file or layout.tsx.

<div id="static-player-container-modals" />

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/audiom-music-video-player-lib/videoPlayerStyles.css"

To display the images correctly, you must put the following configuration in the next.config.ts file.

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "**"
    }
  ]
},