在使用 ArkTS (Ark TypeScript) 进行开发时，你可能会需要从视频中提取第一帧图片来显示缩略图或封面图。在 DevEco Studio 中，可以使用 Media API 来实现这个功能。

以下是一个详细的步骤指南，包括示例代码，帮助你实现这一目标。


步骤

导入所需模块：你需要导入用于处理视频和图像的模块。

加载视频：使用 VideoPlayer 或类似组件加载视频。

获取第一帧：使用 MediaExtractor 来提取视频的帧。

示例代码

1. 安装必要依赖

首先，确保你的项目包含了必要的依赖，如 @ohos.multimedia.medialibrary.

npm install @ohos.multimedia.medialibrary
  • 1.

2. 创建页面和脚本

创建一个新的 ArkTS 页面，比如 VideoThumbnailPage.ets。


import { mediaLibrary } from '@ohos.multimedia.medialibrary'
import { ImageComponent } from '@ohos.ui.image'
import { VideoPlayer } from '@ohos.video'

// 定义函数来获取视频的第一帧
async function getFirstFrame(videoPath: string): Promise<string> {
  const extractor = new mediaLibrary.MediaExtractor()
  await extractor.setSource(videoPath)

  // 设置提取的视频帧时间位置，这里设置为0即为第一帧
  const bitmap = await extractor.getFrameAtTime(0)

  // 将Bitmap转换成Base64编码格式的字符串以便于在Image组件中使用
  return bitmap.toDataURL()
}

@Component
export default class VideoThumbnailPage extends ViewComponent {
  private videoPath: string = 'path/to/your/video.mp4'
  private thumbnailSrc: string = ''

  async onShow() {
    this.thumbnailSrc = await getFirstFrame(this.videoPath)
  }

  build() {
    Row() {
      // 显示视频的第一帧作为缩略图
      ImageComponent({ src: this.thumbnailSrc })
        .width('100%')
        .height('auto')

      // 加载并播放视频
      VideoPlayer({ src: this.videoPath })
        .width('100%')
        .height('400px')
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.

注意事项：

路径问题：确保 videoPath 是一个有效的视频文件路径，可以是本地文件路径或者网络 URL。

权限问题：如果你要访问本地文件，请确保你已经配置了相应的权限。

3. 配置权限

如果你需要读取本地存储中的视频文件，请在你的 config.json 文件中添加适当的权限。


{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.READ_MEDIA"
      },
      {
        "name": "ohos.permission.MEDIA_LOCATION"
      }
    ]
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

部署和运行

将项目部署到设备或模拟器上，打开页面，你应该能够看到视频的第一帧被显示为缩略图，同时视频也能够正常播放。


总结

通过以上步骤，可以在 ArkTS 项目中成功获取视频的第一帧图片，并将其用作缩略图。这种方法对于生成视频预览、封面图等应用场景非常有用。

未来，还可以进一步优化代码，例如增加错误处理，支持更多的视频格式等，以提升用户体验。