Video Video Playback
When to use
- Video control, used to play video resources natively supported by HTML such as mp4, mov, etc.
Component Example
Component Properties
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
autoplay | Auto play, may not work in certain scenarios | boolean | false |
canPlayThrough | When loading is complete and can play | (ctx: object) => void | - |
controls | Control bar | boolean | true |
controlsList | Customize native control bar | 'nodownload' | 'nofullscreen' | 'noremoteplayback' | 'disablePictureInPicture' | - |
loop | Loop playback, whether to automatically loop playback after completion | boolean | false |
muted | Whether to mute | boolean | false |
onEnded | When video playback ends | (ctx: object) => void | - |
onEnterFullscreen | When entering fullscreen | (ctx: object) => void | - |
onError | When playback error occurs | (ctx: object) => void | - |
onExitFullscreen | When exiting fullscreen | (ctx: object) => void | - |
onPause | When video pauses | (ctx: object) => void | - |
onPlay | When playback starts | (ctx: object) => void | - |
pipControls | Picture-in-picture, only works on chrome and safari browsers, not effective on firefox and mobile | boolean | false |
playbackRate | Speed list | array | |
playbackRateControls | Whether to show playback speed | boolean | false |
poster | Cover image URL | string | - |
sizeFit | Screen adaptation mode | 'contain' | 'fill' | 'cover' | 'scale-dowm' | 'none' | 'contain' |
timeUpdate | When playback time updates | (ctx: object) => void | - |
title | Native title, used to set html native title property, displayed when user mouse hovers | string | - |
url | Video URL address | string | 'https://cloud.video.taobao.com/play/u/1804320196/p/1/e/6/t/1/287344840104.mp4' |
volume | Volume level, minimum is 0, maximum is 1 | number | 1 |
volumeControls | Whether to show volume control | boolean | true |