91e99d99创建于 2025年2月27日历史提交

使用MovingPhotoView播放动态照片

系统提供了MovingPhotoView组件，在一些社交类、图库类应用中，可用于播放动态照片文件。

约束与限制

针对MovingPhotoView组件的使用，有以下约束与限制：

当前不支持动态属性设置。
当前不支持设置ArkUI通用属性expandSafeArea。
该组件长按触发播放时组件区域放大为1.1倍。
该组件使用AVPlayer进行播放，同时开启的AVPlayer个数不建议超过3个，超过3个可能会出现视频播放卡顿现象。

开发步骤

导入动态照片模块。

import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';

获取动态照片对象（MovingPhoto）。

MovingPhoto对象需要通过photoAccessHelper接口创建或获取，MovingPhotoView只接收构造完成的MovingPhoto对象。

创建、获取的方式可参考访问和管理动态照片资源。
```
src: photoAccessHelper.MovingPhoto | undefined = undefined;
```
创建动态照片控制器（MovingPhotoViewController），用于控制动态照片的播放状态（如播放、停止）。
```
controller: MovingPhotoViewController = new MovingPhotoViewController();
```

创建动态照片组件。

以下参数取值仅为举例，具体每个属性的取值范围，可参考API文档：@ohos.multimedia.movingphotoview。

 import { photoAccessHelper, MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';

 @Entry
 @Component
 struct Index {
   @State src: photoAccessHelper.MovingPhoto | undefined = undefined
   @State isMuted: boolean = false
   controller: MovingPhotoViewController = new MovingPhotoViewController();
   build() {
     Column() {
       MovingPhotoView({
         movingPhoto: this.src,
         controller: this.controller
         // imageAIOptions: this.options.
       })
         // 是否静音播放，此处由按钮控制，默认值为false非静音播放。
         .muted(this.isMuted)
         // 视频显示模式，默认值为Cover。
         .objectFit(ImageFit.Cover)
         // 播放时触发。
         .onStart(() => {
           console.log('onStart');
         })
         // 播放结束触发。
         .onFinish(() => {
           console.log('onFinish');
         })
         // 播放停止触发。
         .onStop(() => {
           console.log('onStop')
         })
         // 出现错误触发。
         .onError(() => {
           console.log('onError');
         })
 
       Row() {
         // 按钮：开始播放。
         Button('start')
           .onClick(() => {
             this.controller.startPlayback()
           })
           .margin(5)
         // 按钮：停止播放。
         Button('stop')
           .onClick(() => {
             this.controller.stopPlayback()
           })
           .margin(5)
         // 按钮：是否静音播放。
         Button('mute')
           .onClick(() => {
             this.isMuted = !this.isMuted
           })
           .margin(5)
       }
       .alignItems(VerticalAlign.Center)
       .justifyContent(FlexAlign.Center)
       .height('15%')
     }
   }
 }

使用MovingPhotoView播放动态照片

约束与限制

开发步骤

效果展示