具有范围的 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 网络应用程序，现在的问题是，video 元素仅发送两个范围如下的请求然后抛出错误 PIPELINE_ERROR_READ: FFmpegDemuxer: data source error，请求：

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

令人惊讶的是我每个请求只有 return 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;

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

NodeJS request with range does not work with HTML5 video

video-streaming

node.js

html5-video

typescript

vue.js