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

The Accept Ranges header (the bit in writeHead()) is required for the HTML5 video controls to work.

I think instead of just blindly send the full file, you should first check the Accept Ranges header in the REQUEST, then read in and send just that bit. fs.createReadStream support start, and end option for that.

So I tried an example and it works. The code is not pretty but it is easy to understand. First we process the range header to get the start/end position. Then we use fs.stat to get the size of the file without reading the whole file into memory. Finally, use fs.createReadStream to send the requested part to the client.

var fs = require("fs"),    http = require("http"),    url = require("url"),    path = require("path");http.createServer(function (req, res) {  if (req.url != "/movie.mp4") {    res.writeHead(200, { "Content-Type": "text/html" });    res.end('<video src="http://localhost:8888/movie.mp4" controls></video>');  } else {    var file = path.resolve(__dirname,"movie.mp4");    fs.stat(file, function(err, stats) {      if (err) {        if (err.code === 'ENOENT') {          // 404 Error if file not found          return res.sendStatus(404);        }      res.end(err);      }      var range = req.headers.range;      if (!range) {       // 416 Wrong range       return res.sendStatus(416);      }      var positions = range.replace(/bytes=/, "").split("-");      var start = parseInt(positions[0], 10);      var total = stats.size;      var end = positions[1] ? parseInt(positions[1], 10) : total - 1;      var chunksize = (end - start) + 1;      res.writeHead(206, {        "Content-Range": "bytes " + start + "-" + end + "/" + total,        "Accept-Ranges": "bytes",        "Content-Length": chunksize,        "Content-Type": "video/mp4"      });      var stream = fs.createReadStream(file, { start: start, end: end })        .on("open", function() {          stream.pipe(res);        }).on("error", function(err) {          res.end(err);        });    });  }}).listen(8888);

The accepted answer to this question is awesome and should remain the accepted answer. However I ran into an issue with the code where the read stream was not always being ended/closed. Part of the solution was to send autoClose: true along with start:start, end:end in the second createReadStream arg.

The other part of the solution was to limit the max chunksize being sent in the response. The other answer set end like so:

var end = positions[1] ? parseInt(positions[1], 10) : total - 1;

...which has the effect of sending the rest of the file from the requested start position through its last byte, no matter how many bytes that may be. However the client browser has the option to only read a portion of that stream, and will, if it doesn't need all of the bytes yet. This will cause the stream read to get blocked until the browser decides it's time to get more data (for example a user action like seek/scrub, or just by playing the stream).

I needed this stream to be closed because I was displaying the <video> element on a page that allowed the user to delete the video file. However the file was not being removed from the filesystem until the client (or server) closed the connection, because that is the only way the stream was getting ended/closed.

My solution was just to set a maxChunk configuration variable, set it to 1MB, and never pipe a read a stream of more than 1MB at a time to the response.

// same code as accepted answervar end = positions[1] ? parseInt(positions[1], 10) : total - 1;var chunksize = (end - start) + 1;// poor hack to send smaller chunks to the browservar maxChunk = 1024 * 1024; // 1MB at a timeif (chunksize > maxChunk) {  end = start + maxChunk - 1;  chunksize = (end - start) + 1;}

This has the effect of making sure that the read stream is ended/closed after each request, and not kept alive by the browser.

I also wrote a separate StackOverflow question and answer covering this issue.

Firstly create app.js file in the directory you want to publish.

var http = require('http');var fs = require('fs');var mime = require('mime');http.createServer(function(req,res){    if (req.url != '/app.js') {    var url = __dirname + req.url;        fs.stat(url,function(err,stat){            if (err) {            res.writeHead(404,{'Content-Type':'text/html'});            res.end('Your requested URI('+req.url+') wasn\'t found on our server');            } else {            var type = mime.getType(url);            var fileSize = stat.size;            var range = req.headers.range;                if (range) {                    var parts = range.replace(/bytes=/, "").split("-");                var start = parseInt(parts[0], 10);                    var end = parts[1] ? parseInt(parts[1], 10) : fileSize-1;                    var chunksize = (end-start)+1;                    var file = fs.createReadStream(url, {start, end});                    var head = {                'Content-Range': `bytes ${start}-${end}/${fileSize}`,                'Accept-Ranges': 'bytes',                'Content-Length': chunksize,                'Content-Type': type                }                    res.writeHead(206, head);                    file.pipe(res);                    } else {                        var head = {                'Content-Length': fileSize,                'Content-Type': type                    }                res.writeHead(200, head);                fs.createReadStream(url).pipe(res);                    }            }        });    } else {    res.writeHead(403,{'Content-Type':'text/html'});    res.end('Sorry, access to that file is Forbidden');    }}).listen(8080);

Simply run node app.js and your server shall be running on port 8080. Besides video it can stream all kinds of files.