【webview Android】视频获取首帧为封面

发布于:2025-02-15 ⋅ 阅读:(43) ⋅ 点赞:(0)

需求分析

客户端中h5上传视频,视频封面默认首帧。

遇到问题:原生的video现象如下

  • IOS会在加载好后显示首帧(没加载好显示黑屏,符合预期)
  • Android加载好后默认封面为一个奇怪的占位图(不符合预期)

在这里插入图片描述
需求:显示首帧。

获得首帧

前端截取视频指定帧为封面的3种方法 - 知乎

已知视频url,获得首帧图:

  /**
   * 获取视频的封面图信息
   * @param url 视频地址
   * @param second 秒数
   */
  async function getVideoBase64(url: string, second: number = 0) {
    const video = document.createElement('video');
    video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
    video.setAttribute('src', url);
    video.preload = 'metadata'; // 确保浏览器会预加载视频元数据
    video.muted = true;

    // 等待视频元数据加载完成
    await new Promise((resolve, reject) => {
      video.onloadedmetadata = resolve;
      video.onerror = reject;
    });

    if (second > 0) {
      video.currentTime = second;
      // 确保seeked事件触发后再进行截图
      await new Promise((resolve) => {
        video.onseeked = resolve;
      });
    }

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    if (!context) throw new Error('Failed to get canvas context');

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    const base64 = canvas.toDataURL('image/jpeg');
    return base64;
  }

经过尝试,currentTime 为0时获得的图为黑屏,这里设置为0.2

拿到首帧图:

在这里插入图片描述
然后就是常规逻辑:

把图存起来,盖在video上,记录video是否被点击。
点击过的视频不会显示首帧封面了,因此点击过就隐藏图片等。

在拿到首帧图前,可以让上传控件状态与上传时一致(即一直loading)。
让用户以为还在上传视频,实际上在解析封面。

其他方法

如果是阿里云OSS云服务器,可以视频地址后加:

?x-oss-process=video/snapshot,t_1000,m_fast

上传到阿里云oss的视频如何获取第一帧作为视频封面_阿里云oss获取第一帧-CSDN博客

还有一些其他复杂方法,经实践,没有上述方法获取首帧封面快:

【前端】上传视频,截取第一帧图片_前端获取视频第一帧图片-CSDN博客