Sprite sheet (storyboard)
A sprite sheet, also called a storyboard, is a single image that packs many small frames, taken at regular intervals through a video, into a grid. A small index file, usually WebVTT or JSON, maps each time range to one tile's position in the grid. When a viewer hovers over or drags along the seek bar, the player crops the matching tile and shows it as a preview. One image replaces hundreds of separate thumbnail requests, so seek previews appear as soon as the pointer moves.
How do sprite sheets power seek previews?
When a viewer hovers over the seek bar, the player converts the pointer position into a time in the video. It looks that time up in the storyboard index, which says which sheet and which rectangle hold the frame for that range. It then draws only that rectangle in a small box above the bar, using a CSS background position on the web or a cropped bitmap in a native app.
The point of the sheet is that the image loads once. After the first fetch it sits in the browser or app cache, so every later hover is a lookup and a crop with no network request. The video itself is never decoded for the preview, which is why previews work on parts of the video the player has not buffered yet. Long videos usually split frames across several sheets, and the index points each range at the right one.
How is a storyboard sprite sheet generated?
Generation runs once per video, usually during processing. The system samples a frame at a fixed interval, for example every 5 or 10 seconds, scales each one to a small tile such as 160x90, and lays the tiles out left to right, top to bottom in a grid. FFmpeg can do this with its fps, scale and tile filters in a single command.
The grid has limits. Image decoders and mobile devices handle very large images badly, so a long video is split into several sheets, each with a fixed number of rows and columns. The sheets are compressed as JPEG or WebP, since tiles are photographic and small. Finally the system writes the index: for each time range, the sheet URL and the tile's x, y, width and height.
What interval should a sprite sheet use?
The interval trades preview precision against download size. A tile every second gives an exact preview but makes a two hour video into thousands of tiles and several heavy sheets. A tile every 10 seconds keeps the files light, but a viewer hunting for a moment in a fast edit may land a few seconds off.
A common approach scales the interval with duration, so every video gets roughly the same number of tiles. A one minute clip gets a tile every second or two, while a long lecture or match gets one every 10 to 20 seconds. Load the first sheet when the player is ready or on the first hover, not with the page, so storyboards never compete with the video's first segments for bandwidth.
Sprite sheet vs. trick play
Both show the viewer where they are going in a video, but they serve different controls. Sprite sheets drive hover and drag previews on web and mobile seek bars. The player crops a still from one image, with no decoding, and any player that can draw an image can use them.
Trick play is fast forward and rewind with visual feedback, mostly on TVs driven by a remote. HLS supports it with I-frame playlists, tagged EXT-X-I-FRAMES-ONLY, which list only the keyframes in each segment so the player can decode real frames while scanning at speed. DASH offers trick mode adaptation sets for the same job, and Roku uses its own BIF image archives. I-frame playlists look sharper but cost the player decoding work and network requests while scanning. Services that play on both phones and TVs often produce a storyboard sprite sheet for the seek bar and I-frame playlists for remote control scrubbing.
Storyboard WebVTT vs. JSON manifest
The index that maps time to tiles comes in two common forms. A WebVTT storyboard reuses the caption file format: each cue has a start and end time, and its text is the sheet URL with a media fragment such as storyboard.jpg#xywh=160,0,160,90, meaning a 160x90 tile starting 160 pixels from the left. Many web players and player plugins load this as a thumbnail track with no custom code.
A JSON manifest describes the same grid as data: the interval, tile width and height, rows and columns, and the list of sheet URLs. A player computes the tile from the time instead of scanning cues, which is compact for long videos with many sheets and easy to parse in native apps and custom interfaces. Pick WebVTT when you want existing players to work out of the box, and JSON when you build your own seek bar or need control over the interval.
How does FastPix handle sprite sheets?
FastPix generates storyboards on images.fastpix.com, from the same playback ID as the video and its thumbnails, so there is no sprite job to build or schedule. A storyboard is a sprite sheet of frames sampled through the video, paired with a matching WebVTT track that maps each time range to a tile, the format players read for timeline hover previews. When you need control over the sampling, advanced interval-based spritesheets let you set the interval and come with a JSON manifest describing the grid.
The FastPix Player uses storyboards for seek preview thumbnails on web and Android: hover over or drag along the timeline and the matching frame appears above it, with chapters shown on the same timeline. Player SDKs cover web, Android (Media3-based, including Android TV), iOS (AVPlayer-based, including tvOS and visionOS) and Flutter, as described in the player SDK docs.
Delivery runs on a multi-CDN network of 300+ points of presence, and storyboards can be served from your own custom domain alongside video and posters. Thumbnails inherit the playback ID's access policy, so private media needs a JWT for its images too. Single frames and GIF previews come from the same image service, as described in create thumbnails.
Storyboards come with each video. Standard encoding is free up to 4K, and the free plan covers 10 videos with no card, enough to test seek previews on your own longest videos.
