1# @ohos.multimedia.movingphotoview (MovingPhotoView) 2 3The **MovingPhotoView** component is used to play moving photos and control the playback status. 4 5> **NOTE** 6> 7> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8> Currently, the **MovingPhotoView** component cannot be used in Previewer. 9 10## Modules to Import 11 12``` 13import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit'; 14``` 15 16## MovingPhotoView 17 18> **NOTE** 19> 20> - Currently, live attributes cannot be set. 21> - Currently, **expandSafeArea** in the ArkUI common attribute **ComponentOptions** cannot be set. 22> - When this component is long pressed to trigger playback, the component area is zoomed in to 1.1 times. 23> - This component uses [AVPlayer](../apis-media-kit/_a_v_player.md#avplayer) to play moving photos. The number of [AVPlayers](../apis-media-kit/_a_v_player.md#avplayer) being used at the same time cannot exceed three. Otherwise, frame freezing may occur during the playback. 24 25MovingPhotoView(options: MovingPhotoViewOptions) 26 27**Parameters** 28 29 30| Name | Type | Mandatory| Description | 31| ------- | --------------------------------------------------------- | ---- | -------------- | 32| options | [MovingPhotoViewOptions](#movingphotoviewoptions) | Yes | Moving photo information.| 33 34## MovingPhotoViewOptions 35 36 37| Name | Type | Mandatory| Description | 38| ----------- | ------------------------------------------------------------------------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------- | 39| movingPhoto | [MovingPhoto](js-apis-photoAccessHelper.md#movingphoto12) | Yes | **MovingPhoto** instance. For details, see [MovingPhoto](js-apis-photoAccessHelper.md#movingphoto12).| 40| controller | [MovingPhotoViewController](#movingphotoviewcontroller) | No | Controller used to control the playback status of the moving photo. | 41 42## Properties 43 44In addition to the [universal properties](../apis-arkui/arkui-ts/ts-universal-attributes-size.md), the following properties are supported. 45 46### muted 47 48muted(isMuted: boolean) 49 50Sets whether to mute the player. 51 52**Atomic service API**: This API can be used in atomic services since API version 12. 53 54**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 55 56**Parameters** 57 58 59| Name | Type | Mandatory| Description | 60| ------- | ------- | ---- | ---------------------------- | 61| isMuted | boolean | Yes | Whether to mute the player.<br>Default value: **false**<br>The value **true** means to mute the player;<br>the value **false** means the opposite.| 62 63### objectFit 64 65objectFit(value: ImageFit) 66 67Set the display mode of the moving photo. 68 69**Atomic service API**: This API can be used in atomic services since API version 12. 70 71**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 72 73**Parameters** 74 75 76| Name| Type | Mandatory| Description | 77| ------ | ----------------------------------------------------------------------------- | ---- | -------------------------------- | 78| value | [ImageFit](../apis-arkui/arkui-ts/ts-appendix-enums.md#imagefit) | Yes | Image scale type.<br>Default value: **Cover**| 79 80## Events 81 82In addition to [universal events](../apis-arkui/arkui-ts/ts-universal-events-click.md), the following events are supported. 83 84### onStart 85 86onStart(callback: MovingPhotoViewEventCallback) 87 88Called when the moving photo is played. 89 90**Atomic service API**: This API can be used in atomic services since API version 12. 91 92**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 93 94**Parameters** 95 96 97| Name | Type | Mandatory| Description | 98| -------- | ------------------------------------------------------------- | ---- | ------------------------------ | 99| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | Yes | Callback to be invoked when a moving photo starts playing.| 100 101### onPause 102 103onPause(callback: MovingPhotoViewEventCallback) 104 105Called when the playback is paused. 106 107**Atomic service API**: This API can be used in atomic services since API version 12. 108 109**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 110 111**Parameters** 112 113 114| Name | Type | Mandatory| Description | 115| -------- | ------------------------------------------------------------- | ---- | ------------------------------ | 116| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | Yes | Callback to be invoked when the playback of a moving photo is paused.| 117 118### onFinish 119 120onFinish(callback: MovingPhotoViewEventCallback) 121 122Called when the playback is finished. 123 124**Atomic service API**: This API can be used in atomic services since API version 12. 125 126**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 127 128**Parameters** 129 130 131| Name | Type | Mandatory| Description | 132| -------- | ------------------------------------------------------------- | ---- | ------------------------------ | 133| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | Yes | Callback to be invoked when the playback of a moving photo ends.| 134 135### onError 136 137onError(callback: MovingPhotoViewEventCallback) 138 139Called when the playback fails. 140 141**Atomic service API**: This API can be used in atomic services since API version 12. 142 143**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 144 145**Parameters** 146 147 148| Name | Type | Mandatory| Description | 149| -------- | ------------------------------------------------------------- | ---- | ------------------------------ | 150| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | Yes | Callback to be invoked when the playback of a moving photo fails.| 151 152### onStop 153 154onStop(callback: MovingPhotoViewEventCallback) 155 156Called when the playback is stopped (by **stop()**). 157 158**Atomic service API**: This API can be used in atomic services since API version 12. 159 160**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 161 162**Parameters** 163 164 165| Name | Type | Mandatory| Description | 166| -------- | ------------------------------------------------------------- | ---- | ------------------------------ | 167| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | Yes | Callback to be invoked when the playback of a moving photo is stopped.| 168 169## MovingPhotoViewEventCallback 170 171declare type MovingPhotoViewEventCallback = () => void 172 173Defines a callback to be invoked when the playback status of a moving photo changes. 174 175## MovingPhotoViewController 176 177A **MovingPhotoViewController** object can be used to control a **MovingPhotoView** component. For details, see [@ohos.multimedia.media](../apis-media-kit/js-apis-media.md). 178 179### startPlayback 180 181startPlayback(): void 182 183Starts playback. 184 185**Atomic service API**: This API can be used in atomic services since API version 12. 186 187**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 188 189### stopPlayback 190 191stopPlayback(): void 192 193Stops playback. Once started again, the playback starts from the beginning. 194 195**Atomic service API**: This API can be used in atomic services since API version 12. 196 197**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core 198 199## Example 200 201```ts 202// xxx.ets 203import { photoAccessHelper } from '@kit.MediaLibraryKit'; 204import { emitter } from '@kit.BasicServicesKit'; 205import { dataSharePredicates } from '@kit.ArkData'; 206import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit'; 207 208const PHOTO_SELECT_EVENT_ID: number = 80001 209 210@Entry 211@Component 212struct MovingPhotoViewDemo { 213 @State src: photoAccessHelper.MovingPhoto | undefined = undefined 214 @State isMuted: boolean = false 215 controller: MovingPhotoViewController = new MovingPhotoViewController() 216 217 aboutToAppear(): void { 218 emitter.on({ 219 eventId: PHOTO_SELECT_EVENT_ID, 220 priority: emitter.EventPriority.IMMEDIATE, 221 }, (eventData: emitter.EventData) => { 222 this.src = AppStorage.get<photoAccessHelper.MovingPhoto>('mv_data') as photoAccessHelper.MovingPhoto 223 }) 224 } 225 226 aboutToDisappear(): void { 227 emitter.off(PHOTO_SELECT_EVENT_ID) 228 } 229 230 build() { 231 Column() { 232 Row() { 233 Button('PICK') 234 .margin(5) 235 .onClick(async () => { 236 let context = getContext(this) 237 try { 238 let uris: Array<string> = [] 239 const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions() 240 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE 241 photoSelectOptions.maxSelectNumber = 2 242 const photoViewPicker = new photoAccessHelper.PhotoViewPicker() 243 let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions) 244 uris = photoSelectResult.photoUris 245 if (uris[0]) { 246 this.handlePickerResult(context, uris[0], new MediaDataHandlerMovingPhoto()) 247 } 248 } catch (e) { 249 console.error(`pick file failed`) 250 } 251 }) 252 } 253 .alignItems(VerticalAlign.Center) 254 .justifyContent(FlexAlign.Center) 255 .height('15%') 256 257 Row() { 258 Column() { 259 MovingPhotoView({ 260 movingPhoto: this.src, 261 controller: this.controller 262 }) 263 .width('100%') 264 .height('100%') 265 .muted(this.isMuted) 266 .objectFit(ImageFit.Contain) 267 .onStart(() => { 268 console.log('onStart') 269 }) 270 .onFinish(() => { 271 console.log('onFinish') 272 }) 273 .onStop(() => { 274 console.log('onStop') 275 }) 276 .onError(() => { 277 console.log('onError') 278 }) 279 } 280 } 281 .height('70%') 282 283 Row() { 284 Button('start') 285 .onClick(() => { 286 this.controller.startPlayback() 287 }) 288 .margin(5) 289 Button('stop') 290 .onClick(() => { 291 this.controller.stopPlayback() 292 }) 293 .margin(5) 294 Button('mute') 295 .onClick(() => { 296 this.isMuted = !this.isMuted 297 }) 298 .margin(5) 299 } 300 .alignItems(VerticalAlign.Center) 301 .justifyContent(FlexAlign.Center) 302 .height('15%') 303 } 304 } 305 306 async handlePickerResult(context: Context, uri: string, handler: photoAccessHelper.MediaAssetDataHandler<photoAccessHelper.MovingPhoto>): Promise<void> { 307 let uriPredicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates(); 308 uriPredicates.equalTo('uri', uri) 309 let fetchOptions: photoAccessHelper.FetchOptions = { 310 fetchColumns: [], 311 predicates: uriPredicates 312 }; 313 let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context) 314 let assetResult = await phAccessHelper.getAssets(fetchOptions) 315 let asset = await assetResult.getFirstObject() 316 let requestOptions: photoAccessHelper.RequestOptions = { 317 deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE, 318 } 319 try { 320 photoAccessHelper.MediaAssetManager.requestMovingPhoto(context, asset, requestOptions, handler) 321 } catch (err) { 322 console.error("request error: ", err) 323 } 324 } 325} 326 327class MediaDataHandlerMovingPhoto implements photoAccessHelper.MediaAssetDataHandler<photoAccessHelper.MovingPhoto> { 328 async onDataPrepared(movingPhoto: photoAccessHelper.MovingPhoto) { 329 AppStorage.setOrCreate('mv_data', movingPhoto) 330 emitter.emit({ 331 eventId: PHOTO_SELECT_EVENT_ID, 332 priority: emitter.EventPriority.IMMEDIATE, 333 }, { 334 }) 335 } 336} 337``` 338