Simple, beautiful and powerful react player
English | 简体中文
- 📦 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.
npm install jol-player --save
yarn add jol-player
https://cdn.jsdelivr.net/npm/[email protected]/index.min.js
// Introduced in the `typescript` environment
https://cdn.jsdelivr.net/npm/[email protected]/index.d.ts
import JoLPlayer from "jol-player";
const App = () => (
<>
<JoLPlayer
option={{
videoSrc:"https://x.com/a.mp4",
width: 750,
height: 420,
}}
/>
</>
);
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 isProgressFloat is true |
tp ,bt |
bt |
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; }
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()
👉For details, please refer to the demo case
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 |
export interface videoparameter extends Partial<videoCallback> {
style?: React.CSSProperties;
/**
* @description Component configuration items
*/
option: videoOption;
className?: string;
ref?: JoLPlayerRef
}
If you think this project is helpful to you, you can give the author a like, the author is very grateful: blush::blush::rose:
- ant-simple-proOne supportvue3.0,react,angular,typescriptFront-end solutions for middle-end platforms supported by multiple frameworks.
- ant-simple-drawAn online graphic editor, commonly used to express business processes, etc.
- h5-Dooring Make H5 production as simple as building blocks, easily build H5 pages, H5 websites, PC-side websites, and visual design
Copyright (c) 2021-present LiGuoFeng