如何使用JS从视频中提取帧生成播放前预览截图

你之前查到的播放中通过Canvas抽帧的方案稍作改造就可以实现播放前提取，不需要让视频进入实际播放状态：

核心逻辑 #

• 创建一个不挂载到DOM的离线video元素，设置静音、preload="auto"，不需要调用play()方法
• 等视频元数据加载完成后，计算需要抽帧的时间点，手动设置currentTime跳转到对应位置
• 监听seeked事件确认跳转完成后，直接用Canvas绘制当前帧，转换为预览图存储即可

可直接复用的代码示例 #

/**
 * 预提取视频关键帧
 * @param {string} videoUrl 视频地址/本地视频ObjectURL
 * @param {number} frameCount 需要提取的帧数量，默认3张
 * @returns {Promise<string[]>} 预览图base64数组
 */
function extractVideoPreviewFrames(videoUrl, frameCount = 3) {
  return new Promise((resolve, reject) => {
    const frames = []
    // 创建离线video元素
    const offlineVideo = document.createElement('video')
    offlineVideo.muted = true
    offlineVideo.preload = 'auto'
    // 跨域视频需要加该配置，同域视频可删除
    offlineVideo.crossOrigin = 'anonymous'
    offlineVideo.src = videoUrl

    // 元数据加载完成后开始抽帧
    offlineVideo.addEventListener('loadedmetadata', () => {
      const totalDuration = offlineVideo.duration
      // 均匀分配抽帧时间点，跳过开头10%和结尾10%的内容避免黑屏/片尾黑帧
      const timePoints = Array.from({ length: frameCount }, (_, idx) => 
        totalDuration * (0.1 + (0.8 / frameCount) * (idx + 1))
      )
      let processIdx = 0

      // 逐帧提取
      const processNextFrame = () => {
        if (processIdx >= frameCount) {
          // 全部提取完成，销毁资源
          offlineVideo.remove()
          resolve(frames)
          return
        }
        // 跳转到目标时间点
        offlineVideo.currentTime = timePoints[processIdx]
      }

      // 跳转完成后绘制帧
      offlineVideo.addEventListener('seeked', () => {
        const canvas = document.createElement('canvas')
        canvas.width = offlineVideo.videoWidth
        canvas.height = offlineVideo.videoHeight
        const ctx = canvas.getContext('2d')
        ctx.drawImage(offlineVideo, 0, 0, canvas.width, canvas.height)
        // 导出为webp格式兼顾体积和清晰度，也可替换为'image/png'
        frames.push(canvas.toDataURL('image/webp', 0.8))
        processIdx++
        processNextFrame()
      })

      processNextFrame()
    })

    // 加载失败处理
    offlineVideo.addEventListener('error', (err) => {
      offlineVideo.remove()
      reject(err)
    })
  })
}

// 调用示例
extractVideoPreviewFrames('你的视频资源地址', 3)
  .then(previewFrames => {
    // 拿到3张预览图base64，直接渲染到页面即可
    console.log(previewFrames)
  })
  .catch(err => console.error('抽帧失败：', err))

注意事项 #

• 如果是本地视频文件上传场景，将videoUrl替换为URL.createObjectURL(本地File对象)即可，抽帧完成后记得调用URL.revokeObjectURL释放内存
• 部分特殊编码的视频可能出现seek不准的问题，可在绘制前判断offlineVideo.readyState >= 2后再执行绘制逻辑，避免生成空白帧
• 抽帧全程不会触发视频播放，用户无感知，普通1080p视频抽3帧耗时通常在百毫秒级，不会影响页面体验

内容的提问来源于stack exchange，提问作者Tommaso