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. | 30| controller | [VideoController](#videocontroller) | No | Video controller. | 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. 74 75 76### Objects to Import 77 78```ts 79controller: 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.<br>Default value: **false**| 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 }).width('100%').height(600) 177 .autoPlay(this.isAutoPlay) 178 .controls(this.showControls) 179 .onStart(() => { 180 console.info('onStart') 181 }) 182 .onPause(() => { 183 console.info('onPause') 184 }) 185 .onFinish(() => { 186 console.info('onFinish') 187 }) 188 .onError(() => { 189 console.info('onError') 190 }) 191 .onPrepared((e) => { 192 console.info('onPrepared is ' + e.duration) 193 }) 194 .onSeeking((e) => { 195 console.info('onSeeking is ' + e.time) 196 }) 197 .onSeeked((e) => { 198 console.info('onSeeked is ' + e.time) 199 }) 200 .onUpdate((e) => { 201 console.info('onUpdate is ' + e.time) 202 }) 203 204 Row() { 205 Button('src').onClick(() => { 206 this.videoSrc = $rawfile('video2.mp4') // Switch the video source. 207 }).margin(5) 208 Button('previewUri').onClick(() => { 209 this.previewUri = $r('app.media.poster2') // Switch the preview image. 210 }).margin(5) 211 Button('controls').onClick(() => { 212 this.showControls = !this.showControls // Specify whether to show the control bar. 213 }).margin(5) 214 } 215 216 Row() { 217 Button('start').onClick(() => { 218 this.controller.start() // Start playback. 219 }).margin(5) 220 Button('pause').onClick(() => { 221 this.controller.pause() // Pause playback. 222 }).margin(5) 223 Button('stop').onClick(() => { 224 this.controller.stop() // Stop playback. 225 }).margin(5) 226 Button('setTime').onClick(() => { 227 this.controller.setCurrentTime(10, SeekMode.Accurate) // Seek to the 10s position of the video. 228 }).margin(5) 229 } 230 231 Row() { 232 Button('rate 0.75').onClick(() => { 233 this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // Play the video at the 0.75x speed. 234 }).margin(5) 235 Button('rate 1').onClick(() => { 236 this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // Play the video at the 1x speed. 237 }).margin(5) 238 Button('rate 2').onClick(() => { 239 this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // Play the video at the 2x speed. 240 }).margin(5) 241 } 242 } 243 } 244} 245``` 246