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

需求分析

客户端中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博客