Skip to content

Design prompt: video player

Put numbers on the first frame, stalls and captions first; segments, the ladder, the bitrate rule and the buffer follow from them.

Predict first

Before you read: predict

ExamHall's rule briefing is a recorded video every candidate must watch before the exam. The player streams it with HLS from a ladder of four rungs, 0.6, 1.2, 1.8 and 3.0 Mbit/s, in 4-second segments. On a test centre's Wi-Fi a laptop gets 4 Mbit/s while the briefings start. Before the first segment, the player fetches two playlists and an init segment; each of those requests, and each segment request, waits 0.125 s before its first byte. The rule is the first frame within 2 s of pressing Play.

On this lesson's player model, which rung should the first segment come from, for the sharpest first picture that still meets the rule?

Pick one

The 30-second version

A player is a budget: first frame, stalls, picture and captions. Encode a ladder of rungs, cut into short segments listed in a playlist. Startup is round trips plus the first segment's bits over the link: start low. Then time each download, pick the next rung, buffer ahead within a target, and count waits from player events.

Put numbers on the first frame, stalls and captions first; segments, the ladder, the bitrate rule and the buffer follow from them.

How it works

Step 1 of 12

Numbers first. Video length, viewers' links, how soon the first frame must show, how much stalling is tolerable, caption languages, who leaves early.

Analogy: A conveyor-belt sushi bar keeping the belt in front of a diner stocked

At the sushi bar In the player
each dish comes plain or deluxe, and a richer plate takes longer to make the ladder (step 3)
the board lists every plate; a branch with no grill skips grilled ones variants the browser decodes (step 4)
a new diner's first plate is a plain roll, so she eats at once startup (step 5)
the head chef times each plate, judges the kitchen's pace, then chooses the next plate estimate, then pick (step 6)
a plate already started goes out as started a switch waits for a segment (step 7)
the belt holds a few minutes' worth; what is left when a diner goes is thrown away the buffer target (step 8)
allergen cards stand beside the belt in each language, not pressed into the rice captions as text (steps 9–10)
the manager notes how long each diner waited for a first plate, and sat facing an empty belt QoE (step 11)

In real terms: a player spends a link's bits on seconds of picture, ahead of the playhead, under a startup and stall budget.

Breaks down when: a diner may take plates in any order; video plays in order, so one late segment stops everything behind it.

Contrasting case: a set menu served at once to every table: one choice, cooked before anyone eats. That is one file through <video src>.

Examples, run for real

4.1 ExamHall EXH-4600 → MR !4900: the briefing at a crowded centre

The pilot played the 6-minute briefing as one 3.0 Mbit/s MP4 through <video src>. At a centre where each laptop gets a steady 2 Mbit/s while briefings run, candidates sat through stalls (EXH-4600). MR !4900 publishes a ladder in 4-second segments, starts on the bottom rung and lets the model's rule pick (steps 2–6).

4.1 model: 6-minute briefing · each laptop gets a steady 2 Mbit/s while the centre's briefings run
4.1 EXH-4600 pilot: one 3.0 Mbit/s MP4 in <video src> · first frame at 1.6 s · 3.0 min stalled in all · the briefing ends 3.0 min late
4.1 MR !4900: ladder 0.6/1.2/1.8/3.0 Mbit/s, 4-s segments, first segment from 0.6 · first frame at 1.6 s · 0 stalls · mean picture 1.19 Mbit/s, 89 of 90 segments from 1.2

A file faster than the link stalls again and again. The ladder settles on the rung the link carries (step 6).

4.2 Proof domain, ticketing: the requests behind a gate clip

A ticketing app's 60-second gate clip, on a phone's 8 Mbit/s 4G. The player's requests, in order (steps 3, 5, 7):

4.2 model: 60-s gate clip · ladder 0.5/1.1/2.2/3.6 Mbit/s as v0-v3 · 4-s segments · 8 Mbit/s 4G
4.2 first 8 requests: GET gate.m3u8 (multivariant) · GET v0/index.m3u8 · GET v0/init.mp4 · GET v0/seg1.m4s · GET v3/index.m3u8 · GET v3/init.mp4 · GET v3/seg2.m4s · GET v3/seg3.m4s
4.2 total: 20 requests · 15 segments · rungs played v0 v3 v3 v3 v3 v3 v3 v3 v3 v3 v3 v3 v3 v3 v3

The first segment comes from the bottom rung; after one measurement the player moves up, fetching the new rung's playlist and init segment first.

4.3 The board for "Design a video player for a course platform" (worked, not executed)

Typical question Steps that answer it Mechanism owner
"How does the player pick a bitrate, and when does it switch?" 5–7 this lesson
"Which metrics tell you the player is good?" 1, 11 this lesson; p75 by segment: fsd-frontend-observability
"Where do the segments come from?" 3 this lesson; caching them: sd-cdn-edge-caching
"What do deaf candidates get?" 9, 10, 12 this lesson; roles and names: ui-semantics-aria

Try it

Answer first, then check. Nothing is saved.

Question 1 of 7

ExamHall's rule briefing is published with this multivariant playlist:

#EXTM3U
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Deutsch",LANGUAGE="de",URI="subs/de.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,CODECS="avc1.42e01e,mp4a.40.2",SUBTITLES="subs
v360.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1500000,RESOLUTION=960x540,CODECS="avc1.4d401f,mp4a.40.2",SUBTITLES="subs
v540.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2400000,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",SUBTITLES="subs
v720.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3600000,RESOLUTION=1280x720,CODECS="avc1.640028,mp4a.40.2",SUBTITLES="subs
v720hi.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=5200000,RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2",SUBTITLES="subs
v1080.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=1280x720,CODECS="hvc1.1.6.L93.B0,mp4a.40.2",SUBTITLES="subs
h720.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=3500000,RESOLUTION=1920x1080,CODECS="hvc1.1.6.L120.B0,mp4a.40.2",SUBTITLES="subs
h1080.m3u8
#EXT-X-I-FRAME-STREAM-INF:BANDWIDTH=150000,RESOLUTION=640x360,CODECS="avc1.42e01e",URI="v360-iframes.m3u8

On the test-centre laptops, MediaSource.isTypeSupported returns true for every avc1 and mp4a codec string in this playlist and false for every hvc1 one.

Between how many variants can the player's bitrate rule switch on those laptops?

Pick one

Question 2 of 7

A ticketing app plays a 3-minute video, "Find your gate", to fans walking the stadium concourse. Its HLS ladder has rungs of 0.8, 1.6, 3.0 and 4.5 Mbit/s in 4-second segments, and the player keeps at most 20 s buffered ahead. An adaptive player starts on the 0.8 Mbit/s rung. The 4.5 Mbit/s rung's file also exists as one MP4. An adaptive player first fetches two playlists and an init segment; each of those requests, each segment request and the MP4's one request waits 0.1 s before its first byte. On the concourse a phone's 4G alternates: 6 Mbit/s for 4 s, then 2 Mbit/s for 4 s, all the way.

On this lesson's player model, which design plays the whole video without a stall, with the most picture?

Pick one

Question 3 of 7

ExamHall's rule briefing, 6 minutes long, ships with German captions. Its multivariant playlist:

#EXTM3U
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Deutsch",LANGUAGE="de",AUTOSELECT=YES,URI="subs/de/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=700000,RESOLUTION=640x360,CODECS="avc1.42e01e,mp4a.40.2",SUBTITLES="subs
v360/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1400000,RESOLUTION=960x540,CODECS="avc1.4d401f,mp4a.40.2",SUBTITLES="subs
v540/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2600000,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2
v720/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4200000,RESOLUTION=1920x1080,CODECS="avc1.640028,mp4a.40.2",SUBTITLES="subs
v1080/index.m3u8

A candidate turns the German captions on before pressing Play. The player's log for her session: 0:00–0:16 from v360, 0:16–1:20 from v540, 1:20–4:00 from v720, 4:00–6:00 from v1080, in 4-second segments.

On this lesson's player model, for how many seconds of the briefing were her captions unavailable?

Pick one

Question 4 of 7

A bank shows a 4-minute video to customers opening an account. Its player logs these events for one session, in seconds since the viewer pressed Play:

  0.0 play
  1.8 playing
 42.0 waiting
 45.1 canplay
 45.5 playing
 90.0 seeking
 90.0 waiting
 91.0 canplay
 91.2 seeked
 91.2 playing
150.0 waiting
152.0 canplay
152.5 playing
240.0 ended

How many seconds of rebuffering does this session count?

Pick one

Question 5 of 7

The interviewer says: "Design the player for ExamHall's recorded rule briefings. They must start in under 2 s on test-centre Wi-Fi and have captions." The numbers you get when you ask: 6-minute briefings; a ladder of 0.5, 1.0, 2.0 and 3.5 Mbit/s; laptops that decode H.264 (avc1) and AAC (mp4a) only; 3 Mbit/s per laptop while briefings start, three setup requests and a 0.125 s wait per request; then Wi-Fi swinging between 5 Mbit/s and 1.5 Mbit/s every 4 s; a tenth of candidates reload the page 3 minutes in, and each reload may throw away at most 15 MB; captions in English and German. In 20 minutes, write your board: the numbers, the segment length, the first rung, the bitrate rule, the buffer target, the playlist's codecs, how captions reach every variant, and how rebuffering is counted.

Then write your choices in the shape of design.template.mjs as my-design.mjs, and run the check.

Question 6 of 7

A chat app plays video messages with HLS. On Wi-Fi a 3-minute message plays every segment from the 3.0 Mbit/s rung, in 2-second segments, and the player's buffer target is set to 60. Its player first fetches two playlists and an init segment; each of those requests, and each segment request, waits 0.1 s before its first byte. A message goes to 10,000 recipients on 30 Mbit/s Wi-Fi, and every one of them stops watching 40 s in.

On this lesson's player model, about how much of the video the app fetched did nobody watch (1 GB = 1,000,000,000 bytes)?

Pick one

Question 7 of 7

ExamHall's English captions file for the rule briefing holds:

WEBVTT

1
00:01:01.000 --> 00:01:04.000
Put your phone in the tray.

2
00:01:02.000 --> 00:01:06.000
[A bell rings]

3
00:01:02.500 --> 00:01:05.000
Then close the lid.

4
00:01:03.000 --> 00:01:07.500
It stays there until the exam ends.

At 00:01:04.000 of the briefing, with captions on, which cues does the candidate see?

Pick one

Go deeper

Pro tip
  1. Lead with two QoE numbers, the first frame and rebuffering, and let them set the segment length and the first rung. When: the interviewer asks you to design a video player. Status: RAN on the player model (a model, not a browser).
Source

No item is keyed on a source; every key is executed on the labelled model or by a real parser. Valid as of 2026-10-16.

  • RFC 8216, HTTP Live Streaming (the curriculum row's URL): https://www.rfc-editor.org/rfc/rfc8216 (saved from the .txt form, rfc8216.txt). "The EXT-X-STREAM-INF tag specifies a Variant Stream" and "Clients should switch between different Variant Streams to adapt to network conditions. Clients should choose Renditions based on user preferences." (steps 3–4); "The EXT-X-I-FRAME-STREAM-INF tag identifies a Media Playlist file containing the I-frames of a multimedia presentation." (step 4); "It indicates the set of subtitle Renditions that can be used when playing the presentation." (step 10).
  • MDN, Media Source API (the curriculum row's URL): https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API (mdn-mse.txt). "MSE allows us to replace the usual single progressive src URI fed to media elements with a reference to a MediaSource object" and "It lays the groundwork for adaptive bitrate streaming clients (such as those using DASH or HLS) to be built on its extensible API." (step 2).
  • W3C, WebVTT (the curriculum row's URL): https://www.w3.org/TR/webvtt1/ (w3c-webvtt.txt). "WebVTT files provide captions or subtitles for video content" (step 9).
  • MDN, MediaSource: isTypeSupported(): https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/isTypeSupported_static (mdn-istypesupported.txt). "If the returned value is false, then the user agent is certain that it cannot access media of the specified format.".
  • MDN, the track element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track (mdn-track.txt). "Closed captions provide transcription or translation of the dialog, sound effects, relevant musical cues, and other relevant audio information".
  • MDN, HTMLMediaElement: waiting event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event (mdn-waiting.txt). "The waiting event is fired when playback has stopped because of a temporary lack of data.".
  • WHATWG, HTML Living Standard, media elements: https://html.spec.whatwg.org/multipage/media.html (whatwg-media.txt). "whose start times are less than or equal to the current playback position and whose end times are greater than the current playback position".

Related lessons

Checked against the tools and docs as of 2026-10-16.