视频Video

该组件基于 vue3-video-play 封装，提供功能丰富的视频播放器，支持自定义样式、播放控制、全屏模式及多种交互选项，适用于低代码平台中的媒体展示场景。

基础属性

属性名	类型	默认值	说明
width	string	'100%'	播放器宽度（支持 CSS 单位，如 px、%）
height	string	'auto'	播放器高度（支持 CSS 单位）
color	string	#409eff	播放器主题颜色（用于进度条、按钮等）
webFullScreen	boolean	false	是否启用网页全屏（非浏览器原生全屏）
speed	boolean	true	是否显示快进/快退及倍速控制
muted	boolean	false	是否静音播放
autoPlay	boolean	false	是否自动播放（受浏览器策略限制）
loop	boolean	false	是否循环播放
mirror	boolean	false	是否镜像翻转画面
ligthOff	boolean	false	是否启用“关灯模式”（背景变暗突出视频）
control	boolean	true	是否显示播放控制器
volume	number	1	默认音量（范围 0 ~ 1，步长 0.01）

⚠️ 注意：autoPlay 在多数现代浏览器中需用户交互后才能生效，或需配合 muted: true 使用。

高级属性

属性名	类型	默认值	说明
src	string	--	视频地址（可绑定）
title	string	--	视频名称（显示在播放器顶部）
poster	string	--	视频封面图（首帧加载前显示）

上下文

该组件通过 exposeContext 暴露运行时上下文，使用方式如下：

• 在可执行函数（如事件函数、属性绑定函数）中，通过 $useExposeContext(key) 获取；
• 在自定义 Hook 或其他组件中，通过 useExposeContext(key) 获取。

exposeContext({
  videoRef: () => videoRef.value
})

上下文内容：

键（key）	说明
videoRef	返回vue3-video-player 组件的实例引用，可用于调用其内部方法（如 play、pause 等）