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

JoL-player
Simple, beautiful and powerful react player
✨ 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:"https://x.com/a.mp4", width: 750, height: 420, }} /> </> );
:point_right:demo case
:blue_book: 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[] | - |
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; }
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 ofref
Can 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';
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 JoLPlaye
r is as follows: :point_down:
export interface videoparameter extends Partial<videoCallback> { style?: React.CSSProperties; /** * @description Component configuration items */ option: videoOption; className?: string; ref?: JoLPlayerRef }