Node.js视频流无法播放问题求助（基于MERN栈）

问题排查 #

你的代码存在三个核心问题导致视频无法流式播放：

• 错误的HTTP状态码：处理范围请求（range）时返回了204 No Content，但分片传输必须返回206 Partial Content，204状态码会让浏览器判定无内容可加载。
• 路径解析问题：使用相对路径"assest/sample.mp4"可能在不同运行环境下无法正确定位文件，必须用绝对路径保证准确性。
• 缺失错误处理：未处理文件不存在、读取失败等异常，一旦出现错误会导致请求挂起或服务崩溃。

修正后的Node.js代码 #

const path = require('path');
const fs = require('fs');
const express = require('express');
const app = express();

app.get("/video", (req, res) => {
  // 用绝对路径定位视频文件，避免环境差异导致的路径错误
  const filePath = path.join(__dirname, "assest", "sample.mp4");

  try {
    const stat = fs.statSync(filePath);
    const size = stat.size;
    const range = req.headers.range;

    if (range) {
      const parts = range.replace(/bytes=/, "").split("-");
      const start = parseInt(parts[0], 10);
      // 确保end不超出文件实际大小
      const end = parts[1] ? Math.min(parseInt(parts[1], 10), size - 1) : size - 1;
      const chunkSize = end - start + 1;

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

      // 修正为分片传输对应的206状态码
      res.writeHead(206, headers);
      const fileStream = fs.createReadStream(filePath, { start, end });
      fileStream.pipe(res);

      // 捕获流读取错误
      fileStream.on('error', () => {
        res.status(500).send('文件读取失败');
      });
    } else {
      const headers = {
        "Content-Length": size,
        "Content-Type": "video/mp4",
      };
      res.writeHead(200, headers);
      const fileStream = fs.createReadStream(filePath);
      fileStream.pipe(res);

      fileStream.on('error', () => {
        res.status(500).send('文件读取失败');
      });
    }
  } catch (err) {
    // 处理文件不存在或其他服务器异常
    if (err.code === 'ENOENT') {
      res.status(404).send('视频文件不存在');
    } else {
      res.status(500).send('服务器内部错误');
    }
  }
});

const PORT = 8080;
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

额外注意事项 #

• 若前端与后端运行在不同端口，需在Express中配置CORS，可使用cors中间件：

  const cors = require('cors');
  app.use(cors());
  

• 前端代码无需修改，确保src地址与后端接口一致即可。

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