鸿蒙Next中如何将视频第一帧作为列表展示

在鸿蒙Next开发中，我想实现一个视频列表，每个视频项用第一帧作为封面展示。目前尝试通过MediaPlayer获取帧数据，但处理效率较低，且列表滑动时有卡顿。请问有没有更高效的方案？比如系统提供的API或推荐的开源库？最好能附上关键代码示例说明如何提取帧并优化性能。

2 回复

鸿蒙Next里想用视频第一帧做列表？简单！用PixelMap抓取视频首帧，塞进ListContainer就行。记得先申请存储权限，不然系统会像防贼一样盯着你。代码写起来比追剧还轻松，就是别手滑播成全屏了！

更多关于鸿蒙Next中如何将视频第一帧作为列表展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过PixelMap提取视频首帧，并在List组件中展示。以下是核心实现步骤：

  1. 获取视频首帧：
import media from '@ohos.multimedia.media';

// 创建AVPlayer实例
let avPlayer: media.AVPlayer = await media.createAVPlayer();

// 设置视频源
avPlayer.url = '视频路径';

// 获取首帧（需在prepared状态）
avPlayer.on('stateChange', async (state) => {
  if (state === 'prepared') {
    let pixelMap: image.PixelMap = await avPlayer.getVideoPixelMap(0); // 0表示首帧
    // 将pixelMap存入列表数据源
  }
});
  1. 列表数据源结构：
class VideoItem {
  pixelMap: image.PixelMap | null = null;
  title: string = '';
}

private videoList: VideoItem[] = []; // 列表数据
  1. List组件实现：
List({ space: 12 }) {
  ForEach(this.videoList, (item: VideoItem) => {
    ListItem() {
      Column() {
        // 显示视频首帧
        Image(item.pixelMap)
          .width(120)
          .height(80)
          .objectFit(ImageFit.Cover)
        
        Text(item.title)
          .fontSize(14)
      }
    }
  })
}

注意事项：

  1. 需要申请ohos.permission.READ_MEDIA权限
  2. 建议添加加载状态处理
  3. 大列表需使用LazyForEach优化性能

完整实现需结合具体业务逻辑处理视频加载状态和错误情况。

回到顶部