Video Preview Practice

Timeline Thumbnail Preview (YouTube Style)

This technique shows a small preview image when you hover or scrub the video timeline exactly like YouTube. It helps users jump to the correct moment quickly without guessing.

Core Idea

Instead of generating previews in real time while the user hovers, the system generates them once during upload processing.

Upload video → extract frames → build sprite sheet(s) → create WebVTT mapping → frontend uses mapping to show correct crop

What is a Sprite Sheet?

A sprite sheet is a single large image containing many small thumbnails arranged in a grid. Loading one sprite is faster than loading hundreds of separate images.

What is WebVTT?

WebVTT is a standard text format normally used for subtitles. But we use it here as a mapping table: it tells the player which sprite file to use and what exact crop rectangle to show for each time range.

WEBVTT

00:00:00.000 --> 00:00:02.000
sprite_0001.jpg#xywh=0,0,160,90

00:00:02.000 --> 00:00:04.000
sprite_0001.jpg#xywh=160,0,160,90

What we implemented in this project

  • Upload a video via Next.js API route.
  • Generate thumbnails using FFmpeg (every 2 seconds).
  • Build multiple sprite sheets for long videos.
  • Generate storyboard.vtt mapping timestamps to sprite crops.
  • Frontend reads VTT, finds matching cue, displays preview on hover.

Why it scales

  • Sprites are cache-friendly (CDN can cache them).
  • Only one request per sprite, not hundreds of thumbnails.
  • VTT file is very small and loads once.
  • Hover updates are throttled using requestAnimationFrame.