具有范围的 NodeJS 请求不适用于 HTML5 视频

Question

我已经使用 nodejs 实现了一个请求，以提供具有范围支持的视频，后端如下所示：

  import { createReadStream, statSync } from 'fs';
  

  const stats = statSync(path);

  const range = request.headers.range;
  const parts = range.replace(/bytes=/, '').split('-');
  
  const start = parseInt(parts[0], 10);
  let end = parts[1] ? parseInt(parts[1], 10) : start + 10 * 1024 ** 2;

  if (end > stats.size) {
    end = stats.size;
  }

  const stream = createReadStream(path, {
    emitClose: false,
    flags: 'r',
    start,
    end,
  });

  reply.status(206).headers({
    'content-type': 'video/webm',
    'accept-ranges': 'bytes',
    'content-length': end - start,
    'content-range': `bytes ${start}-${end}/${stats.size}`,
  }).send(stream);

这是一个fastify api，我的前端是这样的

<video :src="videoUrl" @timeupdate="playProgress" @error="videoError" @loadedmetadata="videoDataLoaded" @ended="videoEnd" ref="video" />

这是一个 vue 网络应用，现在的问题是，视频元素只发送两个请求，范围如下，然后抛出错误PIPELINE_ERROR_READ: FFmpegDemuxer: data source error，请求：

range: bytes=0-
range: bytes=147456000-

令人惊讶的是，每个请求我只返回 10mb 的数据，所以第二个请求已经过去了。这一直让我发疯，我不知道缺少什么，在这一点上任何帮助将不胜感激，我已经浪费了很多时间。

Answer 1

试试

'content-length': end - start + 1,

还有这个

let end = parts[1] ? parseInt(parts[1], 10) : stat.size - 1; 

而不是

let end = parts[1] ? parseInt(parts[1], 10) : start + 10 * 1024 ** 2;