tmui-cli 2.0.3 → 2.0.5

package/data/uniappx/component/video.md

@@ -0,0 +1,630 @@
+::: sourceCode
+## video
+
+> GitCode: https://gitcode.com/dcloud/uni-component/tree/alpha/uni_modules/uni-video
+
+> GitHub: https://github.com/dcloudio/uni-component/tree/alpha/uni_modules/uni-video
+
+> 组件类型：UniVideoElement 
+
+ 视频
+
+### 兼容性 
+| Web | 微信小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
+
+### 属性 
+| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
+| :- | :- | :- |  :-: | :- |
+| loop | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否循环播放 |
+| src | string(string.VideoURIString) |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 视频资源地址 |
+| initial-time | number | 0 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 指定视频初始播放位置 |
+| duration | number |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 指定视频长度 |
+| controls | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否显示默认播放控件（播放/暂停按钮、播放进度、时间） |
+| danmu-list | Danmu\[\] | \[\] | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 弹幕列表 |
+| danmu-btn | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示弹幕按钮，只在初始化时有效，不能动态变更 |
+| enable-danmu | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否展示弹幕，只在初始化时有效，不能动态变更 |
+| autoplay | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否自动播放 |
+| muted | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 是否静音播放 |
+| page-gesture | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 在非全屏模式下，是否开启亮度与音量调节手势 |
+| direction | number | 90 | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 设置全屏时视频的方向，不指定则根据宽高比自动判断。有效值为 0（正常竖向）, 90（屏幕逆时针90度）, -90（屏幕顺时针90度） |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| 0 | Web x / 微信小程序 4.41（部分支持，见上） | 正常竖向 |
+| 90 | Web x / 微信小程序 4.41（部分支持，见上） | 屏幕逆时针90度 |
+| -90 | Web x / 微信小程序 4.41（部分支持，见上） | 屏幕顺时针90度 |
+| show-progress | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示进度条 |
+| show-fullscreen-btn | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示全屏按钮 |
+| show-play-btn | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示视频底部控制栏的播放按钮 |
+| show-center-play-btn | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示视频中间的播放按钮 |
+| show-loading | boolean | true | Web x / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示loading控件 |
+| enable-progress-gesture | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否开启播放手势，即双击切换播放、暂停 |
+| object-fit | string | "contain" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 当视频大小与 video 容器大小不一致时，视频的表现形式。 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| contain | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11（部分支持，见上） | 包含 |
+| fill | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11（部分支持，见上） | 填充 |
+| cover | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11（部分支持，见上） | 覆盖 |
+| poster | string |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效 |
+| show-mute-btn | boolean | false | Web x / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否显示静音按钮 |
+| title | string |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 视频的标题，全屏时在顶部展示 |
+| play-btn-position | string |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 播放按钮的位置 |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| bottom | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | controls bar上 |
+| center | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 视频中间 |
+| enable-play-gesture | boolean | false | Web x / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 是否开启播放手势，即双击切换播放、暂停 |
+| auto-pause-if-navigate | boolean |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 当跳转到其它页面时，是否自动暂停本页面的视频 |
+| auto-pause-if-open-native | boolean |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 当跳转到其它小程序宿主原生页面时，是否自动暂停本页面的视频 |
+| vslide-gesture | boolean | false | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS x / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture） |
+| vslide-gesture-in-fullscreen | boolean | true | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS(VDOM) 4.61 / HarmonyOS(Vapor) x（部分支持，见上） | 在全屏模式下，是否开启亮度与音量调节手势 |
+| ad-unit-id | string |   | Web x / 微信小程序 4.41 / Android x / iOS x（部分支持，见上） | 视频前贴广告单元ID |
+| poster-for-crawler | string |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址 |
+| codec | string | "hardware" | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS(Vapor) x（部分支持，见上） | 解码器选择 |
+| http-cache | boolean | false | Web x / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS(Vapor) x（部分支持，见上） | 是否对 http、https 视频源开启本地缓存 |
+| play-strategy | number | 0 | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS x（不支持） | 播放策略 |
+| is-live | boolean |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 是否为直播源 |
+| show-bottom-progress | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否展示底部进度条 |
+| show-casting-button | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>显示投屏按钮。安卓在同层渲染下生效，支持 DLNA 协议；iOS 支持 AirPlay 和 DLNA 协议。可以通过[VideoContext](../api/create-video-context)的相关方法进行操作。 |
+| picture-in-picture-mode | string/Array |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string/Array)*<br/>设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： \["push", "pop"]） |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| [] | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 取消小窗 |
+| push | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 路由 push 时触发小窗 |
+| pop | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 路由 pop 时触发小窗 |
+| picture-in-picture-show-progress | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否在小窗模式下显示播放进度 |
+| picture-in-picture-init-position | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>小窗模式下小窗的初始显示位置，格式为 (alignment, y)，其中 alignment 表示小窗吸附屏幕左侧还是右侧，可选值为 left、right，y 代表小窗最顶部所在的屏幕高度百分比 |
+| enable-auto-rotation | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效 |
+| show-screen-lock-button | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作 |
+| show-snapshot-button | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否显示截屏按钮，仅在全屏时显示 |
+| show-background-playback-button | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否展示后台音频播放按钮 |
+| background-poster | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>进入后台音频播放后的通知栏图标（Android 独有） |
+| referrer-policy | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>格式固定为 `https://servicewechat.com/{appid}/{version}/page-frame.html`，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本； |
+| 合法值 | 兼容性 | 描述 |
+| :- |  :-: | :- |
+| origin | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 发送完整的referrer |
+| no-referrer | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 不发送 |
+| is-drm | boolean |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(boolean)*<br/>是否为 DRM 视频源 |
+| provision-url | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (Android) |
+| certificate-url | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>DRM 设备身份认证 url，仅 is-drm 为 true 时生效 (iOS) |
+| license-url | string |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>DRM 获取加密信息 url，仅 is-drm 为 true 时生效 |
+| preferred-peak-bit-rate | number |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>指定码率上界，单位为比特每秒 |
+| header | UTSJSONObject |   | HarmonyOS(Vapor) x（部分支持，见上） | 自定义 header |
+| @loadedmetadata | (event: [UniVideoLoadedMetadataEvent](#univideoloadedmetadataevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 视频元数据加载完成时触发 |
+| @play | (event: UniEvent) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 当开始/继续播放时触发 |
+| @pause | (event: UniEvent) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 当暂停播放时触发 |
+| @ended | (event: UniEvent) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 当播放到视频末尾时触发 |
+| @timeupdate | (event: [UniVideoTimeUpdateEvent](#univideotimeupdateevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 播放进度变化时触发，event.detail = { currentTime, duration }。触发频率 250ms 一次 |
+| @fullscreenchange | (event: [UniVideoFullScreenChangeEvent](#univideofullscreenchangeevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 当视频进入和退出全屏时触发，event.detail = { fullScreen, direction }，direction取为 vertical 或 horizontal |
+| @waiting | (event: UniEvent) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS x（部分支持，见上） | 视频出现缓冲时触发 |
+| @error | (event: [UniVideoErrorEvent](#univideoerrorevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 播放出错时触发 |
+| @progress | (event: [UniVideoProgressEvent](#univideoprogressevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 加载进度变化时触发，只支持一段加载。event.detail = { buffered }，百分比 |
+| @fullscreenclick | (event: [UniVideoFullScreenClickEvent](#univideofullscreenclickevent)) => void |   | Web 4.0 / 微信小程序 x / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 视频全屏播放时点击屏幕触发。event.detail = { screenX, screenY, screenWidth, screenHeight } |
+| @controlstoggle | (event: [UniVideoControlsToggleEvent](#univideocontrolstoggleevent)) => void |   | Web x / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61（部分支持，见上） | 切换 controls 显示隐藏时触发。event.detail = { show } |
+| @recycle | (event: [UniVideoRecycleEvent](#univideorecycleevent)) => void |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS 5.0（部分支持，见上） | 组件回收时的生命周期钩子 |
+| @reuse | (event: [UniVideoReuseEvent](#univideoreuseevent)) => void |   | Web x / 微信小程序 x / Android x / iOS x / HarmonyOS 5.0（部分支持，见上） | 组件复用时的生命周期钩子 |
+| @enterpictureinpicture | eventhandler |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>播放器进入小窗 |
+| @leavepictureinpicture | eventhandler |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>播放器退出小窗 |
+| @seekcomplete | eventhandler |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>seek 完成时触发 |
+| @castinguserselect | eventhandler |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>用户选择投屏设备时触发 detail = { state: "success"/"fail" } |
+| @castingstatechange | eventhandler |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>投屏成功/失败时触发 detail = { type, state: "success"/"fail" } |
+| @castinginterrupt | eventhandler |   | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>投屏被中断时触发 |
+
+### 事件
+#### UniVideoTimeUpdateEvent
+timeupdate 事件<br/>播放进度变化时触发
+```mermaid
+graph LR
+  
+UniVideoTimeUpdateEvent -- Extends --> UniVideoEvent
+  style UniVideoEvent color:#42b983
+  click UniVideoEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent"
+```
+##### UniVideoTimeUpdateEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniVideoTimeUpdateEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| currentTime | number | 是 | 当前进度 |
+| duration | number | 是 | 总进度 |
+
+#### UniVideoFullScreenChangeEvent
+fullscreenchange 事件<br/>当视频进入和退出全屏是触发
+```mermaid
+graph LR
+  
+UniVideoFullScreenChangeEvent -- Extends --> UniVideoEvent
+  style UniVideoEvent color:#42b983
+  click UniVideoEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent"
+```
+##### UniVideoFullScreenChangeEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniVideoFullScreenChangeEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| fullScreen | boolean | 是 | 是否全屏 |
+| direction | string | 是 | 横竖屏 |
+@@| 合法值 | 描述 |
+@@| :- | :- |
+@@| vertical | 竖屏 |
+@@| horizontal | 横屏 |
+
+#### UniVideoErrorEvent
+error 事件<br/>视频播放出错时触发
+```mermaid
+graph LR
+  
+UniVideoErrorEvent -- Extends --> UniVideoEvent
+  style UniVideoEvent color:#42b983
+  click UniVideoEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent"
+```
+##### UniVideoErrorEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **VideoError** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| errCode | number | 是 | 统一错误码 |
+@@| 合法值 | 描述 |
+@@| :- | :- |
+@@| 100001 | 网络错误 |
+@@| 200001 | 内部错误 |
+@@| 300001 | SDK错误 |
+| errSubject | string | 是 | 统一错误主题（模块）名称 |
+| data | any | 否 | 错误信息中包含的数据 |
+| cause | Error | 否 | 源错误信息，可以包含多个错误，详见SourceError |
+| errMsg | string | 是 |  |
+
+#### UniVideoProgressEvent
+progress 事件<br/>加载进度变化时触发
+```mermaid
+graph LR
+  
+UniVideoProgressEvent -- Extends --> UniVideoEvent
+  style UniVideoEvent color:#42b983
+  click UniVideoEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent"
+```
+##### UniVideoProgressEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniVideoProgressEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| buffered | number | 是 | 加载进度百分比 |
+
+#### UniVideoFullScreenClickEvent
+fullscreenclick 事件<br/>视频播放全屏播放时点击事件
+```mermaid
+graph LR
+  
+UniVideoFullScreenClickEvent -- Extends --> UniVideoEvent
+  style UniVideoEvent color:#42b983
+  click UniVideoEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent"
+```
+##### UniVideoFullScreenClickEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniVideoFullScreenClickEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| screenX | number | 是 | 点击点相对于屏幕左侧边缘的 X 轴坐标 |
+| screenY | number | 是 | 点击点相对于屏幕顶部边缘的 Y 轴坐标 |
+| screenWidth | number | 是 | 屏幕总宽度 |
+| screenHeight | number | 是 | 屏幕总高度 |
+
+#### UniVideoControlsToggleEvent
+controlstoggle 事件<br/>切换播放控件显示隐藏时触发
+```mermaid
+graph LR
+  
+UniVideoControlsToggleEvent -- Extends --> UniVideoEvent
+  style UniVideoEvent color:#42b983
+  click UniVideoEvent "https://doc.dcloud.net.cn/uni-app-x/component/common.html#univideoevent"
+```
+##### UniVideoControlsToggleEvent 的属性值
+| 名称 | 类型 | 必填 |
+| :- | :- | :- |
+| detail | **UniVideoControlsToggleEventDetail** | 是 |
+| 名称 | 类型 | 必备 | 描述 |
+| :- | :- | :- | :- |
+| show | boolean | 是 | 是否显示 |
+
+#### UniVideoRecycleEvent
+video组件回收事件
+```mermaid
+graph LR
+  
+UniVideoRecycleEvent -- Extends --> UniCustomEvent&ltUniVideoRecycleEventDetail&gt
+  style UniCustomEvent&ltUniVideoRecycleEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniVideoRecycleEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniVideoRecycleEventDetail
+video组件回收时的状态信息
+
+###### UniVideoRecycleEventDetail 的属性值
+| 名称 | 类型 | 必填 | 描述 |
+| :- | :- | :- | :- |
+| isPlaying | boolean | 是 | 回收时是否处于播放状态。回收时暂停状态此值为false |
+| currentTime | number | 是 | 回收时播放视频的进度 |
+| duration | number | 是 | 回收时播放视频的总时长 |
+
+#### UniVideoReuseEvent
+video组件复用事件
+```mermaid
+graph LR
+  
+UniVideoReuseEvent -- Extends --> UniCustomEvent&ltUniVideoReuseEventDetail&gt
+  style UniCustomEvent&ltUniVideoReuseEventDetail&gt color:#42b983
+  click UniCustomEvent&ltUniVideoReuseEventDetail&gt "https://doc.dcloud.net.cn/uni-app-x/component/common.html#unicustomevent"
+```
+##### UniVideoReuseEventDetail
+
+###### UniVideoReuseEventDetail 的属性值
+| 名称 | 类型 | 必填 | 描述 |
+| :- | :- | :- | :- |
+| isPlaying | boolean | 是 | 复用时是否处于播放状态。复用时暂停状态此值为false |
+| currentTime | number | 是 | 复用时播放视频的进度 |
+| duration | number | 是 | 复用时播放视频的总时长 |
+
+### 视频格式
+- web端支持的视频格式，不同浏览器有差异，可查询caniuse。
+- 小程序平台支持的视频格式，需要具体查阅小程序平台的video组件文档。
+- 鸿蒙next平台的video组件使用arkUI的video组件，视频格式[另见](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-media-components-video?ha_source=Dcloud&ha_sourceId=89000448)
+	* [x] mp4
+	* [x] m4v
+	* [x] mov
+	* [x] 3gp
+	* [x] flv
+	* [x] m3u8 (本地 m3u8 文件不支持)
+- Android平台支持的视频格式如下：
+	* [x] mp4
+	* [x] m4v
+	* [x] mov
+	* [x] 3gp
+	* [x] webm 
+	* [x] m3u8 (HBuilderX3.99+支持)
+	* [x] avi（HBuilderX5.08+支持）
+- iOS平台支持的视频格式如下：
+	* [x] mp4
+	* [x] m4v
+	* [x] mov
+	* [x] 3gp
+	* [x] m3u8 (HBuilderX4.11+支持)
+
+如需其他视频格式，可自行开发uts组件插件或搜索插件市场。
+
+### src路径支持说明
+- 本地路径/static方式
+	由于uni-app/uni-app x编译时，只把/static目录下的静态资源copy到app中，所以src均需指向/static目录下。
+	其他目录的视频文件由于不会被打包进去，所以无法访问。
+	app平台文件路径会存在大小写敏感问题，为了有更好的兼容性，建议统一按大小写敏感原则处理 [详情](../api/file-system-spec.md#casesensitive)
+
+- iOS/Android支持的网络路径
+	* 网络媒体 http、https协议
+	* HBuilderX5.08及以上版本仅支持hls协议，HBuilderX5.08以下版本iOS平台支持 rtmp/hls/rtsp 协议、Android平台支持hls协议  
+
+### app平台组件实现
+
+#### HBuilderX5.08及以上版本
+- App-Android平台 使用 Google ExoPlayer 库实现，不再支持 codec、play-strategy 属性
+- App-iOS平台 使用iOS系统自带的AVPlayer 实现，不再支持 codec、play-strategy 属性
+- App-Harmony平台 使用系统video实现
+
+新版本放弃ijkplayer，主要原因是该库原作者已不维护。使用系统的video虽然会损失一些功能，如下：
+
+> 不再支持流媒体 rtmp/rtsp，仅支持hls协议  
+> 不再支持flv视频格式  
+
+但系统video的性能、质量和包体积占用更有优势。
+
+#### HBuilderX5.08以下版本  
+
+App-Android/iOS平台video组件使用ijkplayer库实现：[https://github.com/bilibili/ijkplayer](https://github.com/bilibili/ijkplayer)；
+
+弹幕功能使用DanmakuFlameMaster库实现：[https://github.com/bilibili/DanmakuFlameMaster](https://github.com/bilibili/DanmakuFlameMaster)
+
+ijkplayer库底层又使用了ffmpeg，这些库的功能较多，官方的video组件并非完全封装。有需要的开发者可以使用uts直接操作这些库。插件市场已经有一批uts库直接调用该库，[见插件市场](https://ext.dcloud.net.cn/search?q=ffmpeg&orderBy=Relevance&uni-appx=1)
+
+video组件的源码[详见](https://gitcode.com/dcloud/uni-component/tree/master/uni_modules/uni-video)。下载该uni_modules到工程下，修改源码打包，可覆盖内置的video组件。
+
+### 子组件 @children-tags
+支持所有组件
+
+- 小程序平台、web平台均支持子组件
+- App-Android平台需HBuilderX 4.25+
+- App-iOS平台需HBuilderX 4.33+
+
+子组件，可自定义视频全屏时的UI表现。开发者可以通过子组件替换默认的控件样式以及进一步扩展组件能力。hello uni-app x中给出了如何通过子组件实现自定义快进、快退控件的示例。
+
+### 上下文对象API
+
+video的操作api为[uni.createVideoContext()](../api/create-video-context.md)。
+
+给video组件设一个id属性，将id的值传入uni.createVideoContext()，即可得到video组件的上下文对象，进一步可使用`.play()`、`.stop()`等方法。
+
+### 在 list-view 中复用 @video-reuse <Badge text="HBuilderX 5.0+"/> <Badge text="HarmonyOS Vapor"/>
+
+在使用 list-view 进行列表渲染时，如果列表项中包含 video 组件，video 组件会被复用，可以使用 `recycle`、`reuse` 来控制 video 组件的复用行为。复用示例参考：[list-view-multiplex-video](https://gitcode.com/dcloud/hello-uni-app-x/blob/alpha/pages/component/list-view/list-view-multiplex-video.uvue)，伪代码如下：
+
+```vue
+<list-view class="list" @scrolltolower="onScrollTolower">
+	<list-item v-for="(_,index) in data.item_count" :key="index">
+		<text>第{{index + 1}}个视频</text>
+		 _onRecycle(e, index)" @reuse="e => _onReuse(e, index)"/>
+	</list-item>
+</list-view>
+
+```
+
+### 示例
+示例为[hello uni-app x alpha分支](https://gitcode.com/dcloud/hello-uni-app-x/blob/prod_alpha/pages/component/video/video.uvue)，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例[另见](https://gitcode.com/dcloud/hello-uni-app-x/blob/master//pages/component/video/video.uvue) 
+::: preview https://hellouniappx.dcloud.net.cn/web/#/pages/component/video/video
+
+> appRedirect https://hellouniappx.dcloud.net.cn/appredirect.html?path=pages/component/video/video
+
+>示例
+```vue
+<template>
+  <view id="video-parent" class="video-page uni-flex-item uni-theme-root" @touchstart="onVideoParentTouchStart" @touchmove="onVideoParentTouchMove"
+    @touchend="onVideoParentTouchEnd">
+    
+
+      <image v-if="data.subCompEnable && data.subCompShow" class="img-fast-backward"
+        src="../../../static/test-video/fast-backward.png" @tap.stop="fastBackward"></image>
+      <image v-if="data.subCompEnable && data.subCompShow" class="img-fast-forward"
+        src="../../../static/test-video/fast-forward.png" @tap.stop="fastForward"></image>
+      
+      <input v-if="data.subCompEnable && data.subCompShow" id="input-send-danmu" class="input-send-danmu" placeholder="请输入弹幕内容"
+        placeholder-style="color: white;" confirm-type="send" @confirm="onSendDanmuConfirm"
+        @keyboardheightchange="onSendDanmuKeyboardHeightChange" @blur="onSendDanmuBlur"></input>
+      
+
+      <template #controls>
+        <view  v-if="data.subCompControlsShow" class="video-fullscreen_controls">
+          <view style="flex-direction: row;justify-content: center;align-items: center;">
+            <view class="control-btn" @click="togglePlay">
+              <text class="control-icon">{{ data.isPlaying ? ICON_PAUSH : ICON_PLAY }}</text>
+            </view>
+            <view class="control-btn" @click="toggleDanmu">
+              <text class="control-icon">{{ data.enableDanmu ? ICON_DANMU_ACTIVE : ICON_DANMU }}</text>
+            </view>
+            <view class="control-btn" @click="toggleMute">
+              <text class="control-icon">{{ data.muted ? ICON_VOLUME_MUTE : ICON_VOLUME }}</text>
+            </view>
+          </view>
+
+          <view>
+            <view class="control-btn" @click="toggleFullscreen">
+              <text class="control-icon">{{ data.isFullscreen ? ICON_FULLSCREEN_CLOSE : ICON_FULLSCREEN }}</text>
+            </view>
+          </view>
+        </view>
+      </template>
+    
+    <scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item uni-theme-root">
+      <view class="uni-btn-v">
+        <navigator url="/pages/component/video/video-format">
+          <button type="primary" @click="pause">视频格式示例</button>
+        </navigator>
+      </view>
+      
+      <view class="uni-btn-v">
+        <navigator url="/pages/component/list-view/list-view-multiplex-video">
+          <button type="primary" @click="pause">list-view嵌套视频复用示例</button>
+        </navigator>
+      </view>
+      
+      
+      <view class="uni-btn-v">
+        <button type="primary" @click="openDialogPageVideo">dialogPage 视频格式示例</button>
+      </view>
+      
+      <boolean-data :defaultValue="data.subCompControlsEnable" title="全屏后自定义 controls"
+        @change="onSubCompControlsEnable"></boolean-data>
+      <view>
+        
+        <boolean-data :defaultValue="data.subCompEnable" title="子组件实现快进、快退、发送弹幕功能（全屏后显示）"
+          @change="onSubCompEnableChange"></boolean-data>
+        
+        
+        <boolean-data :defaultValue="data.subCompEnable" title="子组件实现快进、快退功能（全屏后显示）"
+          @change="onSubCompEnableChange"></boolean-data>
+        
+      </view>
+      <view class="uni-title">
+        <text class="uni-title-text">API示例</text>
+      </View>
+      <view class="uni-btn-v">
+        <button type="primary" @click="play">播放</button>
+      </view>
+      <view class="uni-btn-v">
+        <button type="primary" @click="pause">暂停</button>
+      </view>
+      <view class="uni-btn-v">
+        <input class="input" placeholder="输入要跳转的位置,单位s" type="number" @input="onSeekInput"></input>
+        <button type="primary" @click="seek(data.pos)">跳转到指定位置</button>
+      </view>
+      <view class="uni-btn-v">
+        <enum-data title="选择进入全屏时的视频方向" :items="data.directionItemTypes"
+          @change="onRequestFullScreenDirectionChange"></enum-data>
+        <button type="primary" @click="requestFullScreen">进入全屏</button>
+      </view>
+      <view class="uni-btn-v">
+        <button type="primary" @click="exitFullScreen">退出全屏</button>
+      </view>
+      <view class="uni-btn-v">
+        <button type="primary" @click="stop">停止</button>
+      </view>
+      
+      <view class="uni-btn-v">
+        <input class="input" placeholder="输入弹幕" value="{ 'text': '要显示的文本', 'color': '#FF0000' }" type="string"
+          @input="onSendDanmuInput"></input>
+        <button type="primary" :disabled="!data.enableDanmu" @click="sendDanmu">发送弹幕</button>
+      </view>
+      
+      <view class="uni-btn-v">
+        <enum-data title="选择倍速" :items="data.rateItemTypes" @change="onPlaybackRateChange"></enum-data>
+        <button type="primary" @click="playbackRate">设置倍速</button>
+      </view>
+      <view class="uni-title">
+        <text class="uni-title-text">属性示例</text>
+      </view>
+
+      
+      <view class="uni-btn-v">
+        <input class="input margin-10" type="string" placeholder="设置播放资源" @confirm="onSrcComfirm"></input>
+        <input class="input margin-10" type="number" placeholder="设置初始播放位置（播放前设置有效）"
+          @confirm="onInitialTimeComfirm"></input>
+        <input class="input margin-10" type="number" placeholder="设置视频时长（播放前设置有效）" @confirm="onDurationComfirm"></input>
+        <input class="input margin-10" type="string" placeholder="设置视频封面" @confirm="onPosterComfirm"></input>
+        <input class="input margin-10" type="string" placeholder="设置视频标题（仅限非 Web 平台）" @confirm="onTitleComfirm"></input>
+        <input class="input margin-10" type="string" placeholder="设置header(json格式)" @confirm="onHeaderComfirm"></input>
+      </view>
+
+      
+      <boolean-data title="设置是否展示弹幕（播放前设置有效）" :defaultValue="data.enableDanmu" @change="onEnableDanmuChange"></boolean-data>
+      
+      <boolean-data title="设置是否自动播放（播放前设置有效）" :defaultValue="data.autoplay" @change="onAutoplayChange"></boolean-data>
+      <boolean-data title="设置是否循环播放（播放完成后生效）" :defaultValue="data.loop" @change="onLoopChange"></boolean-data>
+      <boolean-data title="设置是否静音播放" :defaultValue="data.muted" @change="onMutedChange"></boolean-data>
+      <boolean-data title="设置是否显示默认播放控件" :defaultValue="data.controls" @change="onControlsChange"></boolean-data>
+      
+      <boolean-data title="设置是否显示弹幕按钮" :defaultValue="data.danmuBtn" @change="onDanmuBtnChange"></boolean-data>
+      
+      <boolean-data title="设置是否显示进度条" :defaultValue="data.showProgress" @change="onShowProgressChange"></boolean-data>
+      <boolean-data title="设置是否显示全屏按钮" :defaultValue="data.showFullscreenBtn"
+        @change="onShowFullscreenBtnChange"></boolean-data>
+      <boolean-data title="设置是否显示视频底部控制栏的播放按钮" :defaultValue="data.showPlayBtn" @change="onShowPlayBtnChange"></boolean-data>
+      <boolean-data title="设置是否显示静音按钮（仅限非 Web 平台）" :defaultValue="data.showMuteBtn"
+        @change="onShowMuteBtnChange"></boolean-data>
+      <boolean-data title="设置是否显示视频中间的播放按钮" :defaultValue="data.showCenterPlayBtn"
+        @change="onShowCenterPlayBtnChange"></boolean-data>
+      <boolean-data title="设置是否显示loading控件" :defaultValue="data.showLoading" @change="onShowLoadingChange"></boolean-data>
+      <boolean-data title="设置是否开启控制进度的手势" :defaultValue="data.enableProgressGesture"
+        @change="onEnableProgressGestureChange"></boolean-data>
+      <boolean-data title="设置是否开启播放手势,双击播放暂停（仅限非 Web 平台）" :defaultValue="data.enablePlayGesture"
+        @change="onEnablePlayGestureChange"></boolean-data>
+      
+      <boolean-data title="非全屏模式下，设置是否开启亮度与音量调节手势 page-gesture" :defaultValue="data.pageGesture"
+        @change="onPageGestureChange"></boolean-data>
+      
+      <boolean-data title="非全屏模式下，设置是否开启亮度与音量调节手势 vslide-gesture（仅限非 Web 平台）" :defaultValue="data.vslideGesture"
+        @change="onVslideGestureChange"></boolean-data>
+      <boolean-data title="全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）" :defaultValue="data.vslideGestureInFullscreen"
+        @change="onVslideGestureInFullscreenChange"></boolean-data>
+      <enum-data title="视频与video容器大小不一致时的表现" :items="data.objectFitItemTypes"
+        @change="onObjectFitChange"></enum-data>
+      
+      <boolean-data title="设置是否对http、https视频源开启本地缓存（仅 Android、iOS 平台，播放前设置有效）" :defaultValue="data.httpCache"
+        @change="onHttpCacheChange"></boolean-data>
+      
+    </scroll-view>
+  </view>
+</template>
+
+<style>
+  .video {
+    width: 100%;
+    height: 200px;
+  }
+
+  .input {
+    height: 40px;
+    color: #333333;
+    background-color: #ffffff;
+    padding: 8px 13px;
+  }
+
+  .img-fast-backward {
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    left: 12%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+  }
+
+  .img-fast-forward {
+    width: 40px;
+    height: 40px;
+    top: 50%;
+    right: 12%;
+    transform: translate(50%, -50%);
+    position: absolute;
+  }
+
+  .input-send-danmu {
+    height: 40px;
+    padding: 8px 13px;
+    margin: 0 var(--status-bar-height);
+    bottom: 100px;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #FFF;
+  }
+
+  .video-fullscreen_controls {
+    padding-left: var(--uni-safe-area-inset-left);
+    padding-right: var(--uni-safe-area-inset-right);
+    padding-bottom: 10px;
+    height: 50px;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .control-btn {
+    width: 50px;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    margin: 0 15px;
+  }
+
+  .control-icon {
+    font-family: 'uni-video-icon';
+    font-size: 24px;
+    color: rgba(255, 255, 255, 0.8);
+    text-align: center;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .input {
+      color: #ffffff;
+      background-color: #2d2d2d;
+    }
+  }
+</style>
+
+```
+
+### 参见
+- [相关 Bug](https://issues.dcloud.net.cn/?mid=component.media.video)
+- [参见uni-app相关文档](https://uniapp.dcloud.io/component/video.html)
+- [微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/component/video.html)
+- [支付宝小程序文档](https://open.alipay.com/portal/zhichi/search?keyword=video&pageIndex=1&pageSize=10&source=doc_top&type=all)
+- [百度小程序文档](https://smartprogram.baidu.com/forum/search?query=video&scope=devdocs&source=docs)
+- [抖音小程序文档](https://developer.open-douyin.com/search-page?keyword=video&secondType=all&type=1)
+- [飞书小程序文档](https://open.feishu.cn/search?from=header&page=1&pageSize=10&q=video&topicFilter=)
+- [钉钉小程序文档](https://open.dingtalk.com/search?keyword=video)
+- [QQ小程序文档](https://q.qq.com/wiki/develop/miniprogram/frame/)
+- [快手小程序文档](https://developers.kuaishou.com/page?keyword=video&from=docs)
+- [京东小程序文档](https://mp-docs.jd.com/doc/dev/framework/-1)
+- [华为快应用文档](https://developer.huawei.com/consumer/cn/doc/quickApp-References/webview-frame-overview-0000001124793625)
+- [360小程序文档](https://mp.360.cn/doc/miniprogram/dev/#/b770a184ff1f06c6b3393a0fd1132380)
+
+#### 本地文件播放
+本地视频文件，有2种方式：
+- static目录下（项目下或uni_modules下都支持static目录）
+- 使用绝对路径。相对路径转绝对路径[详见](https://doc.dcloud.net.cn/uni-app-x/uts/utsandroid.html#convert2absfullpath)
+
+### Bug & Tips@tips
+- 标准运行基座默认不包含intel x86 cpu的兼容so库，所以video组件在标准基座运行时无法在x86 cpu的设备上运行（常见于模拟器）。如需支持x86 cpu，请在manifest里配置`abiFilters`，打包或自定义基座后生效 [详见](https://doc.dcloud.net.cn/uni-app-x/collocation/manifest.html#android)
+- 5.13版本以前，App平台的video默认拦截触摸事件，会导致父组件无法响应触摸事件。5.13起在非全屏时不再拦截touch，仅在全屏时拦截。
+- video 默认宽度为300px，高度为225px。（App平台从 uni-app x 4.0起支持该默认宽高）
+- `HarmonyOS` 平台适配小窗需要在 `modules.json5` 中配置 `"preferMultiWindowOrientation": "landscape_auto"` [详情](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/module-configuration-file-V13#abilities%E6%A0%87%E7%AD%BE?ha_source=Dcloud&ha_sourceId=89000448)
+- app-iOS平台暂不支持在dialogPage中调用createVideoContext。
+- 5.07版本起，app-android、app-iOS平台不再支持codec、play-strategy属性。