simple and beautiful, powerful react player

#react #javascript #typescript

`jol-player`project address，Experience address

✨ Characteristics

📦 High-quality React components out of the box.
🛡 Use TypeScript to develop, provide a complete type definition file.
🌍 Internationalized language support.
🎨 Themes, components, customization capabilities.
👊 Powerful API and callback function
⚡ Small size, 80kb

📦 Install

npm install jol-player --save

🔨 Example

import JoLPlayer from "jol-player";

const App = () => (
  <>
    <JoLPlayer
        option={{
          videoSrc:"https://x.com/a.mp4",
          width: 750,
          height: 420,
        }}
      />
  </>
);

👉demo case

📘 Documentation

Properties/Configuration Items

The following attributes come from the option property configuration item

Parameter	Description	type	Default value
width	The width of the video container (required)	`number`	required
height	The height of the video container (required)	`number`	required
videoSrc	Video address (required)	`string`	required
theme	theme	`string`	#ffb821
poster	Video cover image	`string`	-
setEndPlayContent	Customize what is displayed at the end of the video	`React.ReactNode`	-
setBufferContent	Custom video buffer loading component	`React.ReactNode`	-
pausePlacement	The position of the pause button	`bottomRight`	`center`
hideMouseTime	How many milliseconds, without any operation, hide the mouse and controller/ms	`number`	2000
isShowMultiple	Whether to display the multiplier function	`boolean`	true
isShowSet	Whether to display the setting function	`boolean`	true
isShowScreenshot	Whether to display the screenshot function	`boolean`	true
isShowPicture	Whether to show picture-in-picture	`boolean`	true
isShowWebFullScreen	Whether to display the full screen of the webpage	`boolean`	true
language	Language	`zh`	`en`

Method

Name	Description	type
load	Reload	() => void
pause	Pause	() => void
play	Start playing	() => void
setVolume	Set the volume, [0-100]	(par:`number` ) => void
seek	Set the playback position of the specified video/s	(par:`number` ) => void
setVideoSrc	Set the address to play the video src	(par:`string` ) => void

Hint：The above method requires the help ofrefCan call，as：xxx.current.load()

👉For details, please refer to the demo case

Callback function

export interface videoAttributes<T = number, K = boolean> {
  /**
   * @description Whether to play
   */
  isPlay: K;
  /**
   * @description Current time/s
   */
  currentTime: T;
  /**
   * @description Total time
   */
  duration: T;
  /**
   * @description Cache duration/s
   */
  bufferedTime: T;
  /**
   * @description Whether to open picture-in-picture
   */
  isPictureinpicture: K;
  /**
   * @description Volume
   */
  volume: T;
  /**
   * @description Video playback multiple
   */
  multiple: T;
  /**
   * @description Whether to end
   */
  isEndEd: K;
  /**
   * @description Wrong
   */
  error: null | T;
}

Name	Description	type
onProgressMouseDown	Press and hold the slide bar, drag the callback	(e: videoAttributes) => void
onProgressMouseUp	Slide bar press and release callback	(e: videoAttributes) => void
onPlay	Video start playing callback	(e: videoAttributes) => void
onPause	Callback when the video is paused	(e: videoAttributes) => void
onTimeChange	Video is playing, time change callback	(e: videoAttributes) => void
onEndEd	Callback when the video ends	(e: videoAttributes) => void
onvolumechange	Callback when the volume changes	(e: videoAttributes) => void
onError	Video playback failed callback	() => void

The parameter interface received by `JoLPlaye`r is as follows: 👇

export interface videoparameter extends Partial<videoCallback> {
  style?: React.CSSProperties;
  /**
   * @description Component configuration items
   */
  option: videoOption;
  className?: string;
  ref?: JoLPlayerRef
}