为HLS流添加FFmpeg处理层引发视频播放异常问题

核心问题根源 #

1. 响应头配置错误：
   • TS分片的Content-Type被错误设置为application/vnd.apple.mpegurl（这是m3u8清单的专属MIME类型），导致播放器无法正确识别TS流格式，触发异常加载逻辑。
   • 缺失Content-Length响应头：播放器无法预估分片大小，无法按HLS标准逻辑按需加载，转而触发全量预加载所有分片。
2. FFmpeg时间戳处理异常：
   管道输入TS流时，即便使用-c copy参数，FFmpeg仍可能自动重新生成时间戳，导致分片的PTS/DTS时序混乱，播放器无法正确判断播放进度，进而出现重复请求、乱序请求的情况。

具体修复步骤 #

1. 修正响应头配置

• 将TS文件的Content-Type改为标准的video/MP2T
• 预获取文件大小并设置Content-Length头，让播放器能预估加载时长
• 调整Cache-Control为合理值，避免播放器无意义的重复请求

2. 调整FFmpeg参数

添加-copyts参数强制保留原始时间戳，同时将-avoid_negative_ts改为更兼容的make_zero，确保时序信息和原始分片完全一致。

修改后的完整代码 #

const fs = require(`fs`);
const path = require(`path`);
const { spawn } = require(`child_process`);
const pathToFfmpeg = require(`ffmpeg-static`);

export default function handler(req, res) {
  const { filename } = req.query;
  console.log(filename);
  const filePath = path.join(process.cwd(), 'public', 'stream', `${filename}`);

  // 前置检查：避免文件不存在导致的报错
  if (!fs.existsSync(filePath)) {
    res.status(404).end('File not found');
    return;
  }

  const fileStats = fs.statSync(filePath);

  if (filename.endsWith(`.ts`)) {
    const ffmpegProcess = spawn(pathToFfmpeg, [
      '-f', `mpegts`,
      '-i', 'pipe:0',
      '-c', 'copy',
      '-copyts', // 强制保留原始时间戳，禁止FFmpeg重新生成
      '-avoid_negative_ts', 'make_zero', // 统一时间戳起始值，提升兼容性
      '-map_metadata', `0`,
      '-f', 'mpegts',
      'pipe:1'
    ], {
      stdio: ['pipe', 'pipe', 'inherit'] // 直接将FFmpeg的错误日志输出到终端，方便调试
    });

    res.status(200);
    res.setHeader('Content-Type', 'video/MP2T'); // 修正TS文件的MIME类型
    res.setHeader('Content-Length', fileStats.size); // 告知播放器分片大小
    res.setHeader('Cache-Control', 'public, max-age=3600'); // 合理缓存，减少重复请求
    res.setHeader('Access-Control-Allow-Origin', '*');

    const inputStream = fs.createReadStream(filePath);
    inputStream.pipe(ffmpegProcess.stdin);
    ffmpegProcess.stdout.pipe(res);

    ffmpegProcess.on('exit', (code) => {
      if (code !== 0) {
        console.error(`ffmpeg进程退出，错误码：${code}`);
      }
    });

    // 处理流异常，避免服务器崩溃
    inputStream.on('error', (err) => {
      console.error('文件读取流错误：', err);
      res.status(500).end('服务器内部错误');
    });

    ffmpegProcess.stdin.on('error', (err) => {
      console.error('FFmpeg输入流错误：', err);
    });

  } else {
    // 处理m3u8清单文件
    res.status(200);
    res.setHeader('Content-Type', 'application/vnd.apple.mpegurl');
    res.setHeader('Content-Length', fileStats.size);
    res.setHeader('Cache-Control', 'public, max-age=60'); // 清单缓存时间较短，适配可能的更新
    res.setHeader('Access-Control-Allow-Origin', '*');
    const inputStream = fs.createReadStream(filePath);
    inputStream.pipe(res);
  }
}

额外调试提示 #

• 开启FFmpeg的stderr输出（代码中stdio的inherit配置），可以直接在终端看到流处理过程中的警告或错误，快速定位时序、格式类问题。
• 如果后续添加动态滤镜，可在FFmpeg参数中移除-c copy，替换为对应的编码滤镜参数，此时需注意编码性能，必要时可启用硬件加速（如-hwaccel auto）。

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