A react player plugin developed using typescript

👉Preview address

👉project 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
• 💎 Support HLS format (m3u8) etc.

📦 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	bottomRight
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	zh
isShowPauseButton	Whether to show the pause button	boolean	true
quality	Selection list of video quality definition	qualityAttributes[]	-
videoType	Video playback format, supports h264(.mp4,.webm,.ogg), hls(.m3u8)	h264 hls	h264
isToast	Whether to show toast	boolean	false
toastPosition	The position of the toast, this value only has an effect when isToast is true	leftTop,rightTop,leftBottom,rightBottom,center	leftTop
isProgressFloat	Whether to display the progress bar floating layer prompt	boolean	false
progressFloatPosition	The position of the floating layer prompt of the progress bar. This value is effective only when isProgressFloatis true	tp,bt	bt

Tips：qualityAttributes：The interface declaration is as follows👇

/**
 * 360P SD
 * 540P HD
 * 720P FHD
 * 1080P BD
 */
export type qualityName = 'SD' | 'HD' | 'FHD' | 'BD';

export type qualityKey = '360P' | '540P' | '720P' | '1080P';

export interface qualityAttributes<T = qualityName> {
  name: T;
  url: string;
}

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;
}
export type qualityKey = '360P' | '540P' | '720P' | '1080P';

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
onQualityChange	Callback when the video resolution changes	(e: videoAttributes) => void

The parameter interface received by JoLPlayer is as follows: 👇

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

👉Preview address

👉project address