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