Today, web world has evolved so much that most of the web has been dropping flash support and HTML5 video/HLS is becoming de-facto standard technology for streaming. As every emerging technology, it also has downsides.
Main issue is that HTML5 video, by itself has not much of protection against unwanted downloads, therefore copyrighted videos can be downloaded with some tools or even on browser itself most of the time. Flash solves this problem with DRM software integration. It can be costly, but it can solve this issue to some extend. However, flash is not supported on mobile phones and also browsers are dropping support for it one by one. This has forced most video providers or video hosting sites to make transition to HTML5 video/HLS. Here I will walk you through how to solve this issue.
There are few solutions to this problem. One I will be explaining here is HTTP Live Streaming (also known as HLS). It's a streaming protocol implemented by Apple. It was initially released in 2009. Since then, it has evolved and is now supported by many browsers and mobile. We will also be using video-js open source production ready library as our player and some of its plugins to make HLS work on most browsers.
Let's say we have a 5 minute .mp4 video. We need to convert this video to HLS format. HLS consists of .m3u8 file, which is a playlist and bunch of 10 second videos. So when we do conversion, that 5 minute video becomes 30 videos, each 10 seconds and they will all have extension of .ts. Ok, but how do I do the conversion? That's not difficult, there are tools that you can do it with manually and there are some online services as well. One I would recommend is AWS Elastic Transcoder. It's very cheap and fast. You can convert your video to couple of different quality videos, so your user can switch to lower or higher quality depending on their bandwidth either automatic or manually. You can get all info by googling and on the documentations of it. While you are converting, AWS Elastic Transcoder will let you also encrypt each video with AES encryption and give you a key with .key extension to decrypt that video as user plays it, with your player.
As mentioned before, currently HTML5 video/HLS is not also supported by all browsers natively, but support is growing as days pass. But don't worry, we have free video-js player and video.js HLS source handler plugin to the rescue. It will play your videos on demand. Just provide your .m3u8 file url and key. with type: 'application/x-mpegURL', withCredentials: true in your video tag. Check video.js github page for all details. Now you will have a video platform with on demand download and encrypted. It will be decrypted by video.js HLS source handler as user plays it. When user stops the video, it will stop streaming/downloading that 10 second piece of video and when you start, it will only stream/download as you need. Even if the user downloads your video pieces to their computer, it will be encrypted and won't work without your server and site. Other good thing about it is, on browsers that have zero HTML5 support, it will fall back to flash and play your video with flash. Isn't that nice?
Video platforms like Youtube and others, have their own solutions for these kinds of problems. Plus there are couple of commercial solutions. This is the open source solution that I like and not that difficult to accomplish.
I hope this helps someone out there. Please let me know if there is any issues with this article be it a mistake, typo or anything. Learning by my mistakes taught me a lot. :) Thanks for taking time to read it.