title: NodeJS request with range does not work with HTML5 video
body: <p>I have implemented a request using nodejs to serve video with range support, backend looks like this:</p>
  <pre><code>  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 &gt; 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);
  </code></pre>
  <p>This is a <a href="https://www.fastify.io/docs/latest/" rel="nofollow noreferrer">fastify</a> api, my frontend looks like this</p>
  <pre><code>&lt;video :src=&quot;videoUrl&quot; @timeupdate=&quot;playProgress&quot; @error=&quot;videoError&quot; @loadedmetadata=&quot;videoDataLoaded&quot; @ended=&quot;videoEnd&quot; ref=&quot;video&quot; /&gt;
  </code></pre>
  <p>And this is a vue web app, now the problem is, video element sends only two requests with ranges as below then throws error <code>PIPELINE_ERROR_READ: FFmpegDemuxer: data source error</code>, the requests:</p>
  <pre><code>range: bytes=0-
  range: bytes=147456000-
  </code></pre>
  <p>The surprising thing is I only return 10mb of data per request so the second request is way off. This has been driving me crazy and I don't know what am missing, any help would be highly appreciated at this point, I have already wasted alot of time on this.</p>