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