Design a Video Player: There Is No File | Frontend System Design 1
Design a video player, the way the interview actually goes. Open dev tools, press play on a normal video, and do nothing at all. Seventy four seconds later your browser has made eighty nine requests and pulled fifty five megabytes. There is no file. There never was.
You will walk out of this able to name all fifteen components behind a video tag, and say which one made the picture go blurry.
This is the frontend system design breakdown of a video player, built the way you would have to build it in a forty five minute interview: scope it, refuse some of it, draw the map, then open the guts and watch it break.
What is in here:
why the video tag is genuinely correct and still cannot explain the blur
MediaSource Extensions, SourceBuffer, and feeding a player by hand
the buffer controller, and why thirty seconds or sixty megabytes, whichever binds first
adaptive bitrate: two averages, a floor, and a seventy percent tax on optimism
the two state machines that disagree constantly, and the bugs that live in the gap
five ways it breaks in production, including the nudge
Numbers on screen, measured rather than quoted:
89 requests and 55 MB from 74 seconds of a normal video, read off the network panel
the buffer target is 30 s or 60 MB, whichever binds first
a live player deliberately sits three segments behind the newest one
the gap controller nudges the playhead 0.1 s, three times, then throws
Every diagram, number and decision from both videos is in the repo:
https://github.com/svssdeva/system-de...
CHAPTERS
0:00 Intro
0:04 Part 1 The machine you did not know was there
3:09 Part 2 The spec, and refusing some of it
7:06 Part 3 The map
11:45 Part 4 The guts
17:24 Part 5 Five ways it breaks
21:46 The whole machine
Next in this series: 65 million people press play at the same time.
beyond code karma
#frontendsystemdesign #systemdesign #webdevelopment #javascript #streaming