From 9f7d59b051e086a996c41fbd854c0cfaf862043c Mon Sep 17 00:00:00 2001
From: lgf <18827634408@163.com>
Date: Tue, 31 Aug 2021 16:34:42 +0800
Subject: [PATCH] update document
---
README.md | 48 +++++++++++++++++++++++++--------
zh.md | 81 ++++++++++++++++++++++++++++++++++++-------------------
2 files changed, 91 insertions(+), 38 deletions(-)
diff --git a/README.md b/README.md
index ab3244b..69da9cd 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
- 
+ 
+
JoL-player
Simple, beautiful and powerful react player
@@ -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 {
+> name: T;
+> url: string;
+> }
+> ```
+>
+>
#### Method
@@ -135,18 +159,20 @@ export interface videoAttributes {
*/
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 |
-| 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 |
+| 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 |
+| onQualityChange | Callback when the video resolution changes | (e: videoAttributes) => void |
#### The parameter interface received by `JoLPlaye`r is as follows: :point_down:
diff --git a/zh.md b/zh.md
index 2ef17e7..bb0944c 100644
--- a/zh.md
+++ b/zh.md
@@ -1,8 +1,9 @@
-
+
+
JoL-player
简洁，美观，功能强大的react播放器
@@ -59,23 +60,46 @@ const App = () => (
如下属性来自`option`属性配置项.
-| 参数 | 说明 | 类型 | 默认值 |
-| ------------------- | ----------------------------------------- | ------------------------ | ------------- |
-| width | 视频容器的 width（必传） | `number` | 必传 |
-| height | 视频容器的 height（必传） | `number` | 必传 |
-| videoSrc | 视频地址（必传） | `string` | 必传 |
-| theme | 主题 | `string` | \#ffb821 |
-| poster | 视频封面图 | `string` | - |
-| setEndPlayContent | 自定义视频结束时显示的内容 | `React.ReactNode` | - |
-| setBufferContent | 自定义视频缓冲加载组件 | `React.ReactNode` | - |
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------------- | ----------------------------------------- | ---------------------- | ------------- |
+| width | 视频容器的 width（必传） | `number` | 必传 |
+| height | 视频容器的 height（必传） | `number` | 必传 |
+| videoSrc | 视频地址（必传） | `string` | 必传 |
+| theme | 主题 | `string` | \#ffb821 |
+| poster | 视频封面图 | `string` | - |
+| setEndPlayContent | 自定义视频结束时显示的内容 | `React.ReactNode` | - |
+| setBufferContent | 自定义视频缓冲加载组件 | `React.ReactNode` | - |
| pausePlacement | 暂停键的位置 | `bottomRight`,`center` | `bottomRight` |
-| hideMouseTime | 多少毫秒，无任何操作，隐藏鼠标和控制器/ms | `number` | 2000 |
-| isShowMultiple | 是否显示播放倍数功能 | `boolean` | true |
-| isShowSet | 是否显示设置功能 | `boolean` | true |
-| isShowScreenshot | 是否显示截图功能 | `boolean` | true |
-| isShowPicture | 是否显示画中画 | `boolean` | true |
-| isShowWebFullScreen | 是否显示网页全屏 | `boolean` | true |
+| hideMouseTime | 多少毫秒，无任何操作，隐藏鼠标和控制器/ms | `number` | 2000 |
+| isShowMultiple | 是否显示播放倍数功能 | `boolean` | true |
+| isShowSet | 是否显示设置功能 | `boolean` | true |
+| isShowScreenshot | 是否显示截图功能 | `boolean` | true |
+| 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 {
+> name: T;
+> url: string;
+> }
+> ```
+>
+>
#### 方法
@@ -94,7 +118,7 @@ const App = () => (
#### 回调函数
-```tsx
+```typescript
export interface videoAttributes {
/**
* @description 是否播放
@@ -133,18 +157,21 @@ export interface videoAttributes {
*/
error: null | T;
}
+
+export type qualityKey = '360P' | '540P' | '720P' | '1080P';
```
-| 名称 | 说明 | 类型 |
-| ------------------- | ------------------------ | ---------------------------- |
-| onProgressMouseDown | 滑动条按下不放，拖动回调 | (e: videoAttributes) => void |
-| onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void |
-| onPlay | 视频开始播放回调 | (e: videoAttributes) => void |
-| onPause | 视频暂停播放的回调 | (e: videoAttributes) => void |
-| onTimeChange | 视频在播放，时间变化回调 | (e: videoAttributes) => void |
-| onEndEd | 视频结束时回调 | (e: videoAttributes) => void |
-| onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void |
-| onError | 视频播放失败的回调 | () => void |
+| 名称 | 说明 | 类型 |
+| ------------------- | ------------------------ | ------------------------------------ |
+| onProgressMouseDown | 滑动条按下不放，拖动回调 | (e: videoAttributes) => void |
+| onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void |
+| onPlay | 视频开始播放回调 | (e: videoAttributes) => void |
+| onPause | 视频暂停播放的回调 | (e: videoAttributes) => void |
+| onTimeChange | 视频在播放，时间变化回调 | (e: videoAttributes) => void |
+| onEndEd | 视频结束时回调 | (e: videoAttributes) => void |
+| onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void |
+| onError | 视频播放失败的回调 | () => void |
+| onQualityChange | 视频清晰度改变时的回调 | (e：callBackType)=> void |
#### `JoLPlaye`r接收的参数接口如下：:point_down: