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