HarmonyOS 如何使用Image组件展示视频的第一帧

开发者获取图片和视频缩略图，可参考如下文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/photoaccesshelper-resource-guidelines-V5#获取图片和视频缩略图

网络视频因为数据不在本地，所以需要 先下载一段数据到本地，然后用如下三方库，来获取第一帧图片，三方库如下：https://gitee.com/openharmony-tpc/mp4parser

可参考如下demo：

import { media } from '@kit.MediaKit';
import { image } from '@kit.ImageKit';
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';
import { picker } from '@kit.CoreFileKit';

const TAG = 'MetadataDemo'

let context = getContext(this) as common.UIAbilityContext;

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  // pixelMap对象声明，用于图片显示
  @State pixelMap: image.PixelMap | undefined = undefined;

  build() {
    Row() {
      Column() {
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
        Button() {
          Text('TestButton')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('60%')
        .height('5%')
        .onClick(() => {
          // 设置fdSrc, 获取视频的缩略图
          this.testFetchFrameByTime()
        })
        Image(this.pixelMap).width(300).height(300)
          .margin({
            top: 20
          })
      }
      .width('100%')
    }
    .height('100%')
  }

  // 在以下demo中，使用资源管理接口获取打包在HAP内的视频文件，通过设置fdSrc属性，
  // 获取视频指定时间的缩略图，并通过Image控件显示在屏幕上。
  async testFetchFrameByTime() {
    // 创建AVImageGenerator对象
    let avImageGenerator: media.AVImageGenerator = await media.createAVImageGenerator()
    let file = fs.openSync(context.filesDir+'/VID_20240624_194300.mp4', fs.OpenMode.READ_ONLY);
    let avFileDescriptor: media.AVFileDescriptor = {
      fd: file.fd
    };
    // 设置fdSrc
    avImageGenerator.fdSrc = avFileDescriptor;

    // 初始化入参
    let timeUs = 0
    let queryOption = media.AVImageQueryOptions.AV_IMAGE_QUERY_NEXT_SYNC
    let param: media.PixelMapParams = {
      width : 300,
      height : 300
    }

    // 获取缩略图（promise模式）
    this.pixelMap = await avImageGenerator.fetchFrameByTime(timeUs, queryOption, param)

    // 释放资源（promise模式）
    avImageGenerator.release()
    console.info(TAG, `release success.`)
  }
}