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: