Node.js视频流在iOS设备无法播放的问题排查求助

核心问题分析 #

iOS的媒体播放机制和桌面/安卓存在差异：它会先发送不带Range头的初始请求（可能是HEAD或GET）来获取视频元数据，如果服务器直接返回400错误，iOS会终止后续请求，自然不会发起Partial Content（206）请求。另外，iOS对MP4文件格式有严格要求，必须是fast-start（moov原子位于文件头部）才能正常解析。

解决方案 #

1. 处理无Range头的初始请求 #

修改后端代码，当没有Range头时，返回完整视频文件或包含元数据的响应头，让iOS能识别视频信息：

exports.stream = (req, res) => {
  const range = req.headers.range;
  const id = req.query.id;

  if (id == 'null') {
    return res.status(400).send("Requires ID");
  }

  const videoPath = metadata[id].location;
  const videoSize = fs.statSync(videoPath).size;
  const CHUNK_SIZE = 500 * 1024; // 500KB

  // 处理无Range的初始请求
  if (!range) {
    res.writeHead(200, {
      "Content-Length": videoSize,
      "Content-Type": "video/mp4",
      "Accept-Ranges": "bytes",
    });
    return fs.createReadStream(videoPath).pipe(res);
  }

  // 原有分片逻辑
  const start = Number(range.replace(/\D/g, ""));
  const end = Math.min(start + CHUNK_SIZE, videoSize - 1);
  const contentLength = end - start + 1;

  const headers = {
    "Content-Range": `bytes ${start}-${end}/${videoSize}`,
    "Accept-Ranges": "bytes",
    "Content-Length": contentLength,
    "Content-Type": "video/mp4",
  };

  res.writeHead(206, headers);
  const videoStream = fs.createReadStream(videoPath, { start, end });
  videoStream.pipe(res);
};

2. 确保MP4文件为Fast-Start格式 #

iOS无法解析moov原子在文件尾部的MP4，需转换为快启动格式，可用ffmpeg处理：

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

3. 完善前端video标签配置 #

添加playsinline属性避免iOS强制全屏广播模式，同时保持原生控件隐藏：

function Test () {
    return (
        <>
            <video 
                width={'100%'} 
                controls={false}
                playsinline
                muted
                autoPlay
            >
                <source src={`${process.env.REACT_APP_BACKEND_URL}/video?id=8`} type="video/mp4" />
            </video>
        </>
    )
}

export default Test;

• playsinline：允许视频在页面内播放，而非强制进入全屏
• muted+autoPlay：符合iOS自动播放策略（静音视频可自动播放，有声播放需用户交互触发）

4. 额外优化：处理HEAD请求 #

iOS可能先发HEAD请求获取元数据，确保服务器能正确响应：

// 在路由中添加HEAD方法支持
app.head('/video', (req, res) => {
  const id = req.query.id;
  if (id == 'null') {
    return res.status(400).send("Requires ID");
  }
  const videoPath = metadata[id].location;
  const videoSize = fs.statSync(videoPath).size;
  res.writeHead(200, {
    "Content-Length": videoSize,
    "Content-Type": "video/mp4",
    "Accept-Ranges": "bytes",
  });
  res.end();
});

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