The <video> component is used to play video files and control their playback states.
Since: 1.0.0
Associated document: has.createVideoContext
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
src | string | Yes | Video source, which can be either a local or a network video. NOTE: The video format must be MP4. (Videos in AVI format will be converted to audio files and will not be displayed properly.) | |
controls | boolean | true | No | Whether to display the default playback components (play/pause button, playback progress, time, mute button, and full-screen button). |
autoplay | boolean | false | No | Whether to enable automatic playback. Videos can be automatically played only after mute mode is enabled. When autoplay is set to true, mute playback must be enabled simultaneously. Automatic playback is not supported in non-mute mode. |
loop | boolean | false | No | Whether to enable loop playback. |
muted | boolean | false | No | Whether to play in mute mode. |
object-fit | string | contain | No | Display mode of the video when its size does not match the <video> component size.
Since: 1.0.3 |
poster | string | - | No | Path of the preview image when the video is not playing. By default, the first frame of the video is displayed. Local images and network images are supported. Supported formats: JPG, PNG, and WebP. If the poster value fails to load, the video cover will be black. |
bindplay | event | - | No | Event triggered when the playback starts or resumes. |
bindpause | event | - | No | Event triggered when the playback is paused. |
bindended | event | - | No | Event triggered when the playback reaches the end. |
HXML file:
<video
src="{{videoSrc}}"
controls="{{controls}}"
autoplay="{{autoplay}}"
loop="{{loop}}"
muted="{{muted}}"
object-fit="{{objectFit}}"
poster="{{posterSrc}}"
bindplay="onPlay"
bindpause="onPause"
bindended="onEnded"
/> JS file:
Page({
data: {
videoSrc: "https://www.example.com/example.mp4", // Replace the example with the actual video resource address.
posterSrc: "",
controls: true,
autoplay: true,
loop: true,
muted: true,
objectFit: "fill",
},
onPlay(e) {
console.log("video start play.");
},
onPause(e) {
console.log("video pause.");
},
onEnded(e) {
console.log("video end.");
},
});