Streaming a video file to an HTML5 video player with Node.js so that the video controls continue to work?

javascript

streaming

video-player

node-js

byAlex Kataev·Mar 7, 2025

To stream a video to an HTML5 player via Node.js, we need to handle HTTP range requests. This involves using the fs module to read the video and set appropriate response headers for partial content delivery. Let's breakdown a prototypical code snippet:

const fs = require('fs');
const http = require('http');

http.createServer((req, res) => {
  const path = 'video.mp4'; // Just like 'The Mandalorian', this is 'The Path'
  const { size } = fs.statSync(path);
  const range = req.headers.range || 'bytes=0-';

  const [start, end] = range.replace(/bytes=/, "").split("-").map(Number);
  const chunkEnd = end ? end : size - 1;
  const chunkSize = chunkEnd - start + 1;
  const head = {
    'Content-Range': `bytes ${start}-${chunkEnd}/${size}`,
    'Accept-Ranges': 'bytes',
    'Content-Length': chunkSize,
    'Content-Type': 'video/mp4', // Popcorn not included
  };
  res.writeHead(range ? 206 : 200, head);
  fs.createReadStream(path, { start, end: chunkEnd }).pipe(res);
}).listen(8000);

Make sure to replace 'video.mp4' with your video file's exact path. This code offers scrubbing and fast-forward capabilities while ensuring player control usability.

Range requests and HTML5 video controls

Fundamentally, we need to understand that streaming a video involves delivering it piece-by-piece. This method is advantageous as it doesn't require the browser to download the entire video file, offering users control options like fast-forward, pause, or rewind.

The magic is in handling the Range HTTP header sent by the user's browser. This header dictates the specific section of the video file that the browser needs, and Node.js responds by sending just that piece with a 206 Partial Content status.

Negative use cases and error handling

Life isn't all sunshine and rainbows, and neither is streaming. Various aspects could potentially bust our video streaming street cred:

File not found: Always check the availability of the requested file on your server. If the file doesn't exist, be sure to return a 404 status code.
Improper ranges: If the browser sends a bogus range request, respond with a 416 Range Not Satisfiable status code.
Error during streaming: File streaming is a delicate operation. Therefore, we need to ensure the server doesn't crash when an error occurs during streaming.

Security measures and optimization

While making sure the video streams properly is crucial, security and performance optimization are equally as important:

Security: Restrict your video content access to authorized users only and ensure sensitive files or directories are off-limits.
Performance optimization: Limit the maximum chunk size to prevent overworking your server and maintain a smooth streaming experience.
Efficiency: Remember to use autoClose: true to automatically close the stream once the file is fully transferred.

Better streaming practices

When it comes to providing high-quality streaming, here are some methods to kick it up a notch:

Prioritize adaptive streaming

For users with fluctuating internet speeds, consider implementing adaptive streaming. This process effectively adjusts the video quality based on the internet connection quality, offering a smoother viewing experience.