ExpressJS从GCS流式传输视频跨浏览器兼容问题求助

你的问题根源在于没有处理浏览器的范围请求（Range Requests）。Safari对未处理范围请求的视频兼容性更好，但Firefox、Chrome等现代浏览器会主动发送Range请求来获取文件片段（比如先拿开头的元数据），你的代码只返回了完整文件，导致这些浏览器无法正确解析MP4的结构。MP3能正常播放是因为它的流媒体格式更简单，不需要依赖范围请求就能逐步解析。

以下是修复后的完整代码，支持范围请求，能在所有主流浏览器正常工作：

app.get('/stream', async (req, res) => {
  const file = storage.bucket("REMOVED").file("syndication/2023/09/1696116750736video_Kelly_finished.mp4");
  const [metadata] = await file.getMetadata();
  const fileSize = parseInt(metadata.size, 10);

  // 处理Range请求头
  const range = req.headers.range;
  if (range) {
    // 解析Range头，格式如 "bytes=0-" 或 "bytes=1024-2048"
    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    
    // 确保范围在合法区间内
    const chunkSize = end - start + 1;
    if (start >= fileSize || end >= fileSize) {
      // 返回416状态码：请求范围不符合要求
      res.status(416).set("Content-Range", `bytes */${fileSize}`);
      return res.end();
    }

    // 设置206 Partial Content响应头
    res.writeHead(206, {
      "Content-Range": `bytes ${start}-${end}/${fileSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": chunkSize,
      "Content-Type": "video/mp4",
    });

    // 创建带范围的读取流
    const stream = file.createReadStream({ start, end });
    stream.pipe(res);
  } else {
    // 没有Range请求，返回完整文件
    res.writeHead(200, {
      "Content-Length": fileSize,
      "Accept-Ranges": "bytes",
      "Content-Type": "video/mp4",
    });
    file.createReadStream().pipe(res);
  }
});

关键修复点说明： #

• 处理Range请求：解析浏览器发送的Range头，返回对应的文件片段，状态码用206（Partial Content）
• 合法范围校验：避免请求超出文件大小的范围，返回416状态码告知浏览器
• 正确设置响应头：针对范围请求返回Content-Range头，让浏览器知道当前返回的是文件的哪一部分
• 流式传输片段：创建读取流时指定start和end参数，只传输需要的部分

如果测试后仍有问题，建议检查你的MP4文件是否把moov原子（存储元数据的部分）放在了文件开头。如果moov在文件结尾，即使处理了范围请求，浏览器第一次请求片段时可能还是无法获取到元数据，这种情况可以用ffmpeg重新封装MP4：

ffmpeg -i input.mp4 -movflags faststart output.mp4

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