Video Streaming | FineFrontend

System design interview question

Video Streaming

Design an on-demand video frontend with fast startup, adaptive playback, reliable seeking and resume, accessible controls, and clear entitlement and recovery boundaries.

Hard40 min interview

About 14 min read

Read any section, at your own pace

A video player with buffered timeline, adaptive quality selection, and CDN segment delivery. — A playback session coordinates the manifest, adaptive segment delivery, buffer health, and accessible controls.

The key idea

A streaming frontend coordinates the application and a media engine. Optimize the user’s playback experience while leaving encoding, segment delivery, entitlement, and license authority in their proper layers.

Question & requirements

Design the frontend of an on-demand video service. People browse a catalog, open a title, begin playback, seek, change captions and quality, and resume later. Explain media delivery, player state, adaptive quality, performance, permissions, and failures. Assume prerecorded content; live streaming introduces different latency, timeline, and reconnect requirements and is outside the first answer.

Clarify

Architecture & media boundaries

On-demand video architecture

Architecture

Catalog / title UI → Catalog API
Player UI → Playback-session API → Entitlement service
    │                         └─ Signed access / license policy
Player controller
    ↕ events and commands
Media engine → Manifest / segments / captions → CDN → media origin
    ↕ browser media element or native playback
Decode + render

Progress sync → Account API
Playback metrics → sampled telemetry collector
Encoding + packaging happen before delivery, outside the browser

The application layer manages routes, settings, entitlement prompts, progress, and UI. The media engine manages segment scheduling, adaptive selection, source buffers or native playback, and detailed playback errors. The browser decodes and renders. The server transcodes source video into aligned renditions, packages manifests and segments, and distributes them through a CDN.

Use the library’s supported capability detection and native fallback. A browser that plays one codec is not guaranteed to support every rendition or DRM combination. Keep the controller independent of the rendered controls so a compact mobile UI and desktop controls use the same commands and state.

Player state & intent

Illustrative application state, not a replacement media engine

TypeScript

type PlayerPhase =
  | 'idle' | 'authorizing' | 'preparing'
  | 'ready' | 'playing' | 'paused'
  | 'buffering' | 'seeking' | 'ended' | 'error';

type PlayerViewState = {
  phase: PlayerPhase;
  wantsToPlay: boolean;
  currentTime: number;
  duration: number | null;
  bufferedAheadSeconds: number;
  qualityMode: 'auto' | 'manual';
  captionLanguage: string | null;
};

Separate user intent from actual playback. A person can want playback while the engine is buffering; pressing Pause changes that intent so a later buffer recovery must not resume automatically. Derive progress and duration from media events, not a React interval pretending playback always advances. Duration may be unavailable until metadata is ready, and a seek operation may not complete immediately.

Keep scrub-preview state local until the seek is committed, unless the chosen UX supports continuous scrubbing. Avoid rerendering the entire page for every timeupdate. Update the progress display efficiently, and use the same authoritative state to label play/pause, buffering, captions, and errors.

Manifests, segments & session contract

Adaptive media is divided into segments at several bitrates and resolutions. A manifest describes the available tracks and how to locate them. The engine selects and downloads segments, while the CDN serves bytes close to the viewer. Different protocols and packaging formats have different details; do not parse a manifest with a custom regular expression in the app layer.

Illustrative application playback session, not a live API

JSON

{
  "sessionId": "view_81",
  "assetId": "movie_12",
  "protocol": "hls",
  "manifestUrl": "https://media.example.invalid/movie_12/master.m3u8?token=opaque",
  "expiresAt": "2026-10-03T11:00:00Z",
  "resumeSeconds": 420,
  "captions": [
    {
      "id": "en",
      "language": "en",
      "label": "English",
      "kind": "captions"
    }
  ],
  "licenseRequired": false
}

The session response is user-scoped and not publicly cacheable. Media segments can be immutable and cacheable when the delivery authorization strategy permits it. Signed URLs or cookies must be designed so CDN caching remains effective without granting unauthorized viewers access. Short-lived tokens should not appear in analytics, screenshots of errors, or logged query strings.

Adaptive bitrate & buffer decisions

Begin with a conservative supported rendition so startup does not wait for the highest resolution. The media engine estimates recent usable throughput and watches buffered playable time. It can raise quality when sustained capacity and buffer permit, and lower quality before a weak connection exhausts the buffer. Account for viewport size, device decoding ability, data-saver settings, and the user’s manual preference.

Throughput estimates are noisy: a fast cached segment or a short burst does not prove long-term bandwidth. Use smoothing, a safety margin, and switching hysteresis to avoid oscillation. Buffer-based and throughput-based signals complement each other. Explain the policy and metrics, while relying on the player engine’s tested adaptive algorithm rather than shipping a simplistic bitrate comparison from the UI.

Observed condition	Policy direction	Trade-off
Low initial knowledge	Start lower and reach first frame quickly	Quality improves after measurements.
Falling buffer and slow downloads	Reduce rendition early	Lower quality preserves continuity.
Healthy buffer with sustained capacity	Increase cautiously	Sharper video at greater data cost.
Manual high quality on weak network	Respect preference with an explanatory warning	The user may choose buffering over lower quality.
Data saver enabled	Cap auto quality and avoid unnecessary preload	Less bandwidth at reduced detail.

Playback	Adaptive on-demand video with multiple renditions	A manifest and segmented media travel through a player engine.
Devices	Desktop and mobile browsers	Native playback capabilities and autoplay differ.
Access	Some titles require authenticated entitlement	Application authorization precedes signed media access.
Resume	Per-account progress across devices	Checkpoint saves need sequencing and a conflict policy.
Excluded initially	Downloads, live events, ads, casting	Do not claim those work through ordinary browser caching.

Video Streaming

Question & requirements

Catalog-to-playback flow

Browse

Authorize

Prepare

Play

Resume and exit

Architecture & media boundaries

On-demand video architecture

Player state & intent

Illustrative application state, not a replacement media engine

Manifests, segments & session contract

Illustrative application playback session, not a live API

Adaptive bitrate & buffer decisions

Seeking, progress & resume

Resume is a preference, not a mandatory seek

Startup performance & delivery

Accessible controls & captions

Entitlement, signed access & DRM

Recovery, tests & playback metrics

A 40-minute interview answer

0–5 minutes

5–13 minutes

13–24 minutes

24–33 minutes

33–40 minutes

Sources & further reading

01Question & requirements

02Catalog-to-playback flow

Browse

Authorize

Prepare

Play

Resume and exit

03Architecture & media boundaries

On-demand video architecture

04Player state & intent

Illustrative application state, not a replacement media engine

05Manifests, segments & session contract

Illustrative application playback session, not a live API

06Adaptive bitrate & buffer decisions

07Seeking, progress & resume

Resume is a preference, not a mandatory seek

08Startup performance & delivery

09Accessible controls & captions

10Entitlement, signed access & DRM

11Recovery, tests & playback metrics

12A 40-minute interview answer

0–5 minutes

5–13 minutes

13–24 minutes

24–33 minutes

33–40 minutes

Sources & further reading

Question & requirements

Catalog-to-playback flow

Architecture & media boundaries

Player state & intent

Manifests, segments & session contract

Adaptive bitrate & buffer decisions

Seeking, progress & resume

Startup performance & delivery

Accessible controls & captions

Entitlement, signed access & DRM

Recovery, tests & playback metrics

A 40-minute interview answer