Video - DingTalk Help Center

When to Use

A video control for playing HTML-native video resources such as mp4 and mov.

Component Example

Component Property

Attribute	Description	Type	Default
`autoplay`	Autoplay. May not work in some scenarios.	`boolean`	`false`
`canPlayThrough`	Triggered when the video is loaded and ready to play.	`(ctx: object) => void`	-
`controls`	Control bar.	`boolean`	`true`
`controlsList`	Customizes the native control bar.	`'nodownload' \| 'nofullscreen' \| 'noremoteplayback' \| 'disablePictureInPicture'`	-
`loop`	Loop playback. Whether the video restarts automatically after it finishes.	`boolean`	`false`
`muted`	Whether to mute the video.	`boolean`	`false`
`onEnded`	Triggered when the video ends.	`(ctx: object) => void`	-
`onEnterFullscreen`	Triggered when entering fullscreen.	`(ctx: object) => void`	-
`onError`	Triggered when a playback error occurs.	`(ctx: object) => void`	-
`onExitFullscreen`	Triggered when exiting fullscreen.	`(ctx: object) => void`	-
`onPause`	Triggered when the video is paused.	`(ctx: object) => void`	-
`onPlay`	Triggered when playback starts.	`(ctx: object) => void`	-
`pipControls`	Picture-in-picture. Works only in Chrome and Safari; not supported in Firefox or on mobile.	`boolean`	`false`
`playbackRate`	List of playback speeds.	`array`	`[ 0.8, 1, 1.5, 2 ]`
`playbackRateControls`	Whether to display the playback speed controls.	`boolean`	`false`
`poster`	Poster image URL.	`string`	-
`sizeFit`	Display fit mode.	`'contain' \| 'fill' \| 'cover' \| 'scale-dowm' \| 'none'`	`'contain'`
`timeUpdate`	Triggered when the playback time updates.	`(ctx: object) => void`	-
`title`	Native title. Sets the HTML native `title` attribute, which appears on mouse hover.	`string`	-
`url`	Video URL.	`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 display the volume control.	`boolean`	`true`