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