@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/component/p.md

@@ -0,0 +1,55 @@
+---
+title: p
+lang: zh-CN
+---
+
+# p
+
+::: warning 注意：p标签需要设置宽高尺寸才能正确显示。
+:::
+
+## 基础用法
+
+:::demo
+
+component/p/basic
+
+:::
+
+## gravity
+
+* `center`
+* `left`
+* `right`
+
+<img src="/component/p/gravity.jpg" />
+
+:::demo
+
+component/p/gravity
+
+:::
+
+## API
+
+### Attributes
+
+| Name                | Description        | Type                                                                    | Default      |
+| ------------------- | -------------------|-------------------------------------------------------------------------|--------------|
+| focusable           | 是否可以获得焦点      | ^[boolean]                                                              | false        |
+| duplicateParentState | 继承父类的状态        | ^[boolean]                                                              | false        |
+| sid ^(2.7)                        | 给一个元素标记一个`string id`，可随意赋值，需确保唯一                    | ^[string]                                                               | -            |
+| viewLayerType                     | 设置`layerType`                                       | ^[enum]`'hardware' \| 'soft' \| 'none'`                                 | -            |
+| clipBounds                        | 设置裁剪区域                                              | ^[object]`'{left : number, right: number, top: number, bottom: number}'` | -            |
+| name                              | 指定元素的`name`                                         | ^[string]                                                               | -            |
+| selected                          | 选择状态                                                | ^[boolean]                                                              | false        |
+| visible                           | 是否可见                                                | ^[boolean]                                                              | false        |
+| visibility                        | 可见性                                                 | ^[enum]`'visible' \| 'invisible' \| 'gone'`                             | visible      |
+| size                              | 设置元素大小                                              | ^[array]`[width : number,height : number]`                              | -            |
+| layout                            | 设置元素位置及大小                                           | ^[array]`[x : number, y : number, width : number,height : number]`      | -            |
+| textColor           | 文字颜色            | ^[string]                                                               | —            |
+| focusColor          | 焦点文字颜色         | ^[string]                                                               | —            |
+| selectColor         | 选中文字颜色         | ^[string]                                                               | —            |
+| numberOfLines | 用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。 | `number`                                                                | —            |
+| ellipsizeMode | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以，在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | ^[enum]`head \| middle \| tail \| clip`                                 |—       |
+

package/rules/.docs/zh-CN/component/play-mark-view.md

@@ -0,0 +1,25 @@
+---
+title: PlayMarkView
+lang: zh-CN
+---
+
+# PlayMarkView
+
+```vue
+<qt-play-mark
+  style="width: 25px; height: 25px; position: absolute"
+  markColor="#FFD97C"
+/>
+```
+
+### Attributes
+
+| Name        | Description    | Type                                                 | Default |
+|-------------|----------------|------------------------------------------------------|---------|
+| markColor   | 以字符串形式指定的背景色   | ^[string]`'例如黑色：#000000 或者 #ff000000`                | -       |       |
+| stateColor  | 非焦点和焦点状态下不同颜色值 | ^[array]`数据中第0个代表普通状态，1为焦点状态，如['#FFFFFF','#FF0000']` | -       |       |
+| makeLinearGradientColors  | 线性渐变色          | ^[array]`数据中第0个代表起始颜色，1为结束颜色，如['#FFFFFF','#FF0000']` | -       |       |
+| roundCorner | 圆角值            | `number`                                             | -       |
+| gap         | 间隔             | `number`                                             | -       |
+| showType         | 类型             | ^[enum]`'0 (从底向上)' \| '1 (中间）' `                     | -       |
+

package/rules/.docs/zh-CN/component/player/global-event.md

@@ -0,0 +1,24 @@
+---
+title: PagePlayer
+lang: zh-CN
+---
+
+# 全局播放事件监听
+
+[全局播放事件监听](/zh-CN/component/player-manager/global-event)可以监听整个应用中的播放事件。
+
+## 应用场景一：整个应用视频播放事件埋点统计
+
+## 应用场景二：整个应用视频播放处理用户交互
+
+
+
+
+
+
+
+
+
+
+
+

package/rules/.docs/zh-CN/component/player/interceptor.md

@@ -0,0 +1,48 @@
+---
+title: PagePlayer
+lang: zh-CN
+---
+
+# 播放数据拦截器
+
+拦截器是调用数据之前执行的对数据处理的钩子函数。拦截器可以处理复杂的异步播放数据。
+
+支持以下播放数据拦截：
+
+* [`MediaItemList` 拦截器](/zh-CN/component/player-manager/media-item-list-interceptor)
+* [`MediaItem` 拦截器](/zh-CN/component/player-manager/media-item-interceptor)
+* [`MediaSourceList` 拦截器](/zh-CN/component/player-manager/media-source-list-interceptor)
+* [`MediaSource` 拦截器](/zh-CN/component/player-manager/media-source-interceptor)
+
+## 应用场景一：媒资详情页，需要通过 id 获取媒资分集列表
+
+播放`MediaItemList`数据结构中分集列表`list`设置为`[]`，通过设置`MediaItemList`拦截器异步请求数据填充分集列表`list`。
+
+## 应用场景二：播放媒资分集时，需要通过媒资分集信息进行用户播放权益鉴权
+
+通过设置`MediaItem`拦截器异步请求鉴权数据，根据鉴权结果决定是否继续播放。
+
+## 应用场景三：播放媒资分集时，需要通过媒资分集 id 获取播放地址列表
+
+播放`MediaItem`数据结构中播放源列表`mediaSourceList`设置为`[]`，通过设置`MediaItem`拦截器异步请求数据填充播放源列表`mediaSourceList`。
+
+## 应用场景四：播放媒资源时，需要给视频地址动态拼接参数
+
+通过设置`MediaSource` 局部拦截器处理播放地址参数。
+
+## 应用场景四：对整个应用获取的媒资播放源地址进行处理，
+
+例如：整个应用播放视频源地址域名动态切换，通过设置`MediaSource` 全局拦截器处理播放地址参数。
+
+
+
+
+
+
+
+
+
+
+
+
+

package/rules/.docs/zh-CN/component/player/media-player.md

@@ -0,0 +1,43 @@
+---
+title: MediaPlayer
+lang: zh-CN
+---
+
+# MediaPlayer
+
+## 一、简介
+
+快应用音视频播放基于安卓`MediaPlayer`。
+
+::: tip MediaPlayer
+你可以在 [Android Documentation](https://developer.android.com/reference/android/media/MediaPlayer) 上查看更详细的介绍。
+:::
+
+
+## 二、播放状态
+
+### 1、MediaPlayer 状态图
+
+<img src="/component/player/mediaplayer_state_diagram.gif" />
+
+`MediaPlayer`的状态图是一个反映其内部状态转换的直观工具。图中的椭圆代表`MediaPlayer`驻留的状态，而弧则代表播放控制，驱动`MediaPlayer`
+状态进行过渡。这些弧有两种类型：单箭头表示同步函数调用，双箭头表示异步函数调用。
+
+在`MediaPlayer`的生命周期中，有几个关键状态需要特别关注：
+
+* `Idle`（就绪）状态：当`MediaPlayer`创建实例或者调用`reset()`函数后，播放器就处于这个状态。此时，播放器已经准备好，但还没有开始播放任何内容。
+* `Error`（错误）状态：由于某些原因，如支持的音视频格式分辨率过高、输入数据流超时等，`MediaPlayer`可能进入错误状态。在这种状态下，播放器通常无法继续播放，需要进行错误处理。
+
+### 2、MediaPlayer 生命周期
+
+`MediaPlayer`的生命周期始于`Idle`状态，然后可能经过一系列的状态转换，最终结束。以下是`MediaPlayer`生命周期中的一些关键阶段：
+
+* `Idle`（就绪）状态：这是`MediaPlayer`的起始状态，表示播放器已经准备好，但还没有开始播放。
+* `Prepared`（准备）状态：在`Idle`状态之后，你需要调用`prepare()`或`prepareAsync()`方法来准备播放器。这将使播放器进入`Prepared`状态，此时播放器已经加载了音视频数据，但还没有开始播放。
+* `Started`（开始）状态：一旦播放器准备好，你可以调用`start()`方法来开始播放。这将使播放器进入`Started`状态，开始从当前位置播放音视频内容。
+* `Paused`（暂停）状态：在播放过程中，你可以调用`pause()`方法来暂停播放。这将使播放器进入`Paused`状态，保持当前的播放位置，以便稍后恢复播放。
+* `Stopped`（停止）状态：如果你需要完全停止播放，可以调用`stop()`方法。这将使播放器进入`Stopped`状态，清除所有的播放状态，包括播放位置、音轨、字幕等。
+* `Released`（释放）状态：在播放结束或者不再需要播放器时，你应该调用`release()`
+  方法来释放播放器资源。这将使播放器进入`Released`状态，结束其生命周期。在这个阶段，播放器不再可用，所有的资源都被释放，无法再恢复到其他状态。
+
+

package/rules/.docs/zh-CN/component/player/page-player.md

@@ -0,0 +1,118 @@
+---
+title: PagePlayer
+lang: zh-CN
+---
+
+# 页面播放控制
+
+大部分场景都是在页面中进行播放，所以需要在页面生命周期函数中进行播放控制。
+
+::: tip 关于页面声明周期
+
+[点击查看详细](/zh-CN/guide/page/page-lifecycle)
+
+:::
+
+## 一、播放常用方法简介
+
+### 1、暂停播放操作（不销毁播放器）
+
+* `start` 开始播放
+* `pause` 暂停播放
+
+调用`start`开始视频播放后，调用`pause`会停止播放。 调用`pause`暂停视频播放后，调用`start`会继续播放。
+
+### 2、停止播放操作（毁播放器）
+
+* `resume` 恢复播放
+* `stop` 停止播放
+
+调用`stop`停止视频播放后，调用`resume`会重新播放。
+
+### 3、播放资源回收和重置操作
+
+* `reset` 重置资源
+* `release` 回收资源
+
+不需要播放器的时候，调用`reset`和`release`方法进行资源的回收和重置。
+
+::: warning 注意
+
+* 如果离开当前页面，跳转其他页面进行交互操作，则需要停止（调用`stop`方法）当前页面的播放。
+* 如果一直在当前页面进行交互操作，一般使用暂停（调用`pause`方法）播放。如果有需要则使用停止播放。
+:::
+
+## 二、页面声明周期播放控制
+
+### 1、页面`onESCreate`生命周期中进行播放器初始化并进行开始播放。
+
+以`ESVideoPlayer`为例：
+
+```ts
+function onESCreate() {
+  //1、初始化播放
+  videoPlayer.value?.initialize()
+}
+
+const onPlayerInitialized = (playerType) => {
+  const mediaSource: ESMediaSource = {
+    uri: 'http://extcdn.hsrc.tv/channelzero/2024/02/05/d477660a-3eb6-4c7f-b82b-0b61c035505c.mp4'
+  }
+  const mediaSourceList: ESMediaSourceList = {
+    index: 0,
+    list: [mediaSource]
+  }
+  //2、初始化完毕后，调用播放方法
+  videoPlayer.value?.playMediaSourceList(mediaSourceList)
+  //3、开始播放
+  videoPlayer.value?.start(0)
+}
+```
+
+### 2、页面`onESPause`或者`onESStop`生命周期中停止播放。
+
+```ts
+function onESStop() {
+
+  stopDurationTimer()
+  stopProgressTimer()
+
+  //停止播放
+  videoPlayer.value?.stop()
+
+  isPageStopped = true
+}
+```
+
+### 3、页面`onESDestroy`生命周期中重置回收播放资源
+
+```ts
+function onESStop() {
+  //1、重置播放资源
+  videoPlayer.value?.reset()
+  //2、回收播放资源
+  videoPlayer.value?.release()
+}
+```
+
+### 4、页面`onESResume`生命周期中恢复播放
+
+```ts
+function onESResume() {
+  //1、如果页面停止后并且恢复后
+  if (isPageStopped) {
+    //2、恢复播放
+    videoPlayer.value?.resume()
+  }
+  isPageStopped = false
+}
+```
+
+::: warning 注意：调用 resume 恢复播放时，如果需要从上次播放的位置继续播放，则播放的时候需要开启定时器主动调用 getCurrentPosition 方法获取视频的播放进度。
+:::
+
+:::demo ## 完整示例
+
+component/video-player/page
+
+:::

package/rules/.docs/zh-CN/component/player/player.md

@@ -0,0 +1,190 @@
+---
+title: IPlayer
+lang: zh-CN
+---
+
+# IPlayer 播放接口
+
+## 简介
+
+ESIPlayer 是一套通用播放器接口。
+[`ESVideoPlayer`](/zh-CN/component/video-player/introduction)
+、[`ESAudioPlayer`](/zh-CN/component/audio-player/introduction)
+、[`ESAudioPlayerService`](/zh-CN/component/audio-service-player/introduction)
+、[`ESPlayerManager`](/zh-CN/component/player-manager/introduction)等播放组件都基于此接口进行实现。
+
+::: warning 注意：使用快应用内置的播放器，例如 ESVideoPlayer、ESAudioPlayer、ESAudioPlayerService等播放组件，都需要集成 ESIPlayer 并进行初始化。
+:::
+
+## 集成
+
+### 第一步、`package.json`添加依赖库
+
+* `@extscreen/es3-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-player)
+
+### 第二步、集成`ESPlayer`
+
+在`main.ts`中集成
+
+```ts
+import { createESPlayer } from "@extscreen/es3-player";
+
+const player = createESPlayer();
+app.use(player);
+```
+
+### 第三步、初始化
+
+在`App.vue`中或者使用之前
+
+```ts
+import { useESPlayer } from "@extscreen/es3-player";
+import type { ESPlayerConfiguration, ESPlayerDisplay } from "@extscreen/es3-player";
+
+const playerManager = useESPlayer()
+const playerDisplay: ESPlayerDisplay = {
+  screenWidth: device.getScreenWidth(),//屏幕的宽度
+  screenHeight: device.getScreenHeight(),//屏幕的高度
+}
+const config: ESPlayerConfiguration = {
+  debug: true,
+  display: playerDisplay,
+  device: {
+    deviceType: runtime.getRuntimeDeviceType() ?? ''//设备类型
+  }
+}
+playerManager.init(config)
+```
+
+## API
+
+### DataStructure
+
+#### ESMediaSource
+
+媒资资源
+
+| Name          | Description        | Type                          |   Default   |
+| -------------- | ------------------| ----------------------------|---------|
+| id             | 媒资资源唯一标识符   | ^[number] / ^[string]        |   —    |
+| uri            | 媒资资源地址        | ^[any]                       |   —    |
+| definition     | 媒资资源清晰度      | ^[ESPlayerDefinition]         |   —    |
+| interceptors   | 媒资资源拦截器      | ^[Array<ESIPlayerInterceptor>]|   —    |
+| metadata       | 媒资资源信息        | ^[ESMediaMetadata]            |   —    |
+
+#### ESMediaSourceList
+
+媒资资源列表
+
+| Name          | Description        | Type                          |   Default   |
+| -------------- | ------------------| ----------------------------|---------|
+| index          | 默认播放媒资资源的索引| ^[number]                 |   —    |
+| list           | 媒资资源列表        | ^[Array<ESMediaSource>]       |   —    |
+| interceptors   | 媒资资源列表拦截器   | ^[Array<ESIPlayerInterceptor>] |   —    |
+| metadata       | 媒资资源信息        | ^[ESMediaMetadata]             |   —    |
+| position       | 媒资资源播放位置     | ^[ESPlayerPosition]            |   —    |
+
+### Attributes
+
+| Name                      | Description           | Type             |  Default   |
+| -------------------------| -----------------------| -----------------|---------|
+| playerType               | 播放器类型               |^[number]    |-1    |
+| playMediaSourceAuto      | 是否自动播放媒资数据源      |^[boolean]  |true    |
+| backgroundColor          | 播放器背景颜色            | ^[string] |`transparent`    |
+| playerWidth              | 播放器宽度               | ^[number]  |1920    |
+| playerHeight             | 播放器高度               |^[number]    |1080    |
+| playerZIndex             | 播放器z-index           |^[number]    |1    |
+
+### Events
+
+| Name                          | Description           | Type                                                                                                      |
+| ----------------------------- | --------------------  | --------------------------------------------------------------------------------------------------------- |
+| onPlayerInitialized           | 播放器初始化事件          | ^[Function]`onPlayerInitialized() => void`                                |
+| onPlayerPlayMediaSourceList   | 播放媒资资源列表事件      | ^[Function]`onPlayerPlayMediaSourceList(mediaSourceList: ESMediaSourceList) => void`         |
+| onPlayerPlayMediaSource       | 播放媒资资源事件         | ^[Function]`onPlayerPlayMediaSource(mediaSource: ESMediaSource) => void`                      |
+| onPlayerInterceptSuccess      | 播放拦截器成功事件         | ^[Function]`onPlayerInterceptSuccess(result: ESPlayerInterceptResult) => void`                      |
+| onPlayerInterceptError        | 播放拦截器错误事件         | ^[Function]`onPlayerInterceptError(error: ESPlayerInterceptError) => void`                      |
+| onPlayerSizeChanged           | 播放器尺寸变化事件         | ^[Function]`onPlayerSizeChanged(playerWidth: number, playerHeight: number) => void`                      |
+| onPlayerPreparing             | 播放器准备中事件         | ^[Function]`onPlayerPreparing() => void`                      |
+| onPlayerPrepared              | 播放器准备好事件         | ^[Function]`onPlayerPrepared() => void`                      |
+| onPlayerBufferStart           | 播放器开始缓冲事件         | ^[Function]`onPlayerBufferStart() => void`                      |
+| onPlayerBufferEnd             | 播放器缓冲结束事件         | ^[Function]`onPlayerBufferEnd() => void`                      |
+| onPlayerPlaying               | 播放器开始播放事件         | ^[Function]`onPlayerPlaying() => void`                      |
+| onPlayerProgressChanged       | 播放进度事件         | ^[Function]`onPlayerProgressChanged(progress: number) => void`                      |
+| onPlayerDurationChanged       | 播放总长度事件         | ^[Function]`onPlayerDurationChanged(duration: number) => void`                      |
+| onPlayerSeekStart             | 播放器开始快进事件         | ^[Function]`onPlayerSeekStart() => void`                      |
+| onPlayerSeekCompleted         | 播放器快进结束事件         | ^[Function]`onPlayerSeekCompleted() => void`                      |
+| onPlayerPaused                | 播放器暂停播放事件         | ^[Function]`onPlayerPaused() => void`                      |
+| onPlayerResumed               | 播放器恢复播放事件         | ^[Function]`onPlayerResumed() => void`                      |
+| onPlayerStopped               | 播放器停止播放事件         | ^[Function]`onPlayerStopped() => void`                      |
+| onPlayerCompleted             | 播放器播放完毕事件         | ^[Function]`onPlayerCompleted() => void`                      |
+| onPlayerError                 | 播放错误事件         | ^[Function]`onPlayerError(error: ESPlayerError) => void`                      |
+| onPlayerInfo                  | 播放信息事件         | ^[Function]`onPlayerInfo(info: ESPlayerInfo) => void`                      |
+| onPlayerNoMediaSourceCanPlay  | 无媒资资源可播放事件         | ^[Function]`onPlayerNoMediaSourceCanPlay(next: boolean) => void`                      |
+| onPlayerVolumeChanged         | 播放器音量变化事件         | ^[Function]`onPlayerVolumeChanged(leftVolume: number, rightVolume: number) => void`                      |
+| onPlayerLeftVolumeChanged     | 播放器左声道音量变化事件         | ^[Function]`onPlayerLeftVolumeChanged(volume: number) => void`                      |
+| onPlayerRightVolumeChanged    | 播放器右声道音量变化事件         | ^[Function]`onPlayerRightVolumeChanged(volume: number) => void`                      |
+| onPlayerDefinitionListChanged | 播放器媒资清晰度列表事件         | ^[Function]`onPlayerDefinitionListChanged(definitionList: Array<ESPlayerDefinition>) => void`                      |
+| onPlayerDefinitionChanged     | 播放器媒资清晰度事件         | ^[Function]`onPlayerDefinitionChanged(definition: ESPlayerDefinition) => void`                      |
+| onPlayerPlayRateListChanged   | 播放速率列表事件         | ^[Function]`onPlayerPlayRateListChanged(rateList: Array<ESPlayerRate>) => void`                      |
+| onPlayerPlayRateChanged       | 播放速率事件         | ^[Function]`onPlayerPlayRateChanged(rate: ESPlayerRate) => void`                      |
+| onPlayerDecodeListChanged     | 播放器解码方式列表事件         | ^[Function]`onPlayerDecodeListChanged(decodeList: Array<ESPlayerDecode>) => void`                      |
+| onPlayerDecodeChanged         | 播放器解码方式事件         | ^[Function]`onPlayerDecodeChanged(decode: ESPlayerDecode) => void`                      |
+| onPlayerAspectRatioListChanged| 画面比例列表事件         | ^[Function]`onPlayerAspectRatioListChanged(aspectRatioList: Array<ESPlayerAspectRatio>) => void`                      |
+| onPlayerAspectRatioChanged    | 画面比例事件         | ^[Function]`onPlayerAspectRatioChanged(aspectRatio: ESPlayerAspectRatio) => void`                      |
+| onPlayerPlayMediaSourceListModeListChanged    | 播放媒资资源列表模式列表事件         | ^[Function]`onPlayerPlayMediaSourceListModeListChanged(playModeList: Array<ESPlayerPlayMode>) => void`                      |
+| onPlayerPlayMediaSourceListModeChanged    | 播放媒资资源列表模式事件         | ^[Function]`onPlayerPlayMediaSourceListModeChanged(playMode: ESPlayerPlayMode) => void`                      |
+| onPlayerRenderListChanged     | 渲染模式列表事件         | ^[Function]`onPlayerRenderListChanged(renderList: Array<ESPlayerRender>) => void`                      |
+| onPlayerRenderChanged         | 渲染模式事件         | ^[Function]`onPlayerRenderChanged(render: ESPlayerRender) => void`                      |
+| onPlayerViewSizeChanged       | 播放器尺寸变化事件         | ^[Function]`onPlayerViewSizeChanged(playerWidth: number, playerHeight: number) => void`                      |
+| onPlayerViewChanged           | 播放器视图变化事件         | ^[Function]`onPlayerViewChanged() => void`                      |
+| onPlayerClickable             | 播放器视图可点击事件         | ^[Function]`onPlayerClickable(playerClickable: boolean) => void`                      |
+
+### Exposes
+
+| Name                             | Description                 | Type                                                                              |
+| -------------------------------- | --------------------------- | --------------------------------------------------------------------------------- |
+| initialize                       | 初始化                       | ^[Function]`() => void`                                                             |
+| isInitialized                    | 判断播放管理器是否初始化         | ^[Function]`() => boolean`                                                          |
+| setVisible                       | 设置播放管理器是否可见          | ^[Function]`(value: boolean) => void`                                                |
+| playMediaSourceList              | 播放媒资资源列表               | ^[Function]`(mediaSourceList: ESMediaSourceList) => void`                            |
+| playMediaSourceByIndex           | 根据媒资资源索引进行播放         | ^[Function]`(index: number) => void`                                                |
+| playMediaSourceById              | 根据媒资资源唯一标识符进行播放    | ^[Function]`(id: string) => void`                                                    |
+| playMediaSource                  | 播放媒资资源                  | ^[Function]`(mediaSource: ESMediaSource) => void`                                    |
+| playNextMediaSource              | 播放下一个媒资资源             | ^[Function]`() => void`                                                              |
+| playPreviousMediaSource          | 播放上一个媒资资源             | ^[Function]`() => void`                                                              |
+| getMediaSourceList               | 获取正在播放的媒资资源列表       | ^[Function]`() => Array<ESMediaSource> \| null`                                      |
+| getMediaSource                   | 根据媒资资源索引获取媒资资源     | ^[Function]`(index: number) => ESMediaSource \| null`                                 |
+| getPlayingMediaSourceIndex       | 获取正在播放的媒资资源的索引     | ^[Function]`() => number`                                                             |
+| getPlayingMediaSourceList        | 获取正在播放的媒资资源列表       | ^[Function]`() => ESMediaSourceList \| null`                                          |
+| getPlayingMediaSource            | 获取正在播放的媒资资源          | ^[Function]`() => ESMediaSource \| null`                                              |
+| play                             | 播放器的播放方法               | ^[Function]`(...params: Array<any>) => void`                                        |
+| start                            | 播放器的开始播放方法            | ^[Function]`(position: number) => void`                                           |
+| pause                            | 播放器的暂停播放方法            | ^[Function]`() => void`                                                           |
+| resume                           | 恢复播放器播放                 | ^[Function]`() => void`                                                          |
+| stop                             | 停止播放器播放                 | ^[Function]`() => void`                                                            |
+| reset                            | 重置播放器                    | ^[Function]`() => void`                                                           |
+| release                          | 回收播放器资源                 | ^[Function]`() => void`                                                         |
+| seekTo                           | 播放快进                      | ^[Function]`(progress: number) => void`                                          |
+| getDuration                      | 获取播放总时长                 | ^[Function]`() => void`                                                     |
+| getCurrentPosition               | 获取当前播放的进度              | ^[Function]`() => void`                                                         |
+| setSize                          | 设置播放器的尺寸                | ^[Function]`(width: number, height: number) => void`                            |
+| setPlayRate                      | 设置播放速率                   | ^[Function]`(playRate: ESPlayerRate) => void`                               |
+| setPlayMode                      | 设置播放模式                   | ^[Function]`(playMode: ESPlayerPlayMode) => void`                           |
+| setDefinition                    | 设置播放媒资清晰度              | ^[Function]`(definition: ESPlayerDefinition) => void`                     |
+| setCache                         | 设置播放缓存策略                | ^[Function]`(cache: ESPlayerCache) => void`                                    |
+| setDecode                        | 设置播放解码方式                | ^[Function]`(decode: ESPlayerDecode) => void`                                 |
+| setRender                        | 设置播放渲染方式                | ^[Function]`(render: ESPlayerRender) => void`                                 |
+| setAspectRatio                   | 设置播放画面比例                | ^[Function]`(aspectRatio: ESPlayerAspectRatio) => void`                  |
+| getLeftVolume                    | 获取左声道音量                  | ^[Function]`() => void`                                                   |
+| getRightVolume                   | 获取右声道音量                  | ^[Function]`() => void`                                                  |
+| setLeftVolume                    | 设置左声道音量                  | ^[Function]`(leftVolume: number) => void`                                 |
+| setRightVolume                   | 设置右声道音量                  | ^[Function]`(rightVolume: number) => void`                               |
+| setVolume                        | 设置左右声道音量                 | ^[Function]`(volume: number) => void`                                        |
+| getVolume                        | 获取音量                       | ^[Function]`() => void`                                                       |
+| setStopped                       | 设置播放管理器的停止状态          | ^[Function]`(stopped: boolean) => void`                                      |
+| setEnabled                       | 设置播放管理器的可用状态          | ^[Function]`(enabled: boolean) => void`                                      |
+| setProgressCallback              | 设置播放进度回调                 | ^[Function]`(callback: ESPlayerProgressCallback) => void`          |
+| setDurationCallback              | 设置播放总进度回调               | ^[Function]`(callback: ESPlayerDurationCallback) => void`           |
+| invalidate                       | 刷新播放视图                    | ^[Function]`() => void`                                                      |
+

package/rules/.docs/zh-CN/component/player-manager/aspect-ratio.md

@@ -0,0 +1,51 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 画面比例
+
+内置画面比例如下：
+
+* `ES_PLAYER_AR_ASPECT_FIT_PARENT = 0`
+* `ES_PLAYER_AR_ASPECT_FILL_PARENT = 1`
+* `ES_PLAYER_AR_ASPECT_WRAP_CONTENT = 2`
+* `ES_PLAYER_AR_ASPECT_MATCH_PARENT = 3`
+* `ES_PLAYER_AR_16_9_FIT_PARENT = 4`
+* `ES_PLAYER_AR_4_3_FIT_PARENT = 5`
+* `ES_PLAYER_AR_235_FIT_PARENT = 6`
+
+## 监听画面比例事件
+
+* 支持的画面比例列表：`onPlayerAspectRatioListChanged`
+* 当画面比例发生变化：`onPlayerAspectRatioChanged`
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+## 获取当前画面比例
+
+```ts
+const aspectRatioManager = useESPlayerAspectRatioManager()
+aspectRatioManager.getAspectRatio()
+```
+
+## 设置画面比例
+
+```ts
+playerManager.value?.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_16_9_FIT_PARENT)
+```
+
+或者
+
+```ts
+const aspectRatioManager = useESPlayerAspectRatioManager()
+aspectRatioManager.setAspectRatio(ESPlayerAspectRatio.ES_PLAYER_AR_4_3_FIT_PARENT)
+```
+
+:::demo ## 完整示例
+
+component/player-manager/aspect-ratio
+
+:::

package/rules/.docs/zh-CN/component/player-manager/basic.md

@@ -0,0 +1,69 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 基础用法
+
+以`ESPlayerManager` + [`ESVideoPlayer`](/zh-CN/component/video-player/introduction)为例
+
+#### 第一步、引入`ESPlayerManager`组件，并声明在`<template>`
+
+```vue
+
+<es-player-manager
+  ref='playerManager'
+  :playerList='playerListRef'
+  class='es-video-player-manager-page-css'
+/>
+```
+
+#### 第二步、集成并注册`ESVideoPlayer`播放组件。
+
+::: tip ESVideoPlayer 集成
+[点击查看详细](/zh-CN/component/video-player/installation)
+:::
+
+```ts
+import { ESVideoPlayer } from '@extscreen/es3-video-player'
+
+const playerList = [markRaw(ESVideoPlayer)]
+const playerListRef = ref(playerList)
+```
+
+#### 第三步、调用`initialize`方法进行初始化。
+
+`playerManager.value?.initialize()`
+
+#### 第四步、设置播放数据。
+
+```ts
+
+//1.拼装 ESMediaSource 数据
+const mediaSource: ESMediaSource = {
+  uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4',
+}
+//2.拼装 ESMediaSourceList 数据
+const mediaSourceList: ESMediaSourceList = {
+  index: 0,
+  list: [mediaSource],
+}
+//3.拼装 ESMediaItem 数据
+const mediaItem: ESMediaItem = {
+  mediaSourceList,
+}
+//4.拼装 ESMediaItemList 数据
+const playList: ESMediaItemList = {
+  index: 0,
+  list: [mediaItem],
+}
+playerManager.value?.playMediaList(playList)
+```
+
+#### 第五步、默认自动进行播放。
+
+:::demo ## 完整示例
+
+component/player-manager/basic
+
+:::

package/rules/.docs/zh-CN/component/player-manager/control.md

@@ -0,0 +1,32 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 播放控制
+
+-----------------------------------
+* 开始播放：`start`
+* 暂停播放：`pause`
+* 恢复播放：`resume`
+* 停止播放：`stop`
+-----------------------------------
+* 播放下一个源：`playNextMediaSource`
+* 播放上一个源：`playPreviousMediaSource`
+* 根据id播放源：`playMediaSourceById`
+* 根据index播放源：`playMediaSourceByIndex`
+-----------------------------------
+* 播放下一个媒资：`playNextMedia`
+* 播放上一个媒资：`playPreviousMedia`
+* 根据id播放媒资：`playMediaById`
+* 根据index播放媒资：`playMediaByIndex`
+-----------------------------------
+::: warning 注意：
+[`start`和`resume`区别、`pause`和`stop`区别](/zh-CN/component/player/page-player#一、播放常用方法简介)
+:::
+
+:::demo ## 完整示例
+
+component/player-manager/control
+
+:::