1# Playing Moving Photos with MovingPhotoView 
2
3The **MovingPhotoView** component is used to play moving photos and control the playback status.
4
5## Constraints
6
7- Currently, live properties cannot be set.
8- Currently, the ArkUI [expandSafeArea](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md#expandsafearea) cannot be set.
9- When this component is long pressed to trigger playback, the component area is zoomed in to 1.1 times.
10- 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.
11
12## How to Develop
13
141. Import modules.
15 
16   ```ts
17   import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
18   ```
19
202. Obtain a moving photo object.
21
22   Use the **photoAccessHelper** APIs to create or obtain a moving photo object. The **MovingPhotoView** receives only the constructed moving photo object.
23     
24   For details about how to create and obtain a moving photo object, see [Accessing and Managing Moving Photo Assets](photoAccessHelper-movingphoto.md).
25
26   ```ts
27   src: photoAccessHelper.MovingPhoto | undefined = undefined;
28   ```
29
303. Create a **MovingPhotoViewController** instance, which is used to control the playback status of moving photos.
31   
32   ```ts
33   controller: MovingPhotoViewController = new MovingPhotoViewController();
34   ```   
35
364. Create a **MovingPhotoView** instance.
37
38   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).
39   
40   ```ts
41    MovingPhotoView({
42        movingPhoto: this.src,
43        controller: this.controller
44        })
45        .width('100%')
46        .height('100%')
47        // Whether to mute the playback. The default value is false. In this example, it is controlled by the button.
48        .muted(this.isMuted)
49        // Video display mode, which is set to Contain. The default value is Cover.
50        .objectFit(ImageFit.Contain)
51        // Triggered when the playback starts.
52        .onStart(() => {
53            console.log('onStart')
54        })
55        // Triggered when the playback ends.
56        .onFinish(() => {
57            console.log('onFinish')
58        })
59        // Triggered when the playback stops.
60        .onStop(() => {
61            console.log('onStop')
62        })
63        // Triggered when an error occurs.
64        .onError(() => {
65            console.log('onError')
66        })
67
68      Row() {
69        // Button for starting playback.
70        Button('start')
71          .onClick(() => {
72            this.controller.startPlayback()
73          })
74          .margin(5)
75        // Button for stopping playback.
76        Button('stop')
77          .onClick(() => {
78            this.controller.stopPlayback()
79          })
80          .margin(5)
81        // Button controlling whether to mute the playback.
82        Button('mute')
83          .onClick(() => {
84            this.isMuted = !this.isMuted
85          })
86          .margin(5)
87      }
88      .alignItems(VerticalAlign.Center)
89      .justifyContent(FlexAlign.Center)
90      .height('15%')
91   ```
92
93## Effect
94
95![](figures/moving-photo-view.gif)
96