Video 视频播放
何时使用
-视频控件,用于播放 mp4、mov 等 HTML 原生支持的视频资源。
组件示例
组件属性
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
autoplay | 自动播放,可能在某些场景下无法起作用 | boolean | false |
canPlayThrough | 当加载完成可以播放时 | (ctx: object) => void | - |
controls | 控制条 | boolean | true |
controlsList | 定制原生控制条 | 'nodownload' | 'nofullscreen' | 'noremoteplayback' | 'disablePictureInPicture' | - |
loop | 循环播放,播放完成后是否自动循环播放 | boolean | false |
muted | 是否静音 | boolean | false |
onEnded | 当视频播放结束时 | (ctx: object) => void | - |
onEnterFullscreen | 当全屏时 | (ctx: object) => void | - |
onError | 当播放出错时 | (ctx: object) => void | - |
onExitFullscreen | 当退出全屏时 | (ctx: object) => void | - |
onPause | 当视频暂停时 | (ctx: object) => void | - |
onPlay | 当开始播放时 | (ctx: object) => void | - |
pipControls | 画中画,只在 chrome,safari 浏览器上生效,firefox 和手机端不生效 | boolean | false |
playbackRate | 倍数列表 | array |
|
playbackRateControls | 是否显示倍数播放 | boolean | false |
poster | 封面图片URL | string | - |
sizeFit | 画面适配模式 | 'contain' | 'fill' | 'cover' | 'scale-dowm' | 'none' | 'contain' |
timeUpdate | 当播放时间更新时 | (ctx: object) => void | - |
title | 原生标题,用于设置html 原生 title属性,在用户鼠标hover时显示 | string | - |
url | 视频URL地址 | string | 'https://cloud.video.taobao.com/play/u/1804320196/p/1/e/6/t/1/287344840104.mp4' |
volume | 音量大小,最小为0,最大为1 | number | 1 |
volumeControls | 是否显示声音控件 | boolean | true |