• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Video
2
3用于播放视频文件并控制其播放状态的组件。
4
5>  **说明：**
6>
7>  该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。<br/>
8>  Video组件只提供简单的视频播放功能，无法支撑复杂的视频播控场景。复杂开发场景推荐使用[AVPlayer播控API](../../apis-media-kit/js-apis-media.md#avplayer9)和[XComponent](ts-basic-components-xcomponent.md)组件开发。
9
10## 权限列表
11
12使用网络视频时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考[声明权限](../../../security/AccessToken/declare-permissions.md)。
13
14
15## 子组件
16
17不支持子组件。
18
19
20## 接口
21
22### Video
23
24Video(value: VideoOptions)
25
26**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
27
28**系统能力：** SystemCapability.ArkUI.ArkUI.Full
29
30**参数：**
31
32| 参数名 | 类型 | 必填 | 说明 |
33| -------- | -------- | -------- | -------- |
34| value | [VideoOptions](#videooptions对象说明) | 是 | 视频信息。 |
35
36##  VideoOptions对象说明
37
38**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
39
40**系统能力：** SystemCapability.ArkUI.ArkUI.Full
41
42| 名称              | 类型                                                     | 必填 | 说明                                                     |
43| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
44| src                 | string \| [Resource](ts-types.md#resource)                            | 否   | 视频的数据源，支持本地视频和网络视频。<br>Resource格式可以跨包/跨模块访问资源文件，常用于访问本地视频。<br/>- 支持rawfile文件下的资源，即通过\$rawfile引用视频文件。<br/>string格式可用于加载网络视频和本地视频，常用于加载网络视频。<br/>- 支持网络视频地址。<br/>- 支持file://路径前缀的字符串，即[应用沙箱URI](../../apis-core-file-kit/js-apis-file-fileuri.md#constructor10)：file://\<bundleName>/\<sandboxPath>。用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。<br/>**说明：**<br/>视频支持的格式是：mp4、mkv、TS。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
45| currentProgressRate | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[PlaybackSpeed<sup>8+</sup>](#playbackspeed8枚举说明) | 否   | 视频播放倍速。<br/>**说明：**<br/>number格式取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/>string格式支持number格式取值的字符串形式："0.75"，"1.0"，"1.25"，"1.75"，"2.0"。<br/>默认值：1.0 \| PlaybackSpeed.Speed_Forward_1_00_X<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
46| previewUri          | string&nbsp;\| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource)  | 否   | 视频未播放时的预览图片路径，默认不显示图片。<br/>string格式可用于加载本地图片和网络图片，<br/>- 支持网络图片地址。<br/>- 支持相对路径引用本地图片，例如：previewUri: “common/test.jpg”。当使用相对路径引用本地图片时，不支持跨包/跨模块调用。<br/>- 支持file://路径前缀的字符串，即[应用沙箱URI](../../apis-core-file-kit/js-apis-file-fileuri.md#constructor10)：file://\<bundleName>/\<sandboxPath>。用于读取应用沙箱路径内的资源。需要保证目录包路径下的文件有可读权限。<br/>Resource格式可以跨包/跨模块访问资源文件。<br/>- 支持rawfile文件下的资源，即通过\\$rawfile引用图片。<br/>- 支持通过\\$r引用系统资源或者应用资源中的图片。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。                 |
47| controller          | [VideoController](#videocontroller)                          | 否   | 设置视频控制器，可以控制视频的播放状态。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。                     |
48| imageAIOptions<sup>12+</sup>  | [ImageAIOptions](ts-image-common.md#imageaioptions) | 否   | 设置图像AI分析选项，可配置分析类型或绑定一个分析控制器。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 |
49| posterOptions<sup>18+</sup>  | [PosterOptions](#posteroptions18对象说明) | 否   | 设置视频播放的首帧送显选项，可以控制视频是否支持首帧送显。<br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 |
50
51## PlaybackSpeed<sup>8+</sup>枚举说明
52
53**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
54
55**系统能力：** SystemCapability.ArkUI.ArkUI.Full
56
57| 名称                 | 说明           |
58| -------------------- | -------------- |
59| Speed_Forward_0_75_X | 0.75倍速播放。 |
60| Speed_Forward_1_00_X | 1倍速播放。    |
61| Speed_Forward_1_25_X | 1.25倍速播放。 |
62| Speed_Forward_1_75_X | 1.75倍速播放。 |
63| Speed_Forward_2_00_X | 2倍速播放。    |
64
65## 属性
66
67除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性：
68
69### muted
70
71muted(value: boolean)
72
73设置是否静音。
74
75**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
76
77**系统能力：** SystemCapability.ArkUI.ArkUI.Full
78
79**参数：**
80
81| 参数名 | 类型    | 必填 | 说明                         |
82| ------ | ------- | ---- | ---------------------------- |
83| value  | boolean | 是   | 是否静音。<br/>true：开启静音；false：关闭静音。<br/>默认值：false |
84
85### autoPlay
86
87autoPlay(value: boolean)
88
89设置是否自动播放。
90
91**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
92
93**系统能力：** SystemCapability.ArkUI.ArkUI.Full
94
95**参数：**
96
97| 参数名 | 类型    | 必填 | 说明                             |
98| ------ | ------- | ---- | -------------------------------- |
99| value  | boolean | 是   | 是否自动播放。<br/>true：开启自动播放；false：关闭自动播放。<br/>默认值：false |
100
101### controls
102
103controls(value: boolean)
104
105设置控制视频播放的控制栏是否显示。
106
107**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
108
109**系统能力：** SystemCapability.ArkUI.ArkUI.Full
110
111**参数：**
112
113| 参数名 | 类型    | 必填 | 说明                                            |
114| ------ | ------- | ---- | ----------------------------------------------- |
115| value  | boolean | 是   | 控制视频播放的控制栏是否显示。<br/>true：控制栏显示；false：控制栏不显示。<br/>默认值：true |
116
117### objectFit
118
119objectFit(value: ImageFit)
120
121设置视频显示模式。
122
123**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
124
125**系统能力：** SystemCapability.ArkUI.ArkUI.Full
126
127**参数：**
128
129| 参数名 | 类型                                      | 必填 | 说明                             |
130| ------ | ----------------------------------------- | ---- | -------------------------------- |
131| value  | [ImageFit](ts-appendix-enums.md#imagefit) | 是   | 视频显示模式。<br/>默认值：Cover |
132
133### loop
134
135loop(value: boolean)
136
137设置是否单个视频循环播放。
138
139**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
140
141**系统能力：** SystemCapability.ArkUI.ArkUI.Full
142
143**参数：**
144
145| 参数名 | 类型    | 必填 | 说明                                     |
146| ------ | ------- | ---- | ---------------------------------------- |
147| value  | boolean | 是   | 是否单个视频循环播放。<br/>true：开启循环播放；false：关闭循环播放。<br/>默认值：false |
148
149### enableAnalyzer<sup>12+</sup>
150
151enableAnalyzer(enable: boolean)
152
153设置组件支持AI分析，当前支持主体识别、文字识别和对象查找等功能。
154使能后，视频播放暂停时自动进入分析状态，开始分析当前画面帧，视频继续播放后自动退出分析状态。
155不能和[overlay](ts-universal-attributes-overlay.md)属性同时使用，两者同时设置时[overlay](ts-universal-attributes-overlay.md)中[CustomBuilder](ts-types.md#custombuilder8)属性将失效。
156
157**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
158
159**系统能力：** SystemCapability.ArkUI.ArkUI.Full
160
161**参数：**
162
163| 参数名 | 类型 | 必填 | 说明 |
164| -------- | -------- | -------- | -------- |
165| enable | boolean | 是 | 是否启用AI分析功能<br/>true：开启AI分析功能；false：关闭AI分析功能。<br/>默认值：false |
166
167> **说明：**
168>
169> 当前仅在使用自定义控制栏([controls](#controls)属性设置为false)时支持该功能。
170> 该特性依赖设备能力。
171
172### analyzerConfig<sup>12+</sup>
173
174analyzerConfig(config: ImageAnalyzerConfig)
175
176设置AI分析识别类型，包括主体识别、文字识别和对象查找等功能。
177
178**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
179
180**系统能力：** SystemCapability.ArkUI.ArkUI.Full
181
182| 参数名 | 类型 | 必填 | 说明 |
183| -------- | -------- | -------- | -------- |
184| config | [ImageAnalyzerConfig](ts-image-common.md#imageanalyzerconfig) | 是 | 设置AI分析识别类型 |
185
186### enableShortcutKey<sup>15+</sup>
187
188enableShortcutKey(enabled: boolean)
189
190设置组件支持快捷键响应。
191
192目前支持在组件获焦后响应空格键播放/暂停、上下方向键调整视频音量、左右方向键快进/快退。
193
194**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
195
196**系统能力：** SystemCapability.ArkUI.ArkUI.Full
197
198| 参数名  | 类型    | 必填 | 说明                                   |
199| ------- | ------- | ---- | -------------------------------------- |
200| enabled | boolean | 是   | 是否启用快捷键响应。<br/>true：开启快捷键响应；false：关闭快捷键响应。<br/>默认值：false |
201
202## 事件
203
204除支持[通用事件](ts-component-general-events.md)外，还支持以下事件：
205
206### onStart
207
208onStart(event:&nbsp;VoidCallback)
209
210播放时触发该事件。
211
212**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
213
214**系统能力：** SystemCapability.ArkUI.ArkUI.Full
215
216**参数：**
217
218| 参数名 | 类型                                           | 必填 | 说明                                 |
219| ------ | --------------------------------------------- | ---- | ----------------------------------- |
220| event  | [VoidCallback](ts-types.md#voidcallback12)    | 是   | 视频播放的回调函数。        |
221
222### onPause
223
224onPause(event:&nbsp;VoidCallback)
225
226暂停时触发该事件。
227
228**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
229
230**系统能力：** SystemCapability.ArkUI.ArkUI.Full
231
232**参数：**
233
234| 参数名 | 类型                                           | 必填 | 说明                                 |
235| ------ | --------------------------------------------- | ---- | ----------------------------------- |
236| event  | [VoidCallback](ts-types.md#voidcallback12)    | 是   | 视频暂停的回调函数。        |
237
238### onFinish
239
240onFinish(event:&nbsp;VoidCallback)
241
242播放结束时触发该事件。
243
244**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
245
246**系统能力：** SystemCapability.ArkUI.ArkUI.Full
247
248**参数：**
249
250| 参数名 | 类型                                           | 必填 | 说明                                 |
251| ------ | --------------------------------------------- | ---- | ----------------------------------- |
252| event  | [VoidCallback](ts-types.md#voidcallback12)    | 是   | 视频播放结束的回调函数。        |
253
254### onError
255
256onError(event: () => void)
257
258播放失败时触发该事件。
259
260**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
261
262**系统能力：** SystemCapability.ArkUI.ArkUI.Full
263
264### onStop<sup>12+</sup>
265
266onStop(event: Callback&lt;void&gt;)
267
268播放停止时触发该事件(当stop()方法被调用后触发)。
269
270**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
271
272**系统能力：** SystemCapability.ArkUI.ArkUI.Full
273
274### onPrepared
275
276onPrepared(callback: Callback\<PreparedInfo>)
277
278视频准备完成时触发该事件。
279
280**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
281
282**系统能力：** SystemCapability.ArkUI.ArkUI.Full
283
284**参数：**
285
286| 参数名   | 类型   | 必填 | 说明                       |
287| -------- | ------ | ---- | -------------------------- |
288| callback | Callback\<[PreparedInfo](#preparedinfo18对象说明)> | 是   | 当前视频的时长。 |
289
290### onSeeking
291
292onSeeking(callback: Callback\<PlaybackInfo>)
293
294操作进度条过程时上报时间信息。
295
296**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
297
298**系统能力：** SystemCapability.ArkUI.ArkUI.Full
299
300**参数：**
301
302| 参数名 | 类型   | 必填 | 说明                           |
303| ------ | ------ | ---- | ------------------------------ |
304| callback   | Callback\<[PlaybackInfo](#playbackinfo18对象说明)> | 是   | 当前视频播放的进度。 |
305
306### onSeeked
307
308onSeeked(callback: Callback\<PlaybackInfo>)
309
310操作进度条完成后，上报播放时间信息。
311
312**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
313
314**系统能力：** SystemCapability.ArkUI.ArkUI.Full
315
316**参数：**
317
318| 参数名 | 类型   | 必填 | 说明                           |
319| ------ | ------ | ---- | ------------------------------ |
320| callback   | Callback\<[PlaybackInfo](#playbackinfo18对象说明)> | 是   | 当前视频播放的进度。 |
321
322### onUpdate
323
324onUpdate(callback: Callback\<PlaybackInfo>)
325
326播放进度变化时触发该事件。
327
328**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
329
330**系统能力：** SystemCapability.ArkUI.ArkUI.Full
331
332**参数：**
333
334| 参数名 | 类型   | 必填 | 说明                           |
335| ------ | ------ | ---- | ------------------------------ |
336| callback   | Callback\<[PlaybackInfo](#playbackinfo18对象说明)> | 是   | 当前视频播放的进度。 |
337
338### onFullscreenChange
339
340onFullscreenChange(callback: Callback\<FullscreenInfo>)
341
342在全屏播放与非全屏播放状态之间切换时触发该事件。
343
344**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
345
346**系统能力：** SystemCapability.ArkUI.ArkUI.Full
347
348**参数：**
349
350| 参数名     | 类型    | 必填 | 说明                                                  |
351| ---------- | ------- | ---- | ----------------------------------------------------- |
352| callback | Callback\<[FullscreenInfo](#fullscreeninfo18对象说明)> | 是   | 当前视频是否进入全屏播放状态。 |
353
354### FullscreenInfo<sup>18+</sup>对象说明
355
356用于描述当前视频是否进入全屏播放状态。
357
358**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
359
360**系统能力：** SystemCapability.ArkUI.ArkUI.Full
361
362| 名称       | 类型    | 只读 | 可选 | 说明                         |
363| ----------- | ------- | ---- | ----  | ---------------------------- |
364| fullscreen<sup>10+</sup>  | boolean | 否 | 否  | 当前视频是否进入全屏播放状态。<br/>true：进入全屏播放状态；false：未进入全屏播放状态。<br/>默认值：false<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。  |
365
366### PreparedInfo<sup>18+</sup>对象说明
367
368用于描述当前视频的时长。
369
370**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
371
372**系统能力：** SystemCapability.ArkUI.ArkUI.Full
373
374| 名称       | 类型    | 只读 | 可选 | 说明                         |
375| ----------- | ------- | ---- | ----  | ---------------------------- |
376| duration<sup>10+</sup> | number  | 否 | 否  | 当前视频的时长。<br/>单位：秒<br/>取值范围：[0,+∞)<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
377
378### PlaybackInfo<sup>18+</sup>对象说明
379
380用于描述当前视频播放的进度。
381
382**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
383
384**系统能力：** SystemCapability.ArkUI.ArkUI.Full
385
386| 名称       | 类型    | 只读 | 可选 | 说明                         |
387| ----------- | ------- | ---- | ---- | ---------------------------- |
388| time<sup>10+</sup> | number  | 否 | 否  | 当前视频播放的进度。<br/>单位：秒<br/>取值范围：[0,+∞)<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 |
389
390### PosterOptions<sup>18+</sup>对象说明
391
392用于描述当前视频是否配置首帧送显。
393
394**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
395
396**系统能力：** SystemCapability.ArkUI.ArkUI.Full
397
398| 名称       | 类型    | 只读 | 可选 | 说明                         |
399| ----------- | ------- | ---- | ---- | ---------------------------- |
400| showFirstFrame   | boolean | 否 | 是 | 当前视频是否配置首帧送显。<br/>true：开启首帧送显；false：关闭首帧送显。<br/>默认值：false      |
401
402## VideoController
403
404一个VideoController对象可以控制一个或多个Video，可用视频播放实例请参考[@ohos.multimedia.media](../../apis-media-kit/js-apis-media.md)。
405
406**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
407
408**系统能力：** SystemCapability.ArkUI.ArkUI.Full
409
410### 导入对象
411
412```ts
413let controller: VideoController = new VideoController()
414```
415
416### constructor
417
418constructor()
419
420VideoController的构造函数。
421
422**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
423
424**系统能力：** SystemCapability.ArkUI.ArkUI.Full
425
426### start
427
428start()
429
430开始播放。
431
432**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
433
434**系统能力：** SystemCapability.ArkUI.ArkUI.Full
435
436### pause
437
438pause()
439
440暂停播放，显示当前帧，再次播放时从当前位置继续播放。
441
442**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
443
444**系统能力：** SystemCapability.ArkUI.ArkUI.Full
445
446### stop
447
448stop()
449
450停止播放，显示当前帧，再次播放时从头开始播放。
451
452**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
453
454**系统能力：** SystemCapability.ArkUI.ArkUI.Full
455
456### reset<sup>12+</sup>
457
458reset(): void
459
460Video组件重置AVPlayer。显示当前帧，再次播放时从头开始播放。
461
462**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
463
464**系统能力：** SystemCapability.ArkUI.ArkUI.Full
465
466### setCurrentTime
467
468setCurrentTime(value: number)
469
470指定视频播放的进度位置。
471
472**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
473
474**系统能力：** SystemCapability.ArkUI.ArkUI.Full
475
476**参数：**
477
478| 参数名   | 类型   | 必填   | 说明           |
479| ----- | ------ | ---- | -------------- |
480| value | number | 是    | 视频播放进度位置，取值范围：[0, [duration](ts-media-components-video.md#preparedinfo18对象说明)]，单位：秒。 |
481
482### requestFullscreen
483
484requestFullscreen(value: boolean)
485
486请求全屏播放。
487
488**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
489
490**系统能力：** SystemCapability.ArkUI.ArkUI.Full
491
492**参数：**
493
494| 参数名 | 类型 | 必填 | 说明                         |
495| ------ | -------- | ---- | -------------------------------- |
496| value  | boolean  | 是   | 是否全屏（填充满应用窗口）播放。<br/>true：请求全屏播放；false：不请求全屏播放。<br/>默认值：false |
497
498### exitFullscreen
499
500exitFullscreen()
501
502退出全屏播放。
503
504**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
505
506**系统能力：** SystemCapability.ArkUI.ArkUI.Full
507
508### setCurrentTime<sup>8+</sup>
509
510setCurrentTime(value: number, seekMode: SeekMode)
511
512指定视频播放的进度位置，并指定跳转模式。
513
514**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
515
516**系统能力：** SystemCapability.ArkUI.ArkUI.Full
517
518**参数：**
519
520| 参数名      | 类型     | 必填   | 说明           |
521| -------- | -------- | ---- | -------------- |
522| value    | number   | 是    | 视频播放进度位置，单位为s。 |
523| seekMode | [SeekMode](#seekmode8枚举说明) | 是    | 跳转模式。          |
524
525## SeekMode<sup>8+</sup>枚举说明
526
527**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
528
529**系统能力：** SystemCapability.ArkUI.ArkUI.Full
530
531| 名称             | 说明                         |
532| ---------------- | ---------------------------- |
533| PreviousKeyframe | 跳转到前一个最近的关键帧。   |
534| NextKeyframe     | 跳转到后一个最近的关键帧。   |
535| ClosestKeyframe  | 跳转到最近的关键帧。         |
536| Accurate         | 精准跳转，不论是否为关键帧。 |
537
538## 示例
539
540### 示例1（视频播放基础用法）
541
542基础用法，包括控制栏、预览图、自动播放、播放速度、响应快捷键、控制器（开始播放、暂停播放、停止播放、重置avPlayer、跳转等）、首帧送显以及一些状态回调方法。
543
544```ts
545// xxx.ets
546@Entry
547@Component
548struct VideoCreateComponent {
549  @State videoSrc: Resource = $rawfile('video1.mp4')
550  @State previewUri: Resource = $r('app.media.poster1')
551  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
552  @State isAutoPlay: boolean = false
553  @State showControls: boolean = true
554  @State isShortcutKeyEnabled: boolean = false
555  @State showFirstFrame: boolean = false
556  controller: VideoController = new VideoController()
557
558  build() {
559    Column() {
560      Video({
561        src: this.videoSrc,
562        previewUri: this.previewUri,
563        currentProgressRate: this.curRate,
564        controller: this.controller,
565        posterOptions: { showFirstFrame: this.showFirstFrame }
566      })
567        .width('100%')
568        .height(600)
569        .autoPlay(this.isAutoPlay)
570        .controls(this.showControls)
571        .enableShortcutKey(this.isShortcutKeyEnabled)
572        .onStart(() => {
573          console.info('onStart')
574        })
575        .onPause(() => {
576          console.info('onPause')
577        })
578        .onFinish(() => {
579          console.info('onFinish')
580        })
581        .onError(() => {
582          console.info('onError')
583        })
584        .onStop(() => {
585          console.info('onStop')
586        })
587        .onPrepared((e?: DurationObject) => {
588          if (e != undefined) {
589            console.info('onPrepared is ' + e.duration)
590          }
591        })
592        .onSeeking((e?: TimeObject) => {
593          if (e != undefined) {
594            console.info('onSeeking is ' + e.time)
595          }
596        })
597        .onSeeked((e?: TimeObject) => {
598          if (e != undefined) {
599            console.info('onSeeked is ' + e.time)
600          }
601        })
602        .onUpdate((e?: TimeObject) => {
603          if (e != undefined) {
604            console.info('onUpdate is ' + e.time)
605          }
606        })
607        .onFullscreenChange((e?: FullscreenObject) => {
608          if (e != undefined) {
609            console.info('onFullscreenChange is ' + e.fullscreen)
610          }
611        })
612
613      Row() {
614        Button('src').onClick(() => {
615          this.videoSrc = $rawfile('video2.mp4') // 切换视频源
616        }).margin(5)
617        Button('previewUri').onClick(() => {
618          this.previewUri = $r('app.media.poster2') // 切换视频预览海报
619        }).margin(5)
620        Button('controls').onClick(() => {
621          this.showControls = !this.showControls // 切换是否显示视频控制栏
622        }).margin(5)
623      }
624
625      Row() {
626        Button('start').onClick(() => {
627          this.controller.start() // 开始播放
628        }).margin(2)
629        Button('pause').onClick(() => {
630          this.controller.pause() // 暂停播放
631        }).margin(2)
632        Button('stop').onClick(() => {
633          this.controller.stop() // 结束播放
634        }).margin(2)
635        Button('reset').onClick(() => {
636          this.controller.reset() // 重置AVPlayer
637        }).margin(2)
638        Button('setTime').onClick(() => {
639          this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
640        }).margin(2)
641      }
642
643      Row() {
644        Button('rate 0.75').onClick(() => {
645          this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
646        }).margin(5)
647        Button('rate 1').onClick(() => {
648          this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
649        }).margin(5)
650        Button('rate 2').onClick(() => {
651          this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
652        }).margin(5)
653      }
654    }
655  }
656}
657
658interface DurationObject {
659  duration: number;
660}
661
662interface TimeObject {
663  time: number;
664}
665
666interface FullscreenObject {
667  fullscreen: boolean;
668}
669```
670
671### 示例2（图像分析功能）
672
673使用enableAnalyzer属性开启图像AI分析。
674
675```ts
676// xxx.ets
677@Entry
678@Component
679struct ImageAnalyzerExample {
680  @State videoSrc: Resource = $rawfile('video1.mp4')
681  @State previewUri: Resource = $r('app.media.poster1')
682  @State showControls: boolean = true
683  controller: VideoController = new VideoController()
684  config: ImageAnalyzerConfig = {
685    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT]
686  }
687  private aiController: ImageAnalyzerController = new ImageAnalyzerController()
688  private options: ImageAIOptions = {
689    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT],
690    aiController: this.aiController
691  }
692
693  build() {
694    Column() {
695      Video({
696        src: this.videoSrc,
697        previewUri: this.previewUri,
698        controller: this.controller,
699        imageAIOptions: this.options
700      })
701        .width('100%')
702        .height(600)
703        .controls(false)
704        .enableAnalyzer(true)
705        .analyzerConfig(this.config)
706        .onStart(() => {
707          console.info('onStart')
708        })
709        .onPause(() => {
710          console.info('onPause')
711        })
712
713      Row() {
714        Button('start').onClick(() => {
715          this.controller.start() // 开始播放
716        }).margin(5)
717        Button('pause').onClick(() => {
718          this.controller.pause() // 暂停播放
719        }).margin(5)
720        Button('getTypes').onClick(() => {
721            this.aiController.getImageAnalyzerSupportTypes()
722        }).margin(5)
723      }
724    }
725  }
726}
727```
728
729### 示例3（播放拖入的视频）
730
731以下示例展示了如何使Video组件能够播放拖入的视频。
732
733```ts
734// xxx.ets
735import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData';
736
737@Entry
738@Component
739struct Index {
740  @State videoSrc: Resource | string = $rawfile('video1.mp4');
741  private controller: VideoController = new VideoController();
742
743  build() {
744    Column() {
745      Video({
746        src: this.videoSrc,
747        controller: this.controller
748      })
749        .width('100%')
750        .height(600)
751        .onPrepared(() => {
752          // 在onPrepared回调中执行controller的start方法，确保视频源更换后直接开始播放。
753          this.controller.start();
754        })
755        .onDrop((e: DragEvent) => {
756          // 外部视频拖入应用Video组件范围，松手后触发通过onDrop注册的回调。
757          // 在DragEvent中会包含拖入的视频源信息，取出后赋值给状态变量videoSrc即可改变Video的视频源。
758          let record = e.getData().getRecords()[0];
759          if (record.getType() == uniformTypeDescriptor.UniformDataType.VIDEO) {
760            let videoInfo = record as unifiedDataChannel.Video;
761            this.videoSrc = videoInfo.videoUri;
762          }
763        })
764    }
765  }
766}
767```
768