Read on Twitter
I didn’t know anything about creating a VOD (video on demand) platform until this week. If you’re a video streaming rookie like me, what I learned this week will be interesting to you too!
Thread
Thread
1/ Video On Demand, or VOD, isn’t quite as simple as it seems. It’s not really just uploading a .mp4, etc in a S3 bucket or even locally in your repo.
What would happen if you did that? The browser wouldn’t play the video until the ENTIRE THING loaded. Which could be 50mb+!
What would happen if you did that? The browser wouldn’t play the video until the ENTIRE THING loaded. Which could be 50mb+!
2/ The solution? “Video playlist” files, most commonly found with .m3u8 extensions. People refer to these files as “video playlists” because it’s a plain text file that lists the order and file names of bite-sized clips that make up a full-length video.
3/ The process usually happens like this:
1. Upload a video somewhere.
2. Use a media converter to change the original video (like .mp4) into the new video playlist format (.m3u8 text file + a bunch of little video chunks that have a .ts extension, etc)
3. Link to .m3u8 to play
1. Upload a video somewhere.
2. Use a media converter to change the original video (like .mp4) into the new video playlist format (.m3u8 text file + a bunch of little video chunks that have a .ts extension, etc)
3. Link to .m3u8 to play
4/ You can point to a .m3u8 file with a basic HTML5 video tag in the Safari and Microsoft Edge browsers, but it isn’t widely supported as HLS was an Apple-specific protocol. However, awesome libs like video.js add support for any browser. I used expo-av for React Native. Worked!
5/ Remember that whole thing about uploading video and converting it to bite-sized pieces? I tried 2 ways:
1. S3 bucket -> Elemental MediaConvert -> CloudFront
This way worked but had a TON of optimization issues. I spent maybe 4 hours and never quite got it working how I hoped
1. S3 bucket -> Elemental MediaConvert -> CloudFront
This way worked but had a TON of optimization issues. I spent maybe 4 hours and never quite got it working how I hoped
2. S3 bucket -> @MuxHQ
This was a cake walk. It’s marginally more expensive than full AWS I think, but it felt super worth it. Everything can be done either through their dashboard or programmatically (API). It all felt perfect in about 20 minutes of playing around.
This was a cake walk. It’s marginally more expensive than full AWS I think, but it felt super worth it. Everything can be done either through their dashboard or programmatically (API). It all felt perfect in about 20 minutes of playing around.
6/ If I were doing it again, I’d use @MuxHQ for any project I build right out of the gate. At the end of the day, if you store the original files in AWS (or anywhere really), then convert and serve the .m3u8 with Mux, you can have an MVP up in minutes, not days. Clear winner imo
7/ Did I get anything wrong or miss anything? I’m still new to VOD in general. It was a blast learning some new tools, and I’d be happy to chat if you’re trying to implement something like this yourself!
