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 |