This is a very quick and easy article explaining how to stream movies to an HTML 5 video tag using NodeJS. The whole project is very small and compact. Focus your attention on the movie.js file in the routes folder.
At first, you might think to yourself, Why not just link the movie file straight to the video tag? If we do that, the whole movie file might be loaded into memory on the server side. Now you may be thinking, But this file is just 30MB in size, so what is the problem?
Well, imagine that you have 10GB of RAM on the server, but you have a 20GB video file on the drive. What now? How would you load such a massive file that exceeds the RAM capacity? Streams are the answer.
With streams, you have your file on disk, sitting there and having a good time. By using the .createReadStream() method, and telling it which part of the file you're interested in, you just get a chunk of the whole thing. For example, just 1MB. Then you take that 1MB, send it to whoever requested it, and you're done.
As you can see from the code, the front end part of the project is super basic. The only thing that matters is the HTML 5 video tag. And it is basic; we only care about the URL to the resource of the video. Which, in this case, is a URL to a NodeJS file that:
- Checks the request to see how much data the video tag requested
- Opens the move file as a stream
- Reads the requested chunks
- Sends back the data with the response
And this is it. The video tag will keep making requests to the provided URL until it gets the whole movie. The only job of our code is to keep reading parts of the file that the tag asks for.
This article is not a full implementation of the HTTP/1.1 Range Requests standard, meaning that there are edge cases that are not taken into consideration. This document is intended to be a good starting point to help you better understand the basics of this technology.
Once you deploy the server on Heroku, you will see the video player in the middle of the page, and you should see the player buffering up with the trailer of Toy Story, which is included in this repo. Replace the movie with another one, but keep in mind that the format of the video must be compatible with what the video tag in your browser is capable of.
If you've enjoyed this article/project, please consider giving it a 🌟. Also check out my GitHub account, where I have other articles and apps that you might find interesting.