lgf
3 years ago
parent
e4c0b66515
commit
0b874bea67
25 changed files with 731 additions and 57 deletions
@ -0,0 +1,168 @@ |
||||
<p align="center"> |
||||
<img src="https://qiniu.qyhever.com/16296253101982eb82305cfc3%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE20210822173735.png"> |
||||
</p> |
||||
|
||||
|
||||
|
||||
<h1 align="center">JoL-player</h1> |
||||
|
||||
<p align="center">Simple, beautiful and powerful react player</p> |
||||
|
||||
<p align="center"> |
||||
<a href="https://github.com/microsoft/TypeScript"> |
||||
<img src="https://img.shields.io/badge/typescript-4.4.2-brightgreen.svg" alt="license"> |
||||
</a> |
||||
<a href="https://github.com/facebook/react"> |
||||
<img src="https://img.shields.io/badge/react-17.0.1-brightgreen.svg" alt="react"> |
||||
</a> |
||||
</p> |
||||
|
||||
|
||||
English | [简体中文](./zh.md) |
||||
|
||||
## ✨ 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 |
||||
|
||||
```bash |
||||
npm install jol-player --save |
||||
``` |
||||
|
||||
## 🔨 Example |
||||
|
||||
```tsx |
||||
import JoLPlayer from "jol-player"; |
||||
|
||||
const App = () => ( |
||||
<> |
||||
<JoLPlayer |
||||
option={{ |
||||
videoSrc:"https://x.com/a.mp4", |
||||
width: 750, |
||||
height: 420, |
||||
}} |
||||
/> |
||||
</> |
||||
); |
||||
``` |
||||
|
||||
:point_right:[demo case](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx) |
||||
|
||||
## :blue_book: Documentation |
||||
|
||||
#### Properties/Configuration Items |
||||
|
||||
| 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 of`ref`Can call，as：xxx.current.load() |
||||
|
||||
:point_right:[For details, please refer to the demo case](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx) |
||||
|
||||
#### Callback function |
||||
|
||||
```tsx |
||||
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 | |
||||
|
||||
## :muscle: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 |
||||
|
||||
## :rose:Praise |
||||
|
||||
If you think this project is helpful to you, you can give the author a like, the author is very grateful: blush::blush::rose: |
||||
|
||||
## :european_castle:Ecosphere |
||||
|
||||
1. [ant-simple-pro](https://github.com/lgf196/ant-simple-pro)One support[vue3.0](https://github.com/vuejs/vue)，[react](https://github.com/facebook/react)，[angular](https://github.com/angular/angular)，[typescript](https://github.com/microsoft/TypeScript)Front-end solutions for middle-end platforms supported by multiple frameworks. |
||||
2. [ant-simple-draw](https://github.com/lgf196/ant-simple-draw)An online graphic editor, commonly used to express business processes, etc. |
||||
3. [h5-Dooring](https://github.com/MrXujiang/h5-Dooring) Make H5 production as simple as building blocks, easily build H5 pages, H5 websites, PC-side websites, and visual design |
||||
|
||||
[MIT](https://github.com/lgf196/ant-simple-pro/blob/master/LICENSE) |
||||
|
||||
Copyright (c) 2021-present LiGuoFeng |
||||
@ -1,18 +1,15 @@ |
||||
import React from "react"; |
||||
import ReactDOM from "react-dom"; |
||||
import App from "../../src/index"; |
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import App from '../../src/index'; |
||||
ReactDOM.render( |
||||
<App |
||||
option={{ |
||||
videoSrc: |
||||
"https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4", |
||||
videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4', |
||||
width: 750, |
||||
height: 420, |
||||
theme: "#00D3FF", |
||||
poster: |
||||
"https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG", |
||||
language: "en", |
||||
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG', |
||||
language: 'zh', |
||||
}} |
||||
/>, |
||||
document.getElementById("root") |
||||
document.getElementById('root'), |
||||
); |
||||
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 837 B After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 748 B After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
@ -0,0 +1,193 @@ |
||||
/** |
||||
* @description JoL-palyer播放器组件声明文件 |
||||
* @author lgf |
||||
* @time 2021-08-20 |
||||
*/ |
||||
import React from 'react'; |
||||
|
||||
export type pausePlacement = 'bottomRight' | 'center'; |
||||
|
||||
export type languageType = 'zh' | 'en'; |
||||
|
||||
export interface videoOption<T = string, K = boolean, U = number> { |
||||
/** |
||||
* @description 视频容器的width |
||||
*/ |
||||
width: U; |
||||
/** |
||||
* @description 视频容器的height |
||||
*/ |
||||
height: U; |
||||
/** |
||||
* @description 视频地址 |
||||
*/ |
||||
videoSrc: T; |
||||
/** |
||||
* @description 主题 |
||||
*/ |
||||
theme?: T; |
||||
/** |
||||
* @description 视频封面图 |
||||
*/ |
||||
poster?: T; |
||||
/** |
||||
* @description 自定义视频结束时显示的内容 |
||||
*/ |
||||
setEndPlayContent?: React.ReactNode; |
||||
/** |
||||
* @description 自定义视频缓冲加载组件 |
||||
*/ |
||||
setBufferContent?: React.ReactNode; |
||||
/** |
||||
* @description 暂停键的位置 |
||||
*/ |
||||
pausePlacement?: pausePlacement; |
||||
/** |
||||
* @description 多少毫秒，无任何操作，隐藏鼠标和控制器/ms |
||||
*/ |
||||
hideMouseTime?: U; |
||||
/** |
||||
* @description 是否显示播放倍数功能 |
||||
*/ |
||||
isShowMultiple?: K; |
||||
/** |
||||
* @description 是否显示设置功能 |
||||
*/ |
||||
isShowSet?: K; |
||||
/** |
||||
* @description 是否显示截图功能 |
||||
*/ |
||||
isShowScreenshot?: K; |
||||
/** |
||||
* @description 是否显示画中画 |
||||
*/ |
||||
isShowPicture?: K; |
||||
/** |
||||
* @description 是否显示网页全屏 |
||||
*/ |
||||
isShowWebFullScreen?: K; |
||||
/** |
||||
* @description 语言,默认中文 |
||||
*/ |
||||
language?: languageType; |
||||
} |
||||
export interface videoAttributes<T = number, K = boolean> { |
||||
/** |
||||
* @description 是否播放 |
||||
*/ |
||||
isPlay: K; |
||||
/** |
||||
* @description 当前时间/s |
||||
*/ |
||||
currentTime: T; |
||||
/** |
||||
* @description 总时长 |
||||
*/ |
||||
duration: T; |
||||
/** |
||||
* @description 缓存时长/s |
||||
*/ |
||||
bufferedTime: T; |
||||
/** |
||||
* @description 是否开启画中画 |
||||
*/ |
||||
isPictureinpicture: K; |
||||
/** |
||||
* @description 音量 |
||||
*/ |
||||
volume: T; |
||||
/** |
||||
* @description 视频播放倍数 |
||||
*/ |
||||
multiple: T; |
||||
/** |
||||
* @description 是否结束 |
||||
*/ |
||||
isEndEd: K; |
||||
/** |
||||
* @description 错误 |
||||
*/ |
||||
error: null | T; |
||||
} |
||||
export type noParVoid = () => void; |
||||
|
||||
export type parVoid<T> = (par: T) => void; |
||||
|
||||
export interface videoMethod<T = noParVoid> { |
||||
/** |
||||
* @description 重新加载 |
||||
*/ |
||||
load: T; |
||||
/** |
||||
* @description 开始播放 |
||||
*/ |
||||
play: T; |
||||
/** |
||||
* @description 暂停 |
||||
*/ |
||||
pause: T; |
||||
/** |
||||
* @description 设置音量 |
||||
*/ |
||||
setVolume: parVoid<number>; |
||||
/** |
||||
* @description 设置指定视频的播放位置/s |
||||
*/ |
||||
seek: parVoid<number>; |
||||
/** |
||||
* @description 设置播放视频的地址src |
||||
*/ |
||||
setVideoSrc: parVoid<string>; |
||||
} |
||||
export type callBackType = (e: videoAttributes) => void; |
||||
export interface videoCallback<T = callBackType> { |
||||
/** |
||||
* @description 滑动条按下不放，拖动回调 |
||||
*/ |
||||
onProgressMouseDown: T; |
||||
/** |
||||
* @description 视频开始播放回调 |
||||
*/ |
||||
onPlay: T; |
||||
/** |
||||
* @description 视频暂停播放的回调 |
||||
*/ |
||||
onPause: T; |
||||
/** |
||||
* @description 视频在播放，时间变化回调 |
||||
*/ |
||||
onTimeChange: T; |
||||
/** |
||||
* @description 视频结束时回调 |
||||
*/ |
||||
onEndEd: T; |
||||
/** |
||||
* @description 滑动条按下松开回调 |
||||
*/ |
||||
onProgressMouseUp: T; |
||||
/** |
||||
* @description 视频播放失败的回调 |
||||
*/ |
||||
onError: noParVoid; |
||||
/** |
||||
* @description 音量改变时的回调 |
||||
*/ |
||||
onvolumechange: T; |
||||
} |
||||
export interface videoparameter extends Partial<videoCallback> { |
||||
style?: React.CSSProperties; |
||||
/** |
||||
* @description 组件的配置项 |
||||
*/ |
||||
option: videoOption; |
||||
className?: string; |
||||
} |
||||
export type JoLPlayerRef = videoMethod & |
||||
videoAttributes & { |
||||
video: HTMLVideoElement; |
||||
}; |
||||
|
||||
interface CompoundedComponent |
||||
extends React.ForwardRefExoticComponent<videoparameter & React.RefAttributes<JoLPlayerRef>> {} |
||||
declare const JolPlayer: CompoundedComponent; |
||||
export default JolPlayer; |
||||
@ -1,5 +1,3 @@ |
||||
import * as JoLPlayerType from "@/interface"; |
||||
import JoLPlayer from "@/core/index"; |
||||
import "@/icons/"; |
||||
export { JoLPlayerType }; |
||||
import JoLPlayer from '@/core/index'; |
||||
import '@/icons/'; |
||||
export default JoLPlayer; |
||||
|
||||
Loading…
Reference in new issue