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