Design a Video Player (YouTube / Netflix)
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Step 1 — Constraints
500M daily users. Adaptive bitrate streaming. HLS or DASH? Offline viewing? Core Web Vitals matter.
Step 2 — Decision: HLS vs DASH
| Tech | CDN Support | Complexity | Flexibility |
|---|---|---|---|
| HLS (HTTP Live Streaming) | Perfect | Low | Medium |
| DASH (Dynamic Adaptive Streaming) | Good | High | High |
Winner: HLS. CDN support and browser compatibility are key at 500M users.
Step 3 — Adaptive bitrate strategy
Measure bandwidth every 10 seconds. If bandwidth drops, switch to lower bitrate mid-stream without rebuffering. If bandwidth improves, switch up.
Step 4 — Offline support
Service Worker caches the manifest and first segment. User can start playback offline and watch the first 10 seconds. When connection returns, continue from cache.
Step 5 — Core Web Vitals gotchas
CLS (Cumulative Layout Shift) on play button: Reserve space for it.
Buffer stalls on 3G: Preload next segment aggressively.
Battery drain on mobile: Reduce bitrate on battery saver mode.
Step 6 — Anti-patterns
Junior: Fetch all bitrate variants upfront. Result: Wastes bandwidth.
Mid: Static bitrate, no adaptation. Result: Buffering on slow networks.
Senior: Optimize CDN edge caching before measuring user latency. Result: Premature.
Step 7 — 30-minute interview
0–5 min: "500M users? Streaming protocol? Offline?"
5–15 min: Sketch HLS manifest → segments → adaptive bitrate.
15–30 min: "How do you prevent buffering? Handle offline?"
Step 8 — Interview simulation
Interviewer: "Design video player for 500M users"
You: "HLS for CDN distribution and browser support. Measure bandwidth every 10 seconds, switch bitrate without rebuffering. Service Worker caches manifest and first segment for offline playback."
Interviewer: "What if the user is on battery saver mode?"
You: "Detect battery saver API, cap bitrate at a lower resolution. Reduces playback quality but extends battery life."
Interviewer: "How do you measure if this is working?"
You: "Monitor p99 buffer time, p50 bitrate chosen, rebuffer rate per session, playback error rate."
Step 9 — Tiered answer
| Level | Time | What You Say |
|---|---|---|
| Junior (15 min) | HTML5 video, show play button | |
| Mid (25 min) | HLS, adaptive bitrate switching | |
| Senior (30 min) | Adaptive + offline + battery saver + observability |
Step 10 — Final checklist
| Issue | Solution |
|---|---|
| Streaming | HLS for CDN, not DASH |
| Adaptive bitrate | Measure every 10s, switch without rebuffer |
| Offline | Service Worker cache manifest + first segment |
| CLS | Reserve space for play button |
| Battery | Cap bitrate on battery saver mode |
| Observability | Monitor p99 buffer, rebuffer rate |
| DRM | Use Media Source Extensions with encrypted media |
"HLS for wide CDN support. Measure bandwidth every 10 seconds, switch bitrate without rebuffering. Service Worker caches manifest and first segment for offline playback. Reserve dimensions for play button (no CLS). Detect battery saver mode and cap bitrate. Monitor p99 buffer time, rebuffer rate, and bitrate chosen."