Video 视频

视频播放组件，支持自定义控制、自动播放、循环等

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" />

<!-- 带封面 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" poster="/static/logo.png" />

<!-- 控制条 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :controls="true" />
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :controls="false" />

<!-- 自动播放 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :autoplay="true" :muted="true" />
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :autoplay="false" />

<!-- 循环播放 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :loop="true" />
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :loop="false" />

<!-- 静音 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :muted="true" />
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" :muted="false" />

<!-- 填充模式 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" objectFit="contain" />
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" objectFit="cover" />
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" objectFit="fill" />

<!-- 自定义样式 -->
  <re-video src="https://www.w3schools.com/html/mov_bbb.mp4" customStyle="border-radius: 8px;" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-video />。

API

Video Props

名称类型默认值描述必传
srcstring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}视频地址 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
posterstring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}封面图 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
controlsbooleantrue @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否显示控制条 @default true @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
autoplaybooleanfalse @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否自动播放 @default false @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
loopbooleanfalse @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否循环 @default false @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
mutedbooleanfalse @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}是否静音 @default false @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
objectFitstringcontain @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}填充模式 @default contain @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y
customStylestring"" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}自定义样式 @default "" @uniPlatform {"app":{"android":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"ios":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"x"},"harmony":{"uniVer":"x","unixVer":"5.07","unixVaporVer":"5.07"}},"mp":{"weixin":{"uniVer":"x","unixVer":"5.07"}},"web":{"uniVer":"x","unixVer":"5.07"}}Y

Video Events

名称参数描述
play--
pause-暂停时触发
ended--
errordetail: UTSJSONObject错误时触发
timeupdatedetail: UTSJSONObject-
fullscreen-changedetail: UTSJSONObject-

Video Slots

名称描述
--
TrendArrow 趋势箭头
展示涨/跌趋势箭头及百分比，支持自定义颜色和文案
Watermark 水印
水印组件，在页面上添加文字或图片水印