In this post I am going to show you how you can set-up Node.js to stream video files to an HTML5 video tag.
First, lets create simple HTML client.
The client offers the same video in 3 formats:
video/webm. Formatted video in
mp4 should work fine in Safari and Chrome,
ogg in Chrome and Firefox, while
webm in Chrome and Firefox. For these reasons, it is recommended that you offer the same video in
The server should stream the video according the “partial content” requests sent by the client (browser).
An example of a HTTP request provided by Chrome and a response is presented in the
following code snippet.
The HTTP request header
Range (line 10) indicates which part of the movie should be send. The first byte position and last byte position. If last byte position is not present then it is the last byte of the video file.
Following code snipped checks first and last byte position of the requested part (lines 1-4), calculates the chunk size (line 5), sets HTTP response headers
Content-Type (lines 9-12), and finally we “carve” the requested chunk data and we send the requested content (line 13).
Note that the response status code should be set to
206 Partial Content.
Streaming example using Node.js.
Your browser does not support the
A running example can be downloaded from here.