@quicktvui/ai 1.0.0

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

@@ -0,0 +1,83 @@
+---
+title: ul
+lang: zh-CN
+---
+
+# ul
+
+## API
+
+### Attributes
+
+| Name                          | Description                                                                                                        | Type                                                                                                                            | Default  |
+|-------------------------------|--------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------|----------|
+| horizontal                    | 开启横向列表模式，默认为false。                                                                                                 | `boolean`                                                                                                                       | false    |
+| numberOfRows                  | 指定列表的行数，一般直接传入数据源条数 `length` 即可。                                                                                   | `number`                                                                                                                        | -        |
+| initialContentOffset          | 初始位移值 -- 在列表初始化时即可指定滚动距离，避免初始化后再通过 scrollTo 系列方法产生的闪动。                                                             | `number`                                                                                                                        | 0        |
+| scrollEventThrottle           | 指定滑动事件的回调频率，传入数值指定了多少毫秒(ms)组件会调用一次 `onScroll` 回调事件，默认 200ms                                                        | `number`                                                                                                                        | 200      |
+| showScrollIndicator           | 是否显示垂直滚动条。 因为目前 ListView 其实仅有垂直滚动一种方向，水平滚动会导致 `onEndReached` 等一堆问题暂不建议使用，所以 `showScrollIndicator` 也仅用来控制是否显示垂直滚动条。 | `boolean`                                                                                                                       | false    |
+| preloadItemNumber             | 预加载：指定当列表滚动至倒数第几个时触发 `onLoadMore` 回调。                                                                              | `number`                                                                                                                        | 1        |
+| disableAdvancedFocusSearch    | 关闭`ul`寻焦性能优化，在某些不正常情况下，可尝试关闭，默认开启                                                                                  | `boolean`                                                                                                                       | true     |
+| endHintEnabled                | 设置是否开启底部回弹反馈效果                                                                                                     | `boolean`                                                                                                                       | true     |
+| focusMemory                   | 设置是否记忆列表上次选中焦点的问题                                                                                                  | `boolean`                                                                                                                       | true     |
+| initFocusPositionAfterLayout  | 设置在`ul`布局完成后，首次获得焦点的子`View`                                                                                        | `number`                                                                                                                        | -1       |
+| listenFocusSearchOnFail       | 设置是否监听在`ul`内部寻焦失败事件                                                                                                | `number`                                                                                                                        | false    |
+| makeChildVisibleType          | 设置子`View`获得焦点时，如果展示不完整，如何滚动`ul`的方式，分别为`normal`和`center`                                                            | `string`                                                                                                                        | `center` |
+| makeChildVisibleClampBackward | 设置子`View`获得焦点时，如果展示不完整，向前滚动`ul`时设置的偏移量                                                                             | `number`                                                                                                                        | 0        |
+| makeChildVisibleClampForward  | 设置子`View`获得焦点时，如果展示不完整，向后滚动`ul`时设置的偏移量                                                                             | `number`                                                                                                                        | 0        |
+| enableSelectOnFocus           | 设置子`View`的`select`状态是否跟随焦点的变化而变化                                                                                   | `number`                                                                                                                        | `ALL`    |  |
+| scrollStateChangeEnabled      | `scrollStateChanged` 事件开关，默认true                                                                                   | `boolean`                                                                                                                       | true     |
+| clipChildren                  | 设置是否将超出边界的子`View`切除                                                                                                | `boolean`                                                                                                                       | false    |
+| descendantFocusability        | 设置焦点的分发方式,`0`为在后代元素前，`1`为在后代元素后，`2`为阻止分发                                                                           | `number`                                                                                                                           | 0        |
+| blockFocusDirections          | 当`div`内部寻焦为空时，是否拦截焦点                                                                                               | ^[object]`['left', 'right', 'top', 'bottom'] `                                                                                  | -        |
+| nextFocusName                 | 按下媒体键下一个焦点的目标                                                                                                      | ^[object]`{left:'',right:'',up:'',down:'')}`                                                                                    | -        |
+| disableAdvancedFocusSearch    | 关闭默认的焦点搜索方式。默认ul优先在列表内部寻焦以提高效率                                                                                     | `boolean`                                                                                                                       | false    |
+| listenBoundEvent              | 是否开启on-bind,un-bind事件监听                                                                                            | `boolean`                                                                                                                       | false    |
+| setUseNegativeLayout          | 是否打开消极的layout方式，兼容性api，防止某些场景列表频繁刷新。                                                                               | `boolean`                                                                                                                       | false    |
+| initPosition                  | 列表初始化时一些滚动位置、初始化焦点等设置                                                                                              | ^[object]`{focusPosition : number(默认焦点位置), scrollToPosition: number(默认定位位置), scrollOffset: number(滚动offset), force: true(强制刷新)}` | -        |
+| scrollThresholdHorizontal     | 焦点在列表内部横向焦点变化时，小于此值的滚动会被忽略                                                                                         | `number`                                                                                                                        | 0        |
+| scrollThresholdVertical       | 焦点在列表内部纵向焦点变化时，小于此值的滚动会被忽略                                                                                         | `number`                                                                                                                        | 0        |
+| shakePreCheckNumber           | 底部回弹效果触发时距最后一个item的个数                                                                                              | `number`                                                                                                                        | 1        |
+| setSelectChildPosition           | 设置默认选中的孩子的位置                                                                                              | `number`                                                                                                                        | -        |
+
+
+### Events
+
+| Name  | Description      | Type                                        |
+| ------| ---------------- | ------------------------------------------- |
+| endReached          | 当所有的数据都已经渲染过，并且列表被滚动到最后一条时，将触发 `onEndReached` 回调。                                                                                                                                                                                                                                                                                                   | `Function`                                 |
+| momentumScrollBegin | 在 `ScrollView` 开始滑动的时候调起                                                                                                                                                                                                                                                                                                                                                   | `Function`                                 |
+| momentumScrollEnd   | 在 `ScrollView` 结束滑动的时候调起                                                                                                                                                                                                                                                                                                                                                   | `Function`                                 |
+| scrollStateChanged  | 当触发 `ListView` 的滑动状态时回调，Event.newState:1(开始滑动)、Event.newState:2(滑动中)、Event.newState:0(滑动结束)、Event.offsetX(x轴坐标)、Event.offsetY(x轴坐标)                                                                                                                                                                                                                 | `Function`                                 |
+| scroll              | 当触发 `ListView` 的滑动事件时回调，在 `ListView` 滑动时回调，因此调用会非常频繁，请使用 `scrollEventThrottle` 进行频率控制。 注意：ListView 在滚动时会进行组件回收，不要在滚动时对 renderRow() 生成的 ListItemView 做任何 ref 节点级的操作（例如：所有 callUIFunction 和 measureInWindow 方法），回收后的节点将无法再进行操作而报错。Event.offsetX(x轴坐标)、Event.offsetY(x轴坐标) | `Function`                                 |
+| loadMore            | 当需要`分页`加载数据时，将触发 `onLoadMore` 回调，会触发此函数，可配合参数（preloadItemNumber）使用                                                                                                                                                                                                                                                                                  | `Function`                                 |
+| childFocus          | 同`div`相同                                                                                                                                                                                                                                                                                                                                                                          | `Function`                                 |
+| item-bind           | ul中一个item创建时回调                                                                                                                                                                                                                                                                                                                                                               | `Function` (通过参数position获得item位置） |
+| item-unbind         | ul中一个item回收利用时回调                                                                                                                                                                                                                                                                                                                                                           | `Function`(通过参数position获得item位置）  |
+
+### Exposes
+
+| Method                       | Description                    | Type                                                                          |
+|------------------------------|--------------------------------|-------------------------------------------------------------------------------|
+| requestFocus                 | 请求焦点                         | ^[Function]`() => void`                                                         |
+| requestChildFocus            | 请求孩子焦点                      | ^[Function]`(position: number) => void`                                       |
+| clearFocus                   | 清除焦点                         | ^[Function]`() => void`                                                       |
+| requestFocusDirectly         | 直接请求焦点                      | ^[Function]`(direction?: QTFocusDirection) => void`                                       |
+| setVisibility                | 设置是否可见                      | ^[Function]`(v: QTVisibility) => void`                                       |
+| changeDescendantFocusability | 改变子元素获焦策略                 | ^[Function]`(descendant: QTDescendantFocusability) => void`                                  |
+| setBackGroundColor           | 设置背景色                        | ^[Function]`(focusAbility : string) => void`                                  |
+| blockRootFocus               | 阻塞焦点                         | ^[Function]`() => void`                                  |
+| unBlockRootFocus             | 取消阻塞焦点                      | ^[Function]`() => void`                                  |
+| changeAlpha                  | 设置alpha                        | ^[Function]`(alpha :number) => void`                                          |
+| setScale                     | 设置形变                          | ^[Function]`(x :number, y :number, duration: number) => void`                                          |
+| setPosition                  | 设置位置                          | ^[Function]`(x :number, y :number, z: number) => void`                                          |
+| invalidate                   | 刷新布局                          | ^[Function]`() => void`|
+| dispatchFunctionForTarget    | 调用目标的方法                     | ^[Function]`(targetName: string, functionTargetName: string, params: Array<QTNativeParams>, delay: number) => void`|
+| setBlockFocusDirections      | 设置阻塞焦点的方向                  | ^[Function]`(directionList: Array<QTFocusDirectionName>) => void`|
+| setBlockFocusDirectionsOnFail| 失败的时候设置阻塞焦点的方向          | ^[Function]`(directionList: Array<QTFocusDirectionName>) => void`|
+| hasFocus                     | 是否有焦点                         | ^[Function]`() => Promise<boolean>`|
+| isFocused                    | 是否获得了焦点                      | ^[Function]`() => Promise<boolean>`|
+| getLocationOnScreen          | 获取在屏幕上的位置                   | ^[Function]`() => Promise<QTEventData<QTLocation>>`|
+| getViewState                 | 获取视图的状态                      | ^[Function]`() => Promise<QTViewState>`|
+| getChildViewState            | 获取孩子视图的状态                   | ^[Function]`(position: number) => Promise<QTViewState>`|
+| changeVisibility             | 设置可见性                        | ^[Function]`(visibility : string) => void visibility: visible、invisible、gone`|

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

@@ -0,0 +1,49 @@
+---
+title: VideoPlayer
+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
+videoPlayer.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/video-player/aspect-ratio

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

@@ -0,0 +1,55 @@
+---
+title: VideoPlayer
+lang: zh-CN
+---
+
+# 基础用法
+
+#### 第一步、引入`ESVideoPlayer`组件，并声明在`<template>`
+
+```vue
+
+<es-video-player
+  ref='videoPlayer'
+  :playerWidth='playerWidth'
+  :playerHeight='playerHeight'
+  class='es-video-player-page-css'
+  @onPlayerInitialized='onPlayerInitialized'
+/>
+```
+
+::: warning 注意：要设置播放器宽度 playerWidth 和高度 playerHeight 属性
+:::
+
+#### 第二步、调用`initialize`方法进行初始化。
+
+`videoPlayer.value?.initialize()`
+
+#### 第三步、在播放器`onPlayerInitialized`初始化成功回调事件中设置播放数据。
+
+```ts
+  const onPlayerInitialized = (playerType) => {
+  const mediaSource: ESMediaSource = {
+    //播放地址
+    uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4',
+  }
+  const mediaSourceList: ESMediaSourceList = {
+    //默认播放地址的索引
+    index: 0,
+    //播放地址列表
+    list: [mediaSource],
+  }
+  //设置播放地址数据
+  videoPlayer.value?.playMediaSourceList(mediaSourceList)
+  //开始播放
+  videoPlayer.value?.start(0)
+}
+```
+
+#### 第四步、调用`start`方法开始播放。
+
+` videoPlayer.value?.start(0)`
+
+:::demo ## 完整示例
+
+component/video-player/basic

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

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

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

@@ -0,0 +1,46 @@
+---
+title: VideoPlayer
+lang: zh-CN
+---
+
+# 解码方式
+
+内置解码方式如下：
+
+* `ES_PLAYER_DECODE_HARDWARE = 0`
+* `ES_PLAYER_DECODE_SOFTWARE = 1`
+
+## 监听解码方式事件
+
+* 支持的解码方式列表：`onPlayerDecodeListChanged`
+* 当解码方式发生变化：`onPlayerDecodeChanged`
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+## 获取当前解码方式
+
+```ts
+const playerDecodeManager = useESPlayerDecodeManager()
+playerDecodeManager.getDecode()
+```
+
+## 设置解码方式
+
+```ts
+videoPlayer.value?.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE)
+```
+
+或者
+
+```ts
+const playerDecodeManager = useESPlayerDecodeManager()
+playerDecodeManager.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE)
+```
+
+:::demo ## 完整示例
+
+component/video-player/decode
+
+:::

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

@@ -0,0 +1,85 @@
+---
+title: VideoPlayer
+lang: zh-CN
+---
+
+# 清晰度
+
+内置清晰度如下：
+
+* `ES_PLAYER_DEFINITION_UNKNOWN = 0`
+* `ES_PLAYER_DEFINITION_SD = 1`
+* `ES_PLAYER_DEFINITION_HD = 2`
+* `ES_PLAYER_DEFINITION_FULL_HD = 3`
+* `ES_PLAYER_DEFINITION_ORIGINAL = 4`
+* `ES_PLAYER_DEFINITION_BLUERAY = 5`
+* `ES_PLAYER_DEFINITION_FOURK = 6`
+* `ES_PLAYER_DEFINITION_2K = 7`
+
+## 设置不同清晰度的视频地址
+
+仅支持通过不同的视频地址设置清晰度。
+
+```ts
+const mediaSourceList: ESMediaSourceList = {
+  index: 0,
+  list: [
+    {
+      //表明此地址为SD清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_SD,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4',
+    },
+    {
+      //表明此地址为HD清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_HD,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4',
+    },
+    {
+      //表明此地址为FULL_HD清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_FULL_HD,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4',
+    },
+    {
+      //表明此地址为4k清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_FOURK,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4',
+    },
+  ],
+}
+```
+
+## 监听清晰度事件
+
+* 支持的清晰度列表：`onPlayerDefinitionListChanged`
+* 当清晰度发生变化：`onPlayerDefinitionChanged`
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+## 获取当前清晰度
+
+```ts
+const playerDefinitionManager = useESPlayerDefinitionManager()
+playerDefinitionManager.getDefinition()
+```
+
+## 设置清晰度
+
+```ts
+videoPlayer.value?.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_SD)
+
+```
+
+或者
+
+```ts
+const playerDefinitionManager = useESPlayerDefinitionManager()
+playerDefinitionManager.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_2K)
+```
+
+:::demo ## 完整示例
+
+component/video-player/definition
+
+:::

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

@@ -0,0 +1,16 @@
+---
+title: VideoPlayer
+lang: zh-CN
+---
+
+# 监听播放事件
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+:::demo ##
+
+component/video-player/event
+
+:::

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

@@ -0,0 +1,268 @@
+---
+title: VideoPlayer
+lang: zh-CN
+---
+
+# 全局监听播放事件
+
+#### 第一步、创建实现`ESPlayerEventListener`接口的类型对象
+
+::: warning 注意：getId 方法需要返回应用唯一ID
+:::
+
+```ts
+export function createESPlayerEventListener(): ESPlayerEventListener {
+
+  let enabled = true
+  let player: ESIPlayer
+
+  const log = useESLog()
+  const TAG = 'PlayerEventListener'
+
+  function getId(): string {
+    return 'ESPlayerEventListener'
+  }
+
+  function setEnabled(value: boolean): void {
+    enabled = value
+  }
+
+  function isEnabled(): boolean {
+    return enabled
+  }
+
+  function setPlayer(p: ESIPlayer): void {
+    player = p
+  }
+
+  function getPlayer(): ESIPlayer {
+    return player
+  }
+
+  function onPlayerInitialized(playerType: number): void {
+    //
+  }
+
+  function onPlayerPlayMediaSourceList(playUriInfo: ESMediaSourceList): void {
+    //
+  }
+
+  function onPlayerPlayMediaSource(mediaSource: ESMediaSource): void {
+    //
+  }
+
+  function onPlayerSizeChanged(width: number, height: number): void {
+    //
+  }
+
+  function onPlayerPreparing(): void {
+    //
+  }
+
+  function onPlayerPrepared(): void {
+    //
+  }
+
+  function onPlayerBufferStart(): void {
+    //
+  }
+
+  function onPlayerBufferEnd(): void {
+    //
+  }
+
+  function onPlayerPlaying(): void {
+    //
+  }
+
+  function onPlayerProgressChanged(progress: number): void {
+    //
+  }
+
+  function onPlayerDurationChanged(duration: number): void {
+    //
+  }
+
+  function onPlayerSeekStart(): void {
+    //
+  }
+
+  function onPlayerSeekCompleted(): void {
+    //
+  }
+
+  function onPlayerPaused(): void {
+    //
+  }
+
+  function onPlayerResumed(): void {
+    //
+  }
+
+  function onPlayerStopped(): void {
+    //
+  }
+
+  function onPlayerCompleted(): void {
+    //
+  }
+
+  function onPlayerError(error: ESPlayerError): void {
+    //
+  }
+
+  function onPlayerInfo(info: ESPlayerInfo): void {
+    //
+  }
+
+  function onPlayerNoMediaSourceCanPlay(next: boolean): void {
+    //
+  }
+
+  function onPlayerVolumeChanged(leftVolume: number, rightVolume: number): void {
+    //
+  }
+
+  function onPlayerLeftVolumeChanged(leftVolume: number): void {
+    //
+  }
+
+  function onPlayerRightVolumeChanged(rightVolume: number): void {
+    //
+  }
+
+  function onPlayerDefinitionListChanged(definitionList: Array<ESPlayerDefinition>): void {
+    //
+  }
+
+  function onPlayerDefinitionChanged(definition: ESPlayerDefinition): void {
+    //
+  }
+
+  function onPlayerPlayRateListChanged(rateList: Array<ESPlayerRate>): void {
+    //
+  }
+
+  function onPlayerPlayRateChanged(rate: ESPlayerRate): void {
+    //
+  }
+
+  function onPlayerDecodeListChanged(decodeList: Array<ESPlayerDecode>): void {
+    //
+  }
+
+  function onPlayerDecodeChanged(decode: ESPlayerDecode): void {
+    //
+  }
+
+  function onPlayerAspectRatioListChanged(aspectRatioList: Array<ESPlayerAspectRatio>): void {
+    //
+  }
+
+  function onPlayerAspectRatioChanged(aspectRatio: ESPlayerAspectRatio): void {
+    //
+  }
+
+  function onPlayerPlayMediaSourceListModeListChanged(modeList: Array<ESPlayerPlayMode>): void {
+    //
+
+    function onPlayerPlayMediaSourceListModeChanged(mode: ESPlayerPlayMode): void {
+      //
+    }
+
+    function onPlayerViewChanged(): void {
+      //
+    }
+
+    function onPlayerViewSizeChanged(playerWidth: number, playerHeight: number): void {
+      //
+    }
+
+    function onPlayerClickable(playerClickable: boolean): void {
+      //
+    }
+
+    function onPlayerInterceptSuccess(value: ESPlayerInterceptResult): void {
+      //
+    }
+
+    function onPlayerInterceptError(value: ESPlayerInterceptError): void {
+      //
+    }
+
+    function onPlayerRenderChanged(render: ESPlayerRender): void {
+      //
+    }
+
+
+    function onPlayerRenderListChanged(renderList: Array<ESPlayerRender>): void {
+      //
+    }
+
+    return {
+      getId,
+      setEnabled,
+      isEnabled,
+      setPlayer,
+      getPlayer,
+      onPlayerInitialized,
+      onPlayerPlayMediaSourceList,
+      onPlayerPlayMediaSource,
+      onPlayerInterceptSuccess,
+      onPlayerInterceptError,
+      onPlayerSizeChanged,
+      onPlayerPreparing,
+      onPlayerPrepared,
+      onPlayerBufferStart,
+      onPlayerBufferEnd,
+      onPlayerPlaying,
+      onPlayerProgressChanged,
+      onPlayerDurationChanged,
+      onPlayerSeekStart,
+      onPlayerSeekCompleted,
+      onPlayerPaused,
+      onPlayerResumed,
+      onPlayerStopped,
+      onPlayerCompleted,
+      onPlayerError,
+      onPlayerInfo,
+      onPlayerNoMediaSourceCanPlay,
+      onPlayerVolumeChanged,
+      onPlayerLeftVolumeChanged,
+      onPlayerRightVolumeChanged,
+      onPlayerDefinitionListChanged,
+      onPlayerDefinitionChanged,
+      onPlayerPlayRateListChanged,
+      onPlayerPlayRateChanged,
+      onPlayerDecodeListChanged,
+      onPlayerDecodeChanged,
+      onPlayerAspectRatioListChanged,
+      onPlayerAspectRatioChanged,
+      onPlayerPlayMediaSourceListModeListChanged,
+      onPlayerPlayMediaSourceListModeChanged,
+      onPlayerViewChanged,
+      onPlayerClickable,
+      onPlayerRenderChanged,
+      onPlayerRenderListChanged
+    }
+  }
+}
+```
+
+#### 第二步、注册监听
+
+```ts
+import {
+  useESPlayerEventManager
+} from "@extscreen/es3-player";
+
+const playerManagerEventManager = useESPlayerEventManager()
+const playerManagerEventListener = createESPlayerEventListener()
+playerManagerEventManager.addListener(playerManagerEventListener)
+```
+
+:::demo ## 完整示例
+
+component/video-player/event-global
+
+:::

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

@@ -0,0 +1,33 @@
+---
+title: VideoPlayer
+lang: zh-CN
+---
+
+# 集成
+
+## 第一步、`package.json`添加依赖库
+
+* `@extscreen/es3-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-player)
+* `@extscreen/es3-video-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-video-player)
+
+## 第二步、集成`ESPlayer`
+
+[点击查看详细](/zh-CN/component/player/player#集成)
+
+## 第三步、集成`ESVideoPlayer`
+
+在`main.ts`中集成
+
+```ts
+import { createESVideoPlayer } from "@extscreen/es3-video-player";
+
+const videoPlayer = createESVideoPlayer();
+app.use(videoPlayer);
+```
+
+## 示例
+
+你可以在[quicktvui-playground](https://github.com/quicktvui/quicktvui-playground/tree/master/es-video-player) 上查看示例。
+
+你可以在[quicktvui-api-demo-vue3](https://github.com/quicktvui/quicktvui-api-demo-vue3/tree/main/src/components/es-video-player)
+上查看API Demo。