You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
4 years ago | |
|---|---|---|
| build | 4 years ago | |
| example/src | 4 years ago | |
| src | 4 years ago | |
| .babelrc | 4 years ago | |
| .editorconfig | 4 years ago | |
| .eslintignore | 4 years ago | |
| .eslintrc.js | 4 years ago | |
| .gitignore | 4 years ago | |
| .prettierignore | 4 years ago | |
| .prettierrc | 4 years ago | |
| LICENSE | 4 years ago | |
| README.md | 4 years ago | |
| package-lock.json | 4 years ago | |
| package.json | 4 years ago | |
| tsconfig.json | 4 years ago | |
| zh.md | 4 years ago | |
README.md
JoL-player
Simple, beautiful and powerful react player
English | 简体中文
✨ 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,
}}
/>
</>
);
📘 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 JoLPlayer is as follows: 👇
export interface videoparameter extends Partial<videoCallback> {
style?: React.CSSProperties;
/**
* @description Component configuration items
*/
option: videoOption;
className?: string;
ref?: JoLPlayerRef
}
💪Later version
- Add shortcut key function
- Add video definition selection list
- Increase the animation effects of pause, play, and play area
- Add auto play function
🌹Praise
If you think this project is helpful to you, you can give the author a like, the author is very grateful: blush:😊🌹
🏰Ecosphere
- 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