Skip to main content

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

[
  0.8,
  1,
  1.5,
  2
]
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

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
Copyright © 2024钉钉(中国)信息技术有限公司和/或其关联公司浙ICP备18037475号-4