HarmonyOS 鸿蒙Next中长视频滑动进度条时，如何获取当前视频帧

HarmonyOS 鸿蒙Next中长视频滑动进度条时，如何获取当前视频帧 求问，视频流是m3u8格式的，网络视频，在滑动进度条时如何获取当前视频帧的缩略图

2 回复

在鸿蒙Next中，获取长视频滑动进度条的当前帧，可通过VideoController的currentTime属性结合getFrameAtTime方法实现。首先获取控制器实例：

let controller: video.VideoController = this.$('videoId').getController()

然后监听进度条滑动事件，在回调中获取时间点并提取帧：

controller.seekTo(timeInMs).then(() => {
  let currentTime = controller.currentTime
  // 获取指定时间的帧图像
  video.getFrameAtTime(currentTime).then((frame) => {
    //处理帧数据
  })
})

关键点：使用seekTo同步时间点后，通过getFrameAtTime异步获取帧数据。需注意时间单位为毫秒。

更多关于HarmonyOS 鸿蒙Next中长视频滑动进度条时，如何获取当前视频帧的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中获取HLS(m3u8)视频滑动时的帧缩略图，可以通过以下方式实现：

  1. 使用VideoPlayer组件的seekTo方法配合帧抓取功能：
import media from '@ohos.multimedia.media';

// 创建VideoPlayer实例
let videoPlayer = await media.createVideoPlayer();

// 设置视频源
videoPlayer.url = 'your_m3u8_url';

// 滑动进度条时调用
async function onSeek(position: number) {
  // 跳转到指定位置
  await videoPlayer.seek(position);
  
  // 获取当前帧图像
  let surfaceId = videoPlayer.getSurfaceId();
  let image = await media.createImageReceiver(surfaceId);
  let pixelMap = await image.readNextImage();
  
  // 将pixelMap转换为缩略图
  // ...
}
  1. 对于HLS流媒体，建议预加载关键帧缩略图：
  • 解析m3u8文件获取关键帧时间戳
  • 使用VideoPlayer的thumbnail功能预生成缩略图
  • 建立时间戳与缩略图的映射关系
  1. 性能优化建议：
  • 限制缩略图分辨率(建议320×180)
  • 使用内存缓存已生成的缩略图
  • 采用异步加载机制避免UI卡顿

注意：实际实现需要考虑视频编码格式和硬件解码支持情况。

回到顶部