Video
NOTE
This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The <Video> component provides a video player.
Required Permissions
To use online videos, you need to add the ohos.permission.INTERNET permission to the corresponding abilities in the config.json or module.json file, whichever is appropriate.
"abilities":[
{
...
"permissions": ["ohos.permission.INTERNET"],
...
}
]
Child Components
Not supported
APIs
Video(value: VideoOptions)
- VideoOptions attributes
Name | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
src | string | Resource | No | - | Path of the video source, which can be a local path or a URL. The video resources can be stored in the video or rawfile folder under resources. The path can include a dataability:// prefix, which is used to access the video path provided by a Data ability. For details about the path, see Data Ability Development. |
currentProgressRate | number | PlaybackSpeed8+ | No | 1.0 | PlaybackSpeed. Speed_Forward_1_00_X |
Video playback speed. NOTE The value of the number type can only be 0.75, 1.0, 1.25, 1.75, or 2.0. |
previewUri | string | PixelMap8+ | Resource | No | - | Path of the preview image. |
controller | VideoController | No | - | Controller. |
- PlaybackSpeed8+
Name | Description |
---|---|
Speed_Forward_0_75_X | 0.75x playback speed. |
Speed_Forward_1_00_X | 1x playback speed. |
Speed_Forward_1_25_X | 1.25x playback speed. |
Speed_Forward_1_75_X | 1.75x playback speed. |
Speed_Forward_2_00_X | 2x playback speed. |
Attributes
Name | Type | Default Value | Description |
---|---|---|---|
muted | boolean | false | Whether the video is muted. |
autoPlay | boolean | false | Whether to enable auto play. |
controls | boolean | true | Whether to display the video playback control bar. |
objectFit | ImageFit | Cover | Video scale type. |
loop | boolean | false | Whether to repeat the video. |
Events
Name | Description |
---|---|
onStart() => void | Triggered when the video is played. |
onPause() => void | Triggered when the video playback is paused. |
onFinish() => void | Triggered when the video playback is finished. |
onError() => void | Triggered when the video playback fails. |
onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from duration. |
onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged. |
onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar. |
onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second. |
VideoController
A VideoController object can control one or more videos.
Objects to Import
controller: VideoController = new VideoController();
start
start(): void
Starts playback.
pause
pause(): void
Pauses playback.
stop
stop(): void
Stops playback.
setCurrentTime
setCurrentTime(value: number)
Sets the video playback position.
- Parameters
Name | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
value | number | Yes | - | Video playback position. |
requestFullscreen
requestFullscreen(value: boolean)
Requests full-screen mode.
- Parameters
Name | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
value | boolean | Yes | false | Whether the playback is in full-screen mode. |
exitFullscreen
exitFullscreen()
Exits full-screen mode.
setCurrentTime8+
setCurrentTime(value: number, seekMode: SeekMode)
Sets the video playback position with the specified seek mode.
- Parameters
Name | Type | Mandatory | Default Value | Description |
---|---|---|---|---|
value | number | Yes | - | Video playback position. |
seekMode | SeekMode | Yes | - | Seek mode. |
- SeekMode8+
Name | Description |
---|---|
PreviousKeyframe | Seeks to the nearest previous keyframe. |
NextKeyframe | Seeks to the nearest next keyframe. |
ClosestKeyframe | Seeks to the nearest keyframe. |
Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe. |
Example
// xxx.ets
@Entry
@Component
struct VideoCreateComponent {
@State srcs: Resource = $rawfile('video1');
@State previewUris: Resource = $r('app.media.img');
@State currentProgressRates: number = 1;
@State autoPlays: boolean = false;
@State controlsss: boolean = true;
controller: VideoController = new VideoController();
build() {
Column() {
Video({
src: this.srcs,
previewUri: this.previewUris,
currentProgressRate: this.currentProgressRates,
controller: this.controller
}).width(700).height(500)
.autoPlay(this.autoPlays)
.controls(this.controlsss)
.onStart(() => {
console.error('onStart');
})
.onPause(() => {
console.error('onPause');
})
.onFinish(() => {
console.error('onFinish');
})
.onError(() => {
console.error('onFinish');
})
.onPrepared((e) => {
console.error('onPrepared is ' + e.duration);
})
.onSeeking((e) => {
console.error('onSeeking is ' + e.time);
})
.onSeeked((e) => {
console.error('onSeekedis ' + e.time);
})
.onUpdate((e) => {
console.error('onUpdateis ' + e.time);
})
Row() {
Button("src").onClick(() => {
this.srcs = $rawfile('video2');
});
Button("previewUri").onClick(() => {
this.previewUris = $r('app.media.img1');
});
Button("controlsss").onClick(() => {
this.controlsss = !this.controlsss;
});
}
Row() {
Button("start").onClick(() => {
this.controller.start();
});
Button("pause").onClick(() => {
this.controller.pause();
});
Button("stop").onClick(() => {
this.controller.stop();
});
}
Row() {
Button("setCurrentTime").onClick(() => {
this.controller.setCurrentTime(9, SeekMode.Accurate);
});
}
}
}
}