1# 使用MovingPhotoView播放动态照片
2
3系统提供了MovingPhotoView组件，在一些社交类、图库类应用中，可用于播放动态照片文件。
4
5## 约束与限制
6
7针对MovingPhotoView组件的使用，有以下约束与限制：
8
9- 当前不支持动态属性设置。
10- 当前不支持设置ArkUI通用属性[expandSafeArea](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md#expandsafearea)。
11- 该组件长按触发播放时组件区域放大为1.1倍。
12- 该组件使用[AVPlayer](../../reference/apis-media-kit/js-apis-media.md#avplayer9)进行播放，同时开启的AVPlayer个数不建议超过3个，超过3个可能会出现视频播放卡顿现象。
13
14## 开发步骤
15
161. 导入动态照片模块。
17
18   ```ts
19   import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
20   ```
21
222. 获取动态照片对象（[MovingPhoto](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#movingphoto12)）。
23
24   MovingPhoto对象需要通过photoAccessHelper接口创建或获取，MovingPhotoView只接收构造完成的MovingPhoto对象。
25
26   创建、获取的方式可参考[访问和管理动态照片资源](photoAccessHelper-movingphoto.md)。
27
28   ```ts
29   src: photoAccessHelper.MovingPhoto | undefined = undefined;
30   ```
31
323. 创建动态照片控制器（[MovingPhotoViewController](../../reference/apis-media-library-kit/ohos-multimedia-movingphotoview.md#movingphotoviewcontroller)），用于控制动态照片的播放状态（如播放、停止）。
33
34   ```ts
35   controller: MovingPhotoViewController = new MovingPhotoViewController();
36   ```
37
384. 创建动态照片组件。
39
40   以下参数取值仅为举例，具体每个属性的取值范围，可参考API文档：[@ohos.multimedia.movingphotoview](../../reference/apis-media-library-kit/ohos-multimedia-movingphotoview.md)。
41
42   ```ts
43    import { photoAccessHelper, MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
44
45    @Entry
46    @Component
47    struct Index {
48      @State src: photoAccessHelper.MovingPhoto | undefined = undefined
49      @State isMuted: boolean = false
50      controller: MovingPhotoViewController = new MovingPhotoViewController();
51      build() {
52        Column() {
53          MovingPhotoView({
54            movingPhoto: this.src,
55            controller: this.controller
56            // imageAIOptions: this.options
57          })
58            // 是否静音播放，此处由按钮控制，默认值为false非静音播放。
59            .muted(this.isMuted)
60            // 视频显示模式，默认值为Cover。
61            .objectFit(ImageFit.Cover)
62            // 播放时触发
63            .onStart(() => {
64              console.log('onStart');
65            })
66            // 播放结束触发
67            .onFinish(() => {
68              console.log('onFinish');
69            })
70            // 播放停止触发
71            .onStop(() => {
72              console.log('onStop')
73            })
74            // 出现错误触发
75            .onError(() => {
76              console.log('onError');
77            })
78
79          Row() {
80            // 按钮：开始播放
81            Button('start')
82              .onClick(() => {
83                this.controller.startPlayback()
84              })
85              .margin(5)
86            // 按钮：停止播放
87            Button('stop')
88              .onClick(() => {
89                this.controller.stopPlayback()
90              })
91              .margin(5)
92            // 按钮：是否静音播放
93            Button('mute')
94              .onClick(() => {
95                this.isMuted = !this.isMuted
96              })
97              .margin(5)
98          }
99          .alignItems(VerticalAlign.Center)
100          .justifyContent(FlexAlign.Center)
101          .height('15%')
102        }
103      }
104    }
105   ```
106
107## 效果展示
108
109![](figures/moving-photo-view.gif)