1# Video 2 3用于播放视频文件并控制其播放状态的组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 权限列表 10 11使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[权限申请声明](../../security/accesstoken-guidelines.md)。 12 13 14## 子组件 15 16不支持子组件。 17 18 19## 接口 20 21Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController}) 22 23**参数：** 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 27| src | string \| [Resource](ts-types.md) | 否 | 视频播放源的路径，支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见 [DataAbility说明](../../application-models/dataability-overview.md)。<br/>**说明：**<br/>视频支持的格式是：mp4、mkv、webm、TS。 | 28| currentProgressRate | number \| string \| PlaybackSpeed<sup>8+</sup> | 否 | 视频播放倍速。<br/>**说明：**<br/>number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/>默认值：1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | 29| previewUri | string \|PixelMap \| [Resource](ts-types.md) | 否 | 视频未播放时的预览图片路径。 | 30| controller | [VideoController](#videocontroller) | 否 | 设置视频控制器。 | 31 32## PlaybackSpeed<sup>8+</sup>枚举说明 33 34| 名称 | 描述 | 35| -------------------- | --------- | 36| Speed_Forward_0_75_X | 0.75倍速播放。 | 37| Speed_Forward_1_00_X | 1倍速播放。 | 38| Speed_Forward_1_25_X | 1.25倍速播放。 | 39| Speed_Forward_1_75_X | 1.75倍速播放。 | 40| Speed_Forward_2_00_X | 2倍速播放。 | 41 42## 属性 43 44除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 45 46| 名称 | 参数类型 | 描述 | 47| --------- | ---------------------------------------- | ---------------------------- | 48| muted | boolean | 是否静音。<br/>默认值：false | 49| autoPlay | boolean | 是否自动播放。<br/>默认值：false | 50| controls | boolean | 控制视频播放的控制栏是否显示。<br/>默认值：true | 51| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置视频显示模式。<br/>默认值：Cover | 52| loop | boolean | 是否单个视频循环播放。<br/>默认值：false | 53 54## 事件 55 56除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 57 58| 名称 | 功能描述 | 59| ------------------------------------------------------------ | ------------------------------------------------------------ | 60| onStart(event:() => void) | 播放时触发该事件。 | 61| onPause(event:() => void) | 暂停时触发该事件。 | 62| onFinish(event:() => void) | 播放结束时触发该事件。 | 63| onError(event:() => void) | 播放失败时触发该事件。 | 64| onPrepared(callback:(event?: { duration: number }) => void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为秒(s)。 | 65| onSeeking(callback:(event?: { time: number }) => void) | 操作进度条过程时上报时间信息，单位为s。 | 66| onSeeked(callback:(event?: { time: number }) => void) | 操作进度条完成后，上报播放时间信息，单位为s。 | 67| onUpdate(callback:(event?: { time: number }) => void) | 播放进度变化时触发该事件，单位为s。 | 68| onFullscreenChange(callback:(event?: { fullscreen: boolean }) => void) | 在全屏播放与非全屏播放状态之间切换时触发该事件，返回值为true表示进入全屏播放状态，为false则表示非全屏播放。 | 69 70 71## VideoController 72 73一个VideoController对象可以控制一个或多个video。 74 75 76### 导入对象 77 78```ts 79controller: VideoController = new VideoController() 80``` 81 82 83### start 84 85start(): void 86 87开始播放。 88 89### pause 90 91pause(): void 92 93暂停播放，显示当前帧，再次播放时从当前位置继续播放。 94 95### stop 96 97stop(): void 98 99停止播放，显示当前帧，再次播放时从头开始播放。 100 101### setCurrentTime 102 103setCurrentTime(value: number) 104 105指定视频播放的进度位置。 106 107**参数：** 108 109| 参数名 | 参数类型 | 必填 | 参数描述 | 110| ----- | ------ | ---- | -------------- | 111| value | number | 是 | 视频播放进度位置，单位为s。 | 112 113### requestFullscreen 114 115requestFullscreen(value: boolean) 116 117请求全屏播放。 118 119**参数：** 120 121| 参数名 | 参数类型 | 必填 | 参数描述 | 122| ------ | -------- | ---- | -------------------------------------------------- | 123| value | boolean | 是 | 是否全屏（填充满应用窗口）播放。<br/>默认值：false | 124 125### exitFullscreen 126 127exitFullscreen() 128 129退出全屏播放。 130 131### setCurrentTime<sup>8+</sup> 132 133setCurrentTime(value: number, seekMode: SeekMode) 134 135指定视频播放的进度位置，并指定跳转模式。 136 137**参数：** 138 139| 参数名 | 参数类型 | 必填 | 参数描述 | 140| -------- | -------- | ---- | -------------- | 141| value | number | 是 | 视频播放进度位置，单位为s。 | 142| seekMode | SeekMode | 是 | 跳转模式。 | 143 144## SeekMode<sup>8+</sup>枚举说明 145 146| 名称 | 描述 | 147| ---------------- | -------------- | 148| PreviousKeyframe | 跳转到前一个最近的关键帧。 | 149| NextKeyframe | 跳转到后一个最近的关键帧。 | 150| ClosestKeyframe | 跳转到最近的关键帧。 | 151| Accurate | 精准跳转，不论是否为关键帧。 | 152 153 154 155## 示例 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') // 切换视频源 207 }).margin(5) 208 Button('previewUri').onClick(() => { 209 this.previewUri = $r('app.media.poster2') // 切换视频预览海报 210 }).margin(5) 211 Button('controls').onClick(() => { 212 this.showControls = !this.showControls // 切换是否显示视频控制栏 213 }).margin(5) 214 } 215 216 Row() { 217 Button('start').onClick(() => { 218 this.controller.start() // 开始播放 219 }).margin(5) 220 Button('pause').onClick(() => { 221 this.controller.pause() // 暂停播放 222 }).margin(5) 223 Button('stop').onClick(() => { 224 this.controller.stop() // 结束播放 225 }).margin(5) 226 Button('setTime').onClick(() => { 227 this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置 228 }).margin(5) 229 } 230 231 Row() { 232 Button('rate 0.75').onClick(() => { 233 this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放 234 }).margin(5) 235 Button('rate 1').onClick(() => { 236 this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放 237 }).margin(5) 238 Button('rate 2').onClick(() => { 239 this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放 240 }).margin(5) 241 } 242 } 243 } 244} 245``` 246