S3 WebM视频可在线查看但下载后损坏问题求助

错误根源 #

你当前代码的问题在于：直接把S3视频的URL字符串作为Blob的内容，生成的文件其实是纯文本格式的URL内容，完全不是视频的二进制数据，所以打开时会提示文件损坏。

修复后的代码 #

修改downloadVideo函数，通过fetch获取视频二进制数据后再创建Blob：

async function downloadVideo() {
  try {
    // 发起请求获取视频的二进制数据
    const response = await fetch(celebmessage);
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    // 将响应转换为Blob对象
    const blob = await response.blob();

    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", `${celebName}-Video-${requestid}.webm`);
    document.body.appendChild(link);
    link.click();

    // 清理临时URL，释放浏览器内存
    window.URL.revokeObjectURL(url);
    document.body.removeChild(link);
  } catch (error) {
    console.error("视频下载失败：", error);
  }
}

核心要点 #

• 必须通过网络请求获取视频的二进制数据流，不能直接用URL字符串生成Blob
• response.blob()会自动匹配响应头中的Content-Type，无需手动指定Blob的type参数
• 下载完成后要及时清理createObjectURL创建的临时URL，避免内存泄漏

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