movie_filter Engineering Deep Dive

How "Trick Play" Works

That instant preview you see when scrubbing through Netflix or YouTube? It’s not magic—it’s a clever engineering trick called Sprite Sheets. Here is exactly how it works, from the pixel math to the network request.

science Interactive Laboratory

PROTOTYPE v1.3

1. The Player View Client Side

Hover over the timeline below. This simulates what a user sees.

Cinema Background play_circle

Real-time Calculation

Cursor X:
0px
Timeline %:
0%
Target Frame:
#0
CSS Pos X:
0px
CSS Pos Y:
0px

2. The Server Reality Asset on CDN

This is the single image file (Sprite Sheet) actually downloaded by the browser. The red box shows what the user sees.

Sprite Sheet Example
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
VIEWPORT

The browser loads this one image instead of 25 separate requests.

Mapped VTT File (storyboard.vtt)

00:00:00.000 --> 00:00:10.000
sprite.jpg#xywh=0,0,160,90
00:00:10.000 --> 00:00:20.000
sprite.jpg#xywh=160,0,160,90
00:00:20.000 --> 00:00:30.000
sprite.jpg#xywh=320,0,160,90
00:00:30.000 --> 00:00:40.000
sprite.jpg#xywh=480,0,160,90
00:00:40.000 --> 00:00:50.000
sprite.jpg#xywh=640,0,160,90
00:00:50.000 --> 00:01:00.000
sprite.jpg#xywh=0,90,160,90
00:01:00.000 --> 00:01:10.000
sprite.jpg#xywh=160,90,160,90
00:01:10.000 --> 00:01:20.000
sprite.jpg#xywh=320,90,160,90
00:01:20.000 --> 00:01:30.000
sprite.jpg#xywh=480,90,160,90
00:01:30.000 --> 00:01:40.000
sprite.jpg#xywh=640,90,160,90
00:01:40.000 --> 00:01:50.000
sprite.jpg#xywh=0,180,160,90
00:01:50.000 --> 00:02:00.000
sprite.jpg#xywh=160,180,160,90
00:02:00.000 --> 00:02:10.000
sprite.jpg#xywh=320,180,160,90
00:02:10.000 --> 00:02:20.000
sprite.jpg#xywh=480,180,160,90
00:02:20.000 --> 00:02:30.000
sprite.jpg#xywh=640,180,160,90
00:02:30.000 --> 00:02:40.000
sprite.jpg#xywh=0,270,160,90
00:02:40.000 --> 00:02:50.000
sprite.jpg#xywh=160,270,160,90
00:02:50.000 --> 00:03:00.000
sprite.jpg#xywh=320,270,160,90
00:03:00.000 --> 00:03:10.000
sprite.jpg#xywh=480,270,160,90
00:03:10.000 --> 00:03:20.000
sprite.jpg#xywh=640,270,160,90
00:03:20.000 --> 00:03:30.000
sprite.jpg#xywh=0,360,160,90
00:03:30.000 --> 00:03:40.000
sprite.jpg#xywh=160,360,160,90
00:03:40.000 --> 00:03:50.000
sprite.jpg#xywh=320,360,160,90
00:03:50.000 --> 00:04:00.000
sprite.jpg#xywh=480,360,160,90
00:04:00.000 --> 00:04:10.000
sprite.jpg#xywh=640,360,160,90
grid_view

1. The Sprite Sheet

When a movie is uploaded, a transcoding server extracts a frame every few seconds. Instead of saving thousands of tiny image files, it stitches them into a single, massive grid image called a Sprite Sheet.

description

2. The VTT Map

A text file (WebVTT) acts like an index, telling the player: "At 00:05, look at the sprite sheet at coordinates x=160, y=0".

css

3. The CSS Magic

When you hover, the browser doesn't crop the image. It uses `background-position` to shift the massive sprite sheet behind a small viewing window.

Why do it this way?

Imagine a 2-hour movie with a preview every 10 seconds. That's 720 images.

block Old Way (Individual Images)

  • • 720 separate HTTP requests
  • • Huge overhead from headers (TCP/IP handshake)
  • • Choppy UI as images load one by one

check_circle Netflix Way (Sprite Sheet)

  • • 1 single HTTP request
  • • Instant rendering (image is pre-cached)
  • • Smooth 60fps scrubbing experience
Latency
High
720 Requests
Latency
Near Zero
1 Request