如何将Blob转换为可播放的视频URL并在网页中播放

核心错误原因 #

1. 视频数据编码错误：Node.js Buffer序列化为JSON后会变成{type: "Buffer", data: number[]}格式，客户端直接将数字数组传入Blob构造函数时，JavaScript会把每个数字解析为UTF-16字符编码而非原始字节，导致视频文件损坏。
2. MIME类型不准确：硬编码video/mp4作为Blob类型，若视频实际格式（如MKV、WebM）不匹配，浏览器会拒绝识别播放。
3. 数据传输方式低效且易出错：一次性返回所有视频的Buffer数据，不仅占用大量内存，JSON序列化/反序列化过程也可能导致数据丢失或损坏。

修复方案 #

方案1：修正客户端Blob转换逻辑（快速修复） #

将JSON中的数字数组转换为Uint8Array后再创建Blob，确保原始字节数据不被篡改：

// 替换原Blob创建代码
const byteArray = new Uint8Array(video.buffer.data);
const blob = new Blob([byteArray], { type: video.mimeType || "video/mp4" });
const url = URL.createObjectURL(blob);
return { name: video.name, url: url };

同时后端需要返回视频的实际MIME类型（从WebDAV的文件信息中获取）：

// 后端修改result.push部分
result.push({
  name: file.basename,
  buffer: fileBuffer,
  mimeType: file.mime // 从WebDAV返回的文件对象中提取MIME类型
});

方案2：改用流式视频接口（推荐，更稳定高效） #

放弃一次性返回所有视频数据，改为提供单独的视频流式接口，让浏览器直接从后端加载视频：

后端新增接口

app.get("/someroute/video/:filename", async (req, res) => {
  try {
    // 建议通过Session或加密查询参数传递WebDAV配置（避免明文传递密码）
    const { username, password, targetUrl, data } = req.session.webdavConfig;
    const dataFull = `somedata_${data}`;
    const client = createClient(targetUrl, { username, password });
    
    // 获取文件信息与读取流
    const fileInfo = await client.stat(`/${dataFull}/${req.params.filename}`);
    const fileStream = await client.createReadStream(`/${dataFull}/${req.params.filename}`);
    
    // 设置响应头，返回正确的MIME类型
    res.setHeader("Content-Type", fileInfo.mime || "video/mp4");
    // 流式传输视频数据到客户端
    fileStream.pipe(res);
  } catch (error) {
    console.error(error);
    res.status(500).send("视频加载失败");
  }
});

客户端修改

直接使用接口URL作为video标签的src，无需处理Blob：

// 替换原Blob转换逻辑
return {
  name: video.name,
  url: `/someroute/video/${encodeURIComponent(video.name)}`
};

方案3：后端返回Base64编码（折中方案） #

将Buffer转换为Base64字符串后返回，客户端解码后再创建Blob：

后端修改

result.push({
  name: file.basename,
  buffer: fileBuffer.toString("base64"),
  mimeType: file.mime
});

客户端解码

const byteCharacters = atob(video.buffer);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
  byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: video.mimeType || "video/mp4" });
const url = URL.createObjectURL(blob);

验证步骤 #

1. 修复后，在浏览器开发者工具中查看Blob的大小是否与原视频文件一致。
2. 检查video标签对应的Content-Type响应头是否与视频实际格式匹配。
3. 尝试直接访问流式接口URL，确认视频能正常下载和播放。

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