1# Video 2 3The **\<Video>** component is used to play a video and control its playback. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Required Permissions 10 11To use online videos, you must apply for the **ohos.permission.INTERNET** permission. For details about how to apply for the permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md). 12 13 14## Child Components 15 16Not supported 17 18 19## APIs 20 21Video(value: VideoOptions) 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| value | [VideoOptions](#videooptions) | Yes| Video information.| 28 29## VideoOptions 30 31| Name | Type | Mandatory| Description | 32| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 33| src | string \| [Resource](ts-types.md#resource) | No | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which indicates that the path is provided by a Data ability. For details about the path, see [Data Ability Development](../../application-models/dataability-overview.md).<br>- Strings with the **file:///data/storage** prefix are supported, which are used to read resources in the application sandbox. Ensure that the application has the read permission to the files in the specified path.<br>**NOTE**<br><br>The supported video formats are MP4, MKV, WebM, and TS.| 34| currentProgressRate | number \| string \| [PlaybackSpeed<sup>8+</sup>](#playbackspeed8) | No | Video playback speed.<br>**NOTE**<br><br>The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>Default value: 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | 35| previewUri | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md) | No | Path of the preview image displayed before the video playback starts. By default, no preview image is displayed. | 36| controller | [VideoController](#videocontroller) | No | Video controller to control the video playback status. | 37 38 39## PlaybackSpeed<sup>8+</sup> 40 41| Name | Description | 42| -------------------- | --------- | 43| Speed_Forward_0_75_X | 0.75x playback speed.| 44| Speed_Forward_1_00_X | 1x playback speed. | 45| Speed_Forward_1_25_X | 1.25x playback speed.| 46| Speed_Forward_1_75_X | 1.75x playback speed.| 47| Speed_Forward_2_00_X | 2x playback speed. | 48 49## Attributes 50 51In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 52 53| Name | Type | Description | 54| --------- | ---------------------------------------- | ---------------------------- | 55| muted | boolean | Whether to mute the video.<br>Default value: **false** | 56| autoPlay | boolean | Whether to enable auto play.<br>Default value: **false** | 57| controls | boolean | Whether to display the video playback control bar.<br>Default value: **true**| 58| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Video scale type.<br>Default value: **Cover** | 59| loop | boolean | Whether to repeat the video.<br>Default value: **false** | 60 61## Events 62 63In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 64 65| Name | Description | 66| ------------------------------------------------------------ | ------------------------------------------------------------ | 67| onStart(event:() => void) | Triggered when the video is played. | 68| onPause(event:() => void) | Triggered when the video playback is paused. | 69| onFinish(event:() => void) | Triggered when the video playback is finished. | 70| onError(event:() => void) | Triggered when the video playback fails. | 71| onPrepared(callback:(event?: { duration: number }) => void) | Triggered when video preparation is complete.<br>**duration**: duration of the current video, in seconds.| 72| onSeeking(callback:(event?: { time: number }) => void) | Triggered to report the time when the progress bar is being dragged.<br>**time**: current video playback progress, in seconds.| 73| onSeeked(callback:(event?: { time: number }) => void) | Triggered to report the playback time when the user finishes dragging the progress bar.<br>**time**: current video playback progress, in seconds.| 74| onUpdate(callback:(event?: { time: number }) => void) | Triggered when the playback progress changes.<br>**time**: current video playback progress, in seconds.| 75| onFullscreenChange(callback:(event?: { fullscreen: boolean }) => void) | Triggered when the playback is switched between full-screen mode and non-full-screen mode.<br>**fullscreen**: The value **true** means that the playback is in full-screen mode, and **false** means the opposite.| 76 77 78## VideoController 79 80Defines a **VideoController** object to control one or more videos. For details about available video playback examples, see [@ohos.multimedia.media](../apis/js-apis-media.md). 81 82 83### Objects to Import 84 85```ts 86let controller: VideoController = new VideoController() 87``` 88 89 90### start 91 92start(): void 93 94Starts playback. 95 96### pause 97 98pause(): void 99 100Pauses playback. The current frame is then displayed, and playback will be resumed from this paused position. 101 102### stop 103 104stop(): void 105 106Stops playback. The current frame is then displayed, and playback will restart from the very beginning. 107 108### setCurrentTime 109 110setCurrentTime(value: number) 111 112Sets the video playback position. 113 114**Parameters** 115 116| Name | Type | Mandatory | Description | 117| ----- | ------ | ---- | -------------- | 118| value | number | Yes | Video playback position, in seconds.| 119 120### requestFullscreen 121 122requestFullscreen(value: boolean) 123 124Requests full-screen mode. 125 126**Parameters** 127 128| Name| Type| Mandatory| Description | 129| ------ | -------- | ---- | -------------------------------- | 130| value | boolean | Yes | Whether to play the video in full screen mode within the application window.| 131 132### exitFullscreen 133 134exitFullscreen() 135 136Exits full-screen mode. 137 138### setCurrentTime<sup>8+</sup> 139 140setCurrentTime(value: number, seekMode: SeekMode) 141 142Sets the video playback position with the specified seek mode. 143 144**Parameters** 145 146| Name | Type | Mandatory | Description | 147| -------- | -------- | ---- | -------------- | 148| value | number | Yes | Video playback position, in seconds.| 149| seekMode | [SeekMode](#seekmode8) | Yes | Seek mode. | 150 151## SeekMode<sup>8+</sup> 152 153| Name | Description | 154| ---------------- | -------------- | 155| PreviousKeyframe | Seeks to the nearest previous keyframe. | 156| NextKeyframe | Seeks to the nearest next keyframe. | 157| ClosestKeyframe | Seeks to the nearest keyframe. | 158| Accurate | Seeks to a specific frame, regardless of whether the frame is a keyframe.| 159 160 161 162## Example 163 164```ts 165// xxx.ets 166@Entry 167@Component 168struct VideoCreateComponent { 169 @State videoSrc: Resource = $rawfile('video1.mp4') 170 @State previewUri: Resource = $r('app.media.poster1') 171 @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X 172 @State isAutoPlay: boolean = false 173 @State showControls: boolean = true 174 controller: VideoController = new VideoController() 175 176 build() { 177 Column() { 178 Video({ 179 src: this.videoSrc, 180 previewUri: this.previewUri, 181 currentProgressRate: this.curRate, 182 controller: this.controller 183 }) 184 .width('100%') 185 .height(600) 186 .autoPlay(this.isAutoPlay) 187 .controls(this.showControls) 188 .onStart(() => { 189 console.info('onStart') 190 }) 191 .onPause(() => { 192 console.info('onPause') 193 }) 194 .onFinish(() => { 195 console.info('onFinish') 196 }) 197 .onError(() => { 198 console.info('onError') 199 }) 200 .onPrepared((e?: DurationObject) => { 201 if (e != undefined) { 202 console.info('onPrepared is ' + e.duration) 203 } 204 }) 205 .onSeeking((e?: TimeObject) => { 206 if (e != undefined) { 207 console.info('onSeeking is ' + e.time) 208 } 209 }) 210 .onSeeked((e?: TimeObject) => { 211 if (e != undefined) { 212 console.info('onSeeked is ' + e.time) 213 } 214 }) 215 .onUpdate((e?: TimeObject) => { 216 if (e != undefined) { 217 console.info('onUpdate is ' + e.time) 218 } 219 }) 220 221 Row() { 222 Button('src').onClick(() => { 223 this.videoSrc = $rawfile('video2.mp4') // Switch the video source. 224 }).margin(5) 225 Button('previewUri').onClick(() => { 226 this.previewUri = $r('app.media.poster2') // Switch the preview image. 227 }).margin(5) 228 Button('controls').onClick(() => { 229 this.showControls = !this.showControls // Specify whether to show the control bar. 230 }).margin(5) 231 } 232 233 Row() { 234 Button('start').onClick(() => { 235 this.controller.start() // Start playback. 236 }).margin(5) 237 Button('pause').onClick(() => { 238 this.controller.pause() // Pause playback. 239 }).margin(5) 240 Button('stop').onClick(() => { 241 this.controller.stop() // Stop playback. 242 }).margin(5) 243 Button('setTime').onClick(() => { 244 this.controller.setCurrentTime(10, SeekMode.Accurate) // Seek to the 10s position of the video. 245 }).margin(5) 246 } 247 248 Row() { 249 Button('rate 0.75').onClick(() => { 250 this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // Play the video at the 0.75x speed. 251 }).margin(5) 252 Button('rate 1').onClick(() => { 253 this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // Play the video at the 1x speed. 254 }).margin(5) 255 Button('rate 2').onClick(() => { 256 this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // Play the video at the 2x speed. 257 }).margin(5) 258 } 259 } 260 } 261} 262 263interface DurationObject { 264 duration: number; 265} 266 267interface TimeObject { 268 time: number; 269} 270``` 271