A Simple, beautiful and powerful react player

Sep 04, 2021
A Simple, beautiful and powerful react player


Simple, beautiful and powerful react player

View Demo View Github

✨ 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.
  • :facepunch: Powerful API and callback function
  • :zap: Small size, 80kb

📦 Install

npm install jol-player --save

🔨 Example

import JoLPlayer from "jol-player"; const App = () => ( <> <JoLPlayer option={{ videoSrc:"", width: 750, height: 420, }} /> </> );

:point_right:demo case

:blue_book: Documentation

Properties/Configuration Items

The following attributes come from the option property configuration item

ParameterDescriptiontypeDefault value
widthThe width of the video container (required)numberrequired
heightThe height of the video container (required)numberrequired
videoSrcVideo address (required)stringrequired
posterVideo cover imagestring-
setEndPlayContentCustomize what is displayed at the end of the videoReact.ReactNode-
setBufferContentCustom video buffer loading componentReact.ReactNode-
pausePlacementThe position of the pause buttonbottomRightcenterbottomRight
hideMouseTimeHow many milliseconds, without any operation, hide the mouse and controller/msnumber2000
isShowMultipleWhether to display the multiplier functionbooleantrue
isShowSetWhether to display the setting functionbooleantrue
isShowScreenshotWhether to display the screenshot functionbooleantrue
isShowPictureWhether to show picture-in-picturebooleantrue
isShowWebFullScreenWhether to display the full screen of the webpagebooleantrue
isShowPauseButtonWhether to show the pause buttonbooleantrue
qualitySelection list of video quality definitionqualityAttributes[]-

Tips:qualityAttributes:The interface declaration is as follows:point_down:

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


loadReload() => void
pausePause() => void
playStart playing() => void
setVolumeSet the volume, [0-100](par:number ) => void
seekSet the playback position of the specified video/s(par:number ) => void
setVideoSrcSet the address to play the video src(par:string ) => void

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

:point_right: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';
onProgressMouseDownPress and hold the slide bar, drag the callback(e: videoAttributes) => void
onProgressMouseUpSlide bar press and release callback(e: videoAttributes) => void
onPlayVideo start playing callback(e: videoAttributes) => void
onPauseCallback when the video is paused(e: videoAttributes) => void
onTimeChangeVideo is playing, time change callback(e: videoAttributes) => void
onEndEdCallback when the video ends(e: videoAttributes) => void
onvolumechangeCallback when the volume changes(e: videoAttributes) => void
onErrorVideo playback failed callback() => void
onQualityChangeCallback when the video resolution changes(e: videoAttributes) => void

The parameter interface received by JoLPlayer is as follows: :point_down:

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