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 React from 'react'; |
||||||
import ReactDOM from "react-dom"; |
import ReactDOM from 'react-dom'; |
||||||
import App from "../../src/index"; |
import App from '../../src/index'; |
||||||
ReactDOM.render( |
ReactDOM.render( |
||||||
<App |
<App |
||||||
option={{ |
option={{ |
||||||
videoSrc: |
videoSrc: 'https://qiniu.qyhever.com/162962488432086ba29652658echrome.mp4', |
||||||
"https://gs-files.oss-cn-hongkong.aliyuncs.com/okr/test/file/2021/07/01/haiwang.mp4", |
|
||||||
width: 750, |
width: 750, |
||||||
height: 420, |
height: 420, |
||||||
theme: "#00D3FF", |
poster: 'https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG', |
||||||
poster: |
language: 'zh', |
||||||
"https://cdn.gudsen.com/2021/06/28/f81356b08b4842d7a3719499f557c8e4.JPG", |
|
||||||
language: "en", |
|
||||||
}} |
}} |
||||||
/>, |
/>, |
||||||
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 JoLPlayer from "@/core/index"; |
import '@/icons/'; |
||||||
import "@/icons/"; |
export default JoLPlayer; |
||||||
export { JoLPlayerType }; |
|
||||||
export default JoLPlayer; |
|
||||||
|
|||||||
Loading…
Reference in new issue