update document

master
lgf 3 years ago
parent 09c81b9edb
commit 9f7d59b051
  1. 30
      README.md
  2. 35
      zh.md

@ -1,9 +1,10 @@
<p align="center">
<img src="https://qiniu.qyhever.com/16296253101982eb82305cfc3%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE20210822173735.png">
<img src="https://cdn.gudsen.com/2021/08/31/11f7398259634e94bddb8b0d9d7506c8.png">
</p>
<h1 align="center">JoL-player</h1>
<p align="center">Simple, beautiful and powerful react player</p>
@ -78,6 +79,29 @@ The following attributes come from the `option` property configuration item
| 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[]` | - |
> Tips:`qualityAttributes`接口声明如下:The interface declaration is as follows:point_down:
>
> ```typescript
> /**
> * 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;
> }
> ```
>
>
#### Method
@ -135,10 +159,11 @@ export interface videoAttributes<T = number, K = boolean> {
*/
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 |
@ -147,6 +172,7 @@ export interface videoAttributes<T = number, K = boolean> {
| 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<qualityKey>) => void |
#### The parameter interface received by `JoLPlaye`r is as follows: :point_down:

35
zh.md

@ -1,8 +1,9 @@
<p align="center">
<img src="https://qiniu.qyhever.com/16296253101982eb82305cfc3%E6%90%9C%E7%8B%97%E6%88%AA%E5%9B%BE20210822173735.png">
<img src="https://cdn.gudsen.com/2021/08/31/11f7398259634e94bddb8b0d9d7506c8.png">
</p>
<h1 align="center">JoL-player</h1>
<p align="center">简洁,美观,功能强大的react播放器</p>
@ -60,7 +61,7 @@ const App = () => (
如下属性来自`option`属性配置项.
| 参数 | 说明 | 类型 | 默认值 |
| ------------------- | ----------------------------------------- | ------------------------ | ------------- |
| ------------------- | ----------------------------------------- | ---------------------- | ------------- |
| width | 视频容器的 width(必传) | `number` | 必传 |
| height | 视频容器的 height(必传) | `number` | 必传 |
| videoSrc | 视频地址(必传) | `string` | 必传 |
@ -76,6 +77,29 @@ const App = () => (
| isShowPicture | 是否显示画中画 | `boolean` | true |
| isShowWebFullScreen | 是否显示网页全屏 | `boolean` | true |
| language | 语言 | `zh`,`en` | `zh` |
| isShowPauseButton | 是否显示暂停键 | `boolean` | true |
| quality | 视频质量清晰度的选择列表 | `qualityAttributes[]` | - |
> 温馨提示:`qualityAttributes`接口声明如下::point_down:
>
> ```typescript
> /**
> * 标清 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;
> }
> ```
>
>
#### 方法
@ -94,7 +118,7 @@ const App = () => (
#### 回调函数
```tsx
```typescript
export interface videoAttributes<T = number, K = boolean> {
/**
* @description 是否播放
@ -133,10 +157,12 @@ export interface videoAttributes<T = number, K = boolean> {
*/
error: null | T;
}
export type qualityKey = '360P' | '540P' | '720P' | '1080P';
```
| 名称 | 说明 | 类型 |
| ------------------- | ------------------------ | ---------------------------- |
| ------------------- | ------------------------ | ------------------------------------ |
| onProgressMouseDown | 滑动条按下不放,拖动回调 | (e: videoAttributes) => void |
| onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void |
| onPlay | 视频开始播放回调 | (e: videoAttributes) => void |
@ -145,6 +171,7 @@ export interface videoAttributes<T = number, K = boolean> {
| onEndEd | 视频结束时回调 | (e: videoAttributes) => void |
| onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void |
| onError | 视频播放失败的回调 | () => void |
| onQualityChange | 视频清晰度改变时的回调 | (e:callBackType<qualityKey>)=> void |
#### `JoLPlaye`r接收的参数接口如下::point_down:

Loading…
Cancel
Save