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 20Video(value: {src?: string | Resource, currentProgressRate?: number | string | PlaybackSpeed, previewUri?: string | PixelMap | Resource, controller?: VideoController}) 21 22**参数：** 23 24| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 25| ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- | 26| src | string \| [Resource](ts-types.md#resource) | 否 | - | 视频播放源的路径，支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 | 27| currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | 否 | 1.0 \| PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>> **说明：**<br/>> number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> | 28| previewUri | string \| PixelMap<sup>8+</sup> \| [Resource](ts-types.md#resource) | 否 | - | 预览图片的路径。 | 29| controller | [VideoController](#videocontroller) | 否 | - | 控制器。 | 30 31## PlaybackSpeed<sup>8+</sup>类型接口说明 32 33| 名称 | 描述 | 34| -------------------- | --------- | 35| Speed_Forward_0_75_X | 0.75倍速播放。 | 36| Speed_Forward_1_00_X | 1倍速播放。 | 37| Speed_Forward_1_25_X | 1.25倍速播放。 | 38| Speed_Forward_1_75_X | 1.75倍速播放。 | 39| Speed_Forward_2_00_X | 2倍速播放。 | 40 41 42## 属性 43 44| 名称 | 参数类型 | 默认值 | 描述 | 45| --------- | ---------------------------------------- | ----- | --------------- | 46| muted | boolean | false | 是否静音。 | 47| autoPlay | boolean | false | 是否自动播放。 | 48| controls | boolean | true | 控制视频播放的控制栏是否显示。 | 49| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | 设置视频显示模式。 | 50| loop | boolean | false | 是否单个视频循环播放。 | 51 52 53## 事件 54 55| 名称 | 功能描述 | 56| ---------------------------------------- | ---------------------------------------- | 57| onStart(event:() => void) | 播放时触发该事件。 | 58| onPause(event:() => void) | 暂停时触发该事件。 | 59| onFinish(event:() => void) | 播放结束时触发该事件。 | 60| onError(event:() => void) | 播放失败时触发该事件。 | 61| onPrepared(callback:(event?: { duration: number }) => void) | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。<br/>- duration: 视频的时长。 | 62| onSeeking(callback:(event?: { time: number }) => void) | 操作进度条过程时上报时间信息，单位为s。 | 63| onSeeked(callback:(event?: { time: number }) => void) | 操作进度条完成后，上报播放时间信息，单位为s。 | 64| onUpdate(callback:(event?: { time: number }) => void) | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 | 65 66 67## VideoController 68 69一个VideoController对象可以控制一个或多个video。 70 71 72### 导入对象 73 74``` 75controller: VideoController = new VideoController(); 76``` 77 78 79### start 80 81start(): void 82 83开始播放。 84 85### pause 86 87pause(): void 88 89暂停播放。 90 91### stop 92 93stop(): void 94 95停止播放。 96 97### setCurrentTime 98 99setCurrentTime(value: number) 100 101指定视频播放的进度位置。 102 103**参数：** 104 105| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 106| ----- | ------ | ---- | ---- | --------- | 107| value | number | 是 | - | 视频播放进度位置。 | 108 109### requestFullscreen 110 111requestFullscreen(value: boolean) 112 113请求全屏播放。 114 115**参数：** 116 117| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 118| ----- | ------ | ---- | ----- | ------- | 119| value | number | 是 | false | 是否全屏播放。 | 120 121### exitFullscreen 122 123exitFullscreen() 124 125退出全屏播放。 126 127### setCurrentTime<sup>8+</sup> 128 129setCurrentTime(value: number, seekMode: SeekMode) 130 131指定视频播放的进度位置，并指定跳转模式。 132 133**参数：** 134 135| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 136| -------- | -------- | ---- | ---- | --------- | 137| value | number | 是 | - | 视频播放进度位置。 | 138| seekMode | SeekMode | 是 | - | 跳转模式。 | 139 140## SeekMode<sup>8+</sup>类型接口说明 141 142| 名称 | 描述 | 143| ---------------- | -------------- | 144| PreviousKeyframe | 跳转到前一个最近的关键帧。 | 145| NextKeyframe | 跳转到后一个最近的关键帧。 | 146| ClosestKeyframe | 跳转到最近的关键帧。 | 147| Accurate | 精准跳转，不论是否为关键帧。 | 148 149 150 151## 示例 152 153```ts 154// xxx.ets 155@Entry 156@Component 157struct VideoCreateComponent { 158 @State srcs: Resource = $rawfile('video1.mp4'); 159 @State previewUris: Resource = $r('app.media.img'); 160 @State currentProgressRates: number = 1; 161 @State autoPlays: boolean = false; 162 @State controlsss: boolean = true; 163 controller: VideoController = new VideoController(); 164 build() { 165 Column() { 166 Video({ 167 src: this.srcs, 168 previewUri: this.previewUris, 169 currentProgressRate: this.currentProgressRates, 170 controller: this.controller 171 }).width(700).height(500) 172 .autoPlay(this.autoPlays) 173 .controls(this.controlsss) 174 .onStart(() => { 175 console.error('onStart'); 176 }) 177 .onPause(() => { 178 console.error('onPause'); 179 }) 180 .onFinish(() => { 181 console.error('onFinish'); 182 }) 183 .onError(() => { 184 console.error('onError'); 185 }) 186 .onPrepared((e) => { 187 console.error('onPrepared is ' + e.duration); 188 }) 189 .onSeeking((e) => { 190 console.error('onSeeking is ' + e.time); 191 }) 192 .onSeeked((e) => { 193 console.error('onSeekedis ' + e.time); 194 }) 195 .onUpdate((e) => { 196 console.error('onUpdateis ' + e.time); 197 }) 198 Row() { 199 Button("src").onClick(() => { 200 this.srcs = $rawfile('video2.mp4'); 201 }); 202 Button("previewUri").onClick(() => { 203 this.previewUris = $r('app.media.img1'); 204 }); 205 Button("controlsss").onClick(() => { 206 this.controlsss = !this.controlsss; 207 }); 208 } 209 210 Row() { 211 Button("start").onClick(() => { 212 this.controller.start(); 213 }); 214 Button("pause").onClick(() => { 215 this.controller.pause(); 216 }); 217 Button("stop").onClick(() => { 218 this.controller.stop(); 219 }); 220 } 221 222 Row() { 223 Button("setCurrentTime").onClick(() => { 224 this.controller.setCurrentTime(9, SeekMode.Accurate); 225 }); 226 } 227 } 228 } 229} 230``` 231