1# Playing Moving Photos with MovingPhotoView 2<!--Kit: Media Library Kit--> 3<!--Subsystem: FileManagement--> 4<!--Owner: @tangye123456--> 5<!--SE: @YanSanzo--> 6<!--TSE: @tinygreyy--> 7 8The system provides the **MovingPhotoView** component, which can be used to play moving photos in social networking and gallery applications. 9 10## Constraints 11 12The restrictions on using the **MovingPhotoView** component are as follows: 13 14- Currently, live properties cannot be set. 15- Currently, the ArkUI [expandSafeArea](../../reference/apis-arkui/arkui-ts/ts-universal-attributes-expand-safe-area.md#expandsafearea) cannot be set. 16- When this component is long pressed to trigger playback, the component area is zoomed in to 1.1 times. 17- This component uses [AVPlayer](../../reference/apis-media-kit/arkts-apis-media-AVPlayer.md) to play moving photos. A maximum of three AVPlayers can be used at the same time. Otherwise, frame freezing may occur. 18 19## How to Develop 20 211. Import modules. 22 23 ```ts 24 import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit'; 25 ``` 26 272. Obtain a [MovingPhoto](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MovingPhoto.md) object. 28 29 Use the **photoAccessHelper** APIs to create or obtain a moving photo object. The **MovingPhotoView** receives only the constructed moving photo object. 30 31 For details about how to create and obtain a moving photo object, see [Accessing and Managing Moving Photo Assets](photoAccessHelper-movingphoto.md). 32 33 ```ts 34 src: photoAccessHelper.MovingPhoto | undefined = undefined; 35 ``` 36 373. 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. 38 39 ```ts 40 controller: MovingPhotoViewController = new MovingPhotoViewController(); 41 ``` 42 434. Create a MovingPhotoView instance. 44 45 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). 46 47 ```ts 48 import { photoAccessHelper, MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit'; 49 50 @Entry 51 @Component 52 struct Index { 53 @State src: photoAccessHelper.MovingPhoto | undefined = undefined 54 @State isMuted: boolean = false 55 controller: MovingPhotoViewController = new MovingPhotoViewController(); 56 build() { 57 Column() { 58 MovingPhotoView({ 59 movingPhoto: this.src, 60 controller: this.controller 61 }) 62 // Whether to mute the playback. The default value is false. In this example, it is controlled by the button. 63 .muted(this.isMuted) 64 // Video display mode. The default value is Cover. 65 .objectFit(ImageFit.Cover) 66 // Triggered when the playback starts. 67 .onStart(() => { 68 console.log('onStart'); 69 }) 70 // Triggered when the playback ends. 71 .onFinish(() => { 72 console.log('onFinish'); 73 }) 74 // Triggered when the playback stops. 75 .onStop(() => { 76 console.log('onStop') 77 }) 78 // Triggered when an error occurs. 79 .onError(() => { 80 console.log('onError'); 81 }) 82 83 Row() { 84 // Button for starting playback. 85 Button('start') 86 .onClick(() => { 87 this.controller.startPlayback() 88 }) 89 .margin(5) 90 // Button for stopping playback. 91 Button('stop') 92 .onClick(() => { 93 this.controller.stopPlayback() 94 }) 95 .margin(5) 96 } 97 .alignItems(VerticalAlign.Center) 98 .justifyContent(FlexAlign.Center) 99 .height('15%') 100 } 101 } 102 } 103 ``` 104 105## Effect 106 107 108
