1# Playing Moving Photos with MovingPhotoView
2
3The system provides the **MovingPhotoView** component, which can be used to play moving photos in social networking and gallery applications.
4
5## Constraints
6
7The restrictions on using the **MovingPhotoView** component are as follows:
8
9- Currently, live properties cannot be set.
10- Currently, the ArkUI [expandSafeArea](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md#expandsafearea) cannot be set.
11- When this component is long pressed to trigger playback, the component area is zoomed in to 1.1 times.
12- This component uses [AVPlayer](../../reference/apis-media-kit/js-apis-media.md#avplayer9) to play moving photos. A maximum of three AVPlayers can be used at the same time. Otherwise, frame freezing may occur.
13
14## How to Develop
15
161. Import modules.
17
18   ```ts
19   import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
20   ```
21
222. Obtain a [MovingPhoto](../../reference/apis-media-library-kit/js-apis-photoAccessHelper.md#movingphoto12) object.
23
24   Use the **photoAccessHelper** APIs to create or obtain a moving photo object. The **MovingPhotoView** receives only the constructed moving photo object.
25
26   For details about how to create and obtain a moving photo object, see [Accessing and Managing Moving Photo Assets](photoAccessHelper-movingphoto.md).
27
28   ```ts
29   src: photoAccessHelper.MovingPhoto | undefined = undefined;
30   ```
31
323. Create a [MovingPhotoViewController](../../reference/apis-media-library-kit/ohos-multimedia-movingphotoview.md#movingphotoviewcontroller) to control the playback status (such as playing or stopping) of the moving photo.
33
34   ```ts
35   controller: MovingPhotoViewController = new MovingPhotoViewController();
36   ```
37
384. Create a **MovingPhotoView** instance.
39
40   The values in the following sample code are only examples. For details about the value range of each parameter, see [@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            // Whether to mute the playback. The default value is false. In this example, it is controlled by the button.
59            .muted(this.isMuted)
60            // Video display mode. The default value is Cover.
61            .objectFit(ImageFit.Cover)
62            // Triggered when the playback starts.
63            .onStart(() => {
64              console.log('onStart');
65            })
66            // Triggered when the playback ends.
67            .onFinish(() => {
68              console.log('onFinish');
69            })
70            // Triggered when the playback stops.
71            .onStop(() => {
72              console.log('onStop')
73            })
74            // Triggered when an error occurs.
75            .onError(() => {
76              console.log('onError');
77            })
78
79          Row() {
80            // Button for starting playback.
81            Button('start')
82              .onClick(() => {
83                this.controller.startPlayback()
84              })
85              .margin(5)
86            // Button for stopping playback.
87            Button('stop')
88              .onClick(() => {
89                this.controller.stopPlayback()
90              })
91              .margin(5)
92            // Button controlling whether to mute the playback.
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## Effect
108
109![](figures/moving-photo-view.gif)
110