• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.multimedia.movingphotoview (动态照片)
2
3用于播放动态照片文件并控制其播放状态的组件。
4
5> **说明:**
6>
7> 该组件从API Version 12开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8> 当前不支持在预览器中使用MovingPhotoView组件。
9
10## 导入模块
11
12```
13import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
14```
15
16## MovingPhotoView
17
18> **说明:**
19>
20> - 当前不支持动态属性设置。
21> - 当前不支持ArkUI通用属性ComponentOptions中expandSafeArea属性设置。
22> - 该组件长按触发播放时组件区域放大为1.1倍。
23> - 该组件使用[AVPlayer](../apis-media-kit/_a_v_player.md#avplayer)进行播放,同时开启的[AVPlayer](../apis-media-kit/_a_v_player.md#avplayer)个数不建议超过3个,超过3个可能会出现视频播放卡顿现象。
24
25MovingPhotoView(options: MovingPhotoViewOptions)
26
27**参数:**
28
29
30| 参数名  | 参数类型                                                  | 必填 | 参数描述       |
31| ------- | --------------------------------------------------------- | ---- | -------------- |
32| options | [MovingPhotoViewOptions](#movingphotoviewoptions) | 是   | 动态照片信息。 |
33
34## MovingPhotoViewOptions
35
36
37| 参数名      | 参数类型                                                                                         | 必填 | 参数描述                                                                                                                                        |
38| ----------- | ------------------------------------------------------------------------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
39| movingPhoto | [MovingPhoto](js-apis-photoAccessHelper.md#movingphoto12) | 是   | 支持媒体库MovingPhoto数据源,具体信息详见[MovingPhoto说明](js-apis-photoAccessHelper.md#movingphoto12)。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 |
40| controller  | [MovingPhotoViewController](#movingphotoviewcontroller)                                          | 否   | 设置动态照片控制器,可以控制动态照片的播放状态。<br/>**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。                      |
41| imageAIOptions<sup>18+</sup>   | [ImageAIOptions](../apis-arkui/arkui-ts/ts-image-common.md#imageaioptions) | 否   | 设置动态照片AI分析选项,可配置分析类型或绑定一个分析控制器。<br/>**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。 |
42
43## 属性
44
45除支持[通用属性](../apis-arkui/arkui-ts/ts-component-general-attributes.md)外,还支持以下属性:
46
47### muted
48
49muted(isMuted: boolean)
50
51设置是否静音。
52
53**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
54
55**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
56
57**参数:**
58
59
60| 参数名  | 类型    | 必填 | 说明                         |
61| ------- | ------- | ---- | ---------------------------- |
62| isMuted | boolean | 是   | 是否静音。<br/>默认值:false。<br/>false:非静音。<br/>true:静音。|
63
64### objectFit
65
66objectFit(value: ImageFit)
67
68设置动态照片显示模式。
69
70**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
71
72**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
73
74**参数:**
75
76
77| 参数名 | 类型                                                                          | 必填 | 说明                             |
78| ------ | ----------------------------------------------------------------------------- | ---- | -------------------------------- |
79| value  | [ImageFit](../apis-arkui/arkui-ts/ts-appendix-enums.md#imagefit) | 是   | 视频显示模式。<br/>默认值:Cover。 |
80
81### autoPlayPeriod<sup>13+</sup>
82
83autoPlayPeriod(startTime: number, endTime: number)
84
85设置自动播放区间,附属于autoPlay的子配置项。
86
87在调用此方法前,需将[autoPlay](#autoplay13)设置为true,设置自动播放,否则指定的视频区间(startTime, endTime)无法生效。
88
89**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
90
91**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
92
93**参数:**
94
95
96| 参数名  | 类型    | 必填 | 说明                         |
97| ------- | ------- | ---- | ---------------------------- |
98| startTime| number| 是   | 区间播放开始时间,单位:ms。<br/>取值范围:大于等于0。|
99| endTime| number| 是   | 区间播放结束时间,单位:ms。<br/>取值范围:大于startTime。 |
100
101### autoPlay<sup>13+</sup>
102
103autoPlay(isAutoPlay: boolean)
104
105设置自动播放,自动播放一遍视频,完成播放后显示静态图。
106
107**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
108
109**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
110
111**参数:**
112
113
114| 参数名  | 类型    | 必填 | 说明                         |
115| ------- | ------- | ---- | ---------------------------- |
116| isAutoPlay| boolean| 是   | 是否自动播放。<br/>false:不自动播放。<br/>true:自动播放。<br/>默认值:false。|
117
118### repeatPlay<sup>13+</sup>
119
120repeatPlay(isRepeatPlay: boolean)
121
122设置循环播放,重复播放视频。 repeatPlay与autoPlay及长按播放互斥,repeatPlay设置时,autoPlay和长按播放均不生效。
123
124**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
125
126**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
127
128**参数:**
129
130
131| 参数名  | 类型    | 必填 | 说明                         |
132| ------- | ------- | ---- | ---------------------------- |
133| isRepeatPlay| boolean| 是   | 是否循环播放。<br/>false:不循环播放。<br/>true:循环播放。<br/>默认值:false。|
134
135### enableAnalyzer<sup>18+</sup>
136
137enableAnalyzer(enabled: boolean)
138
139设置该图片是否支持AI分析,当前支持主体识别、文字识别和对象查找等功能。
140
141**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
142
143**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
144
145**参数:**
146
147
148| 参数名  | 类型    | 必填 | 说明                         |
149| ------- | ------- | ---- | ---------------------------- |
150| enabled| boolean| 是   | 是否开启AI分析。<br/>false:不开启AI分析。<br/>true:开启AI分析。<br/>默认值:true。|
151
152## 事件
153
154除支持[通用事件](../apis-arkui/arkui-ts/ts-component-general-events.md)外,还支持以下事件:
155
156### onComplete<sup>13+</sup>
157
158onComplete(callback: MovingPhotoViewEventCallback)
159
160动态照片加载完成图片时触发该事件。
161
162**原子化服务API:** 从API version 13开始,该接口支持在原子化服务中使用。
163
164**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
165
166**参数:**
167
168
169| 参数名   | 类型                                                          | 必填 | 说明                           |
170| -------- | ------------------------------------------------------------- | ---- | ------------------------------ |
171| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | 是   | 动态照片加载完成图片的回调。 |
172
173### onStart
174
175onStart(callback: MovingPhotoViewEventCallback)
176
177播放时触发该事件。
178
179**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
180
181**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
182
183**参数:**
184
185
186| 参数名   | 类型                                                          | 必填 | 说明                           |
187| -------- | ------------------------------------------------------------- | ---- | ------------------------------ |
188| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | 是   | 动态照片开始播放时触发的回调。 |
189
190### onPause
191
192onPause(callback: MovingPhotoViewEventCallback)
193
194播放暂停时触发该事件。
195
196**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
197
198**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
199
200**参数:**
201
202
203| 参数名   | 类型                                                          | 必填 | 说明                           |
204| -------- | ------------------------------------------------------------- | ---- | ------------------------------ |
205| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | 是   | 动态照片播放暂停时触发的回调。 |
206
207### onFinish
208
209onFinish(callback: MovingPhotoViewEventCallback)
210
211播放结束时触发该事件。
212
213**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
214
215**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
216
217**参数:**
218
219
220| 参数名   | 类型                                                          | 必填 | 说明                           |
221| -------- | ------------------------------------------------------------- | ---- | ------------------------------ |
222| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | 是   | 动态照片播放结束时触发的回调。 |
223
224### onError
225
226onError(callback: MovingPhotoViewEventCallback)
227
228播放失败时触发该事件。
229
230**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
231
232**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
233
234**参数:**
235
236
237| 参数名   | 类型                                                          | 必填 | 说明                           |
238| -------- | ------------------------------------------------------------- | ---- | ------------------------------ |
239| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | 是   | 动态照片播放失败时触发的回调。 |
240
241### onStop
242
243onStop(callback: MovingPhotoViewEventCallback)
244
245播放停止时触发该事件(当stop()方法被调用后触发)。
246
247**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
248
249**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
250
251**参数:**
252
253
254| 参数名   | 类型                                                          | 必填 | 说明                           |
255| -------- | ------------------------------------------------------------- | ---- | ------------------------------ |
256| callback | [MovingPhotoViewEventCallback](#movingphotovieweventcallback) | 是   | 动态照片停止播放时触发的回调。 |
257
258## MovingPhotoViewEventCallback
259
260declare type MovingPhotoViewEventCallback = () => void
261
262动态照片播放状态发生变化时触发的回调。
263
264## MovingPhotoViewController
265
266一个MovingPhotoViewController对象可以控制一个MovingPhotoView,可用视频播放实例请参考[@ohos.multimedia.media](../apis-media-kit/js-apis-media.md)。
267
268### startPlayback
269
270startPlayback(): void
271
272开始播放。
273
274**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
275
276**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
277
278### stopPlayback
279
280stopPlayback(): void
281
282停止播放,再次播放时从头开始播放。
283
284**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。
285
286**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
287
288### refreshMovingPhoto<sup>18+</sup>
289
290refreshMovingPhoto(): void
291
292强制刷新动态照片组件加载的视频和图片资源,会打断组件当前的行为,使用时要谨慎。
293
294**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
295
296**系统能力:** SystemCapability.FileManagement.PhotoAccessHelper.Core
297
298## 示例1:多种形式播放动态照片
299
300```ts
301// xxx.ets
302import { photoAccessHelper } from '@kit.MediaLibraryKit';
303import { emitter } from '@kit.BasicServicesKit';
304import { dataSharePredicates } from '@kit.ArkData';
305import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
306
307const PHOTO_SELECT_EVENT_ID: number = 80001
308
309@Entry
310@Component
311struct MovingPhotoViewDemo {
312  @State src: photoAccessHelper.MovingPhoto | undefined = undefined
313  @State isMuted: boolean = false
314  controller: MovingPhotoViewController = new MovingPhotoViewController()
315  private uiContext: UIContext = this.getUIContext()
316
317  aboutToAppear(): void {
318    emitter.on({
319      eventId: PHOTO_SELECT_EVENT_ID,
320      priority: emitter.EventPriority.IMMEDIATE,
321    }, (eventData: emitter.EventData) => {
322      this.src = AppStorage.get<photoAccessHelper.MovingPhoto>('mv_data') as photoAccessHelper.MovingPhoto
323    })
324  }
325
326  aboutToDisappear(): void {
327    emitter.off(PHOTO_SELECT_EVENT_ID)
328  }
329
330  build() {
331    Column() {
332      Row() {
333        Button('PICK')
334          .margin(5)
335          .onClick(async () => {
336            try {
337              let uris: Array<string> = []
338              const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions()
339              photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE
340              photoSelectOptions.maxSelectNumber = 2
341              const photoViewPicker = new photoAccessHelper.PhotoViewPicker()
342              let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions)
343              uris = photoSelectResult.photoUris
344              if (uris[0]) {
345                this.handlePickerResult(this.uiContext.getHostContext()!, uris[0], new MediaDataHandlerMovingPhoto())
346              }
347            } catch (e) {
348              console.error(`pick file failed`)
349            }
350          })
351      }
352      .alignItems(VerticalAlign.Center)
353      .justifyContent(FlexAlign.Center)
354      .height('15%')
355
356      Row() {
357        Column() {
358          MovingPhotoView({
359            movingPhoto: this.src,
360            controller: this.controller
361          })
362            .width('100%')
363            .height('100%')
364            .muted(this.isMuted)
365            .autoPlay(true)
366            .repeatPlay(false)
367            .autoPlayPeriod(0, 600)
368            .objectFit(ImageFit.Cover)
369            .onComplete(() => {
370              console.log('Completed');
371            })
372            .onStart(() => {
373              console.log('onStart')
374            })
375            .onFinish(() => {
376              console.log('onFinish')
377            })
378            .onStop(() => {
379              console.log('onStop')
380            })
381            .onError(() => {
382              console.log('onError')
383            })
384        }
385      }
386      .height('70%')
387
388      Row() {
389        Button('start')
390          .onClick(() => {
391            this.controller.startPlayback()
392          })
393          .margin(5)
394        Button('stop')
395          .onClick(() => {
396            this.controller.stopPlayback()
397          })
398          .margin(5)
399        Button('mute')
400          .onClick(() => {
401            this.isMuted = !this.isMuted
402          })
403          .margin(5)
404      }
405      .alignItems(VerticalAlign.Center)
406      .justifyContent(FlexAlign.Center)
407      .height('15%')
408    }
409  }
410
411  async handlePickerResult(context: Context, uri: string, handler: photoAccessHelper.MediaAssetDataHandler<photoAccessHelper.MovingPhoto>): Promise<void> {
412    let uriPredicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
413    uriPredicates.equalTo('uri', uri)
414    let fetchOptions: photoAccessHelper.FetchOptions = {
415      fetchColumns: [],
416      predicates: uriPredicates
417    };
418    let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context)
419    let assetResult = await phAccessHelper.getAssets(fetchOptions)
420    let asset = await assetResult.getFirstObject()
421    let requestOptions: photoAccessHelper.RequestOptions = {
422      deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE,
423    }
424    try {
425      photoAccessHelper.MediaAssetManager.requestMovingPhoto(context, asset, requestOptions, handler)
426    } catch (err) {
427      console.error("request error: ", err)
428    }
429  }
430}
431
432class MediaDataHandlerMovingPhoto implements photoAccessHelper.MediaAssetDataHandler<photoAccessHelper.MovingPhoto> {
433  async onDataPrepared(movingPhoto: photoAccessHelper.MovingPhoto) {
434    AppStorage.setOrCreate('mv_data', movingPhoto)
435    emitter.emit({
436      eventId: PHOTO_SELECT_EVENT_ID,
437      priority: emitter.EventPriority.IMMEDIATE,
438    }, {
439    })
440  }
441}
442```
443## 示例2:图像分析功能使用
444
445```ts
446// xxx.ets
447import { photoAccessHelper } from '@kit.MediaLibraryKit';
448import { emitter } from '@kit.BasicServicesKit';
449import { dataSharePredicates } from '@kit.ArkData';
450import { MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
451import visionImageAnalyzer from '@hms.ai.visionImageAnalyzer';
452const PHOTO_SELECT_EVENT_ID: number = 80001
453
454@Entry
455@Component
456struct MovingPhotoViewDemo {
457  @State src: photoAccessHelper.MovingPhoto | undefined = undefined
458  @State isMuted: boolean = false
459  controller: MovingPhotoViewController = new MovingPhotoViewController()
460  private aiController: visionImageAnalyzer.VisionImageAnalyzerController =
461    new visionImageAnalyzer.VisionImageAnalyzerController()
462  private options: ImageAIOptions = {
463    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT, ImageAnalyzerType.OBJECT_LOOKUP],
464    aiController: this.aiController
465  }
466  private uiContext: UIContext = this.getUIContext()
467
468  aboutToAppear(): void {
469    emitter.on({
470      eventId: PHOTO_SELECT_EVENT_ID,
471      priority: emitter.EventPriority.IMMEDIATE,
472    }, (eventData: emitter.EventData) => {
473      this.src = AppStorage.get<photoAccessHelper.MovingPhoto>('mv_data') as photoAccessHelper.MovingPhoto
474    })
475  }
476
477  aboutToDisappear(): void {
478    emitter.off(PHOTO_SELECT_EVENT_ID)
479  }
480
481  build() {
482    Column() {
483      Row() {
484        Button('PICK')
485          .margin(5)
486          .onClick(async () => {
487            try {
488              let uris: Array<string> = []
489              const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions()
490              photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE
491              photoSelectOptions.maxSelectNumber = 2
492              const photoViewPicker = new photoAccessHelper.PhotoViewPicker()
493              let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions)
494              uris = photoSelectResult.photoUris
495              if (uris[0]) {
496                this.handlePickerResult(this.uiContext.getHostContext()!, uris[0], new MediaDataHandlerMovingPhoto())
497              }
498            } catch (e) {
499              console.error(`pick file failed`)
500            }
501          })
502      }
503      .alignItems(VerticalAlign.Center)
504      .justifyContent(FlexAlign.Center)
505      .height('15%')
506
507      Row() {
508        Column() {
509          MovingPhotoView({
510            movingPhoto: this.src,
511            controller: this.controller,
512            imageAIOptions: this.options
513          })
514            .width('100%')
515            .height('100%')
516            .muted(this.isMuted)
517            .autoPlay(true)
518            .repeatPlay(false)
519            .autoPlayPeriod(0, 600)
520            .objectFit(ImageFit.Cover)
521            .enableAnalyzer(true)
522            .onComplete(() => {
523              console.log('Completed');
524            })
525            .onStart(() => {
526              console.log('onStart')
527            })
528            .onFinish(() => {
529              console.log('onFinish')
530            })
531            .onStop(() => {
532              console.log('onStop')
533            })
534            .onError(() => {
535              console.log('onError')
536            })
537        }
538      }
539      .height('70%')
540
541      Row() {
542        Button('start')
543          .onClick(() => {
544            this.controller.startPlayback()
545          })
546          .margin(5)
547        Button('stop')
548          .onClick(() => {
549            this.controller.stopPlayback()
550          })
551          .margin(5)
552        Button('mute')
553          .onClick(() => {
554            this.isMuted = !this.isMuted
555          })
556          .margin(5)
557      }
558      .alignItems(VerticalAlign.Center)
559      .justifyContent(FlexAlign.Center)
560      .height('15%')
561    }
562  }
563
564  async handlePickerResult(context: Context, uri: string, handler: photoAccessHelper.MediaAssetDataHandler<photoAccessHelper.MovingPhoto>): Promise<void> {
565    let uriPredicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
566    uriPredicates.equalTo('uri', uri)
567    let fetchOptions: photoAccessHelper.FetchOptions = {
568      fetchColumns: [],
569      predicates: uriPredicates
570    };
571    let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context)
572    let assetResult = await phAccessHelper.getAssets(fetchOptions)
573    let asset = await assetResult.getFirstObject()
574    let requestOptions: photoAccessHelper.RequestOptions = {
575      deliveryMode: photoAccessHelper.DeliveryMode.FAST_MODE,
576    }
577    try {
578      photoAccessHelper.MediaAssetManager.requestMovingPhoto(context, asset, requestOptions, handler)
579    } catch (err) {
580      console.error("request error: ", err)
581    }
582  }
583}
584
585class MediaDataHandlerMovingPhoto implements photoAccessHelper.MediaAssetDataHandler<photoAccessHelper.MovingPhoto> {
586  async onDataPrepared(movingPhoto: photoAccessHelper.MovingPhoto) {
587    AppStorage.setOrCreate('mv_data', movingPhoto)
588    emitter.emit({
589      eventId: PHOTO_SELECT_EVENT_ID,
590      priority: emitter.EventPriority.IMMEDIATE,
591    }, {
592    })
593  }
594}
595```
596## 示例3:在原子化服务中使用动态照片
597
598```ts
599// xxx.ets
600import { photoAccessHelper, MovingPhotoView, MovingPhotoViewController, MovingPhotoViewAttribute } from '@kit.MediaLibraryKit';
601
602let data: photoAccessHelper.MovingPhoto
603async function loading(context: Context) {
604  try {
605    // 需要确保imageFileUri和videoFileUri对应的资源在应用沙箱存在。
606    let imageFileUri = 'file://{bundleName}/data/storage/el2/base/haps/entry/files/xxx.jpg';
607    let videoFileUri = 'file://{bundleName}/data/storage/el2/base/haps/entry/files/xxx.mp4';
608    data = await photoAccessHelper.MediaAssetManager.loadMovingPhoto(context, imageFileUri, videoFileUri);
609    console.info('load moving photo successfully');
610  } catch (err) {
611    console.error(`load moving photo failed with error: ${err.code}, ${err.message}`);
612  }
613}
614@Entry
615@Component
616struct Index {
617  controller: MovingPhotoViewController = new MovingPhotoViewController()
618  private uiContext: UIContext = this.getUIContext()
619  @State ImageFit: ImageFit | undefined | null = ImageFit.Contain;
620  @State flag: boolean = true;
621  @State autoPlayFlag: boolean = true;
622  @State repeatPlayFlag: boolean = false;
623  @State autoPlayPeriodStart: number = 0;
624  @State autoPlayPeriodEnd: number = 500;
625  aboutToAppear(): void {
626    loading(this.uiContext.getHostContext()!)
627  }
628
629  build() {
630    NavDestination() {
631      Column() {
632        Stack({ alignContent: Alignment.BottomStart }) {
633          MovingPhotoView({
634            movingPhoto: data,
635            controller: this.controller
636          })
637            .width(300)
638            .height(400)
639            .muted(this.flag)
640            .objectFit(this.ImageFit)
641            .autoPlay(this.autoPlayFlag)
642            .autoPlayPeriod(this.autoPlayPeriodStart, this.autoPlayPeriodEnd)
643            .repeatPlay(this.repeatPlayFlag)
644            .onComplete(() => {
645              console.info('onComplete')
646            })
647            .onStart(() => {
648              console.info('onStart')
649            })
650            .onStop(() => {
651              console.info('onStop')
652            })
653            .onPause(() => {
654              console.info('onPause')
655            })
656            .onFinish(() => {
657              console.info('onFinish')
658            })
659            .onError(() => {
660              console.info('onError')
661            })
662        }
663
664        Row() {
665          Button('Play')
666            .onClick(() => {
667              this.controller.startPlayback()
668            })
669          Button('StopPlay')
670            .onClick(() => {
671              this.controller.stopPlayback()
672            })
673          Button('refreshMovingPhoto')
674            .onClick(() => {
675              this.controller.refreshMovingPhoto()
676            })
677          Button('mute').id('MovingPhotoView_true')
678            .onClick(() => {
679              this.flag = false
680            })
681        }
682      }
683    }
684  }
685}
686```