ProjectsVideo infrastructure
Thumbnails and previews by URL
Hover previews, thumbnails and storyboards for a clip library, with no batch jobs
Example design
- 01ThumbnailThe page requests a frame at a set time and width through a /cdn-cgi/media/ URL on your domain.
- 02Range requestThe edge reads only the part of the source file it needs, using HEAD and range requests to the origin.
- 03Still frameThe still is returned and cached. The next viewer gets the cached copy.
- 04Hover previewOn hover, a second URL asks for a short, resized clip from the same source, without audio.
- 05StoryboardA spritesheet of frames for the scrub bar comes from a third URL.
- ifA source is too longMedia Transformations accepts sources up to 100 MB and 10 minutes. Longer files go through Stream or an encoding pipeline, and the page falls back to a stored thumbnail.
The problem
A library of short videos, such as product clips or social cuts, needs a thumbnail, a hover preview and a storyboard for each one. Generating these ahead of time means a batch job, storage for every variant, and a full rerun whenever the design changes. With Media Transformations each variant is a URL. The first request generates it, and the cache serves it after that.
What it uses
- Media Transformations
- Frames, clips, spritesheets and resizing from a URL
- Cache
- Serves each variant after the first request
- R2
- Source files, if they are not already on your own origin
The decisions, and why
- Source formatMP4: H.264 with AAC or MP3
- This is what Media Transformations reads. Other formats need converting once.
- VariantsDefined in templates
- Changing the thumbnail size is a template change. Nothing has to be regenerated in a batch.
- OriginR2, or any server with range requests
- The library can stay where it is, provided the origin answers HEAD and range requests.
- CostPer unique transformation
- Billing counts each unique transformation once a month, with a free allowance. A still counts once and a clip counts per second of output, so previews are kept short.
Limits to plan around
- Sources must be MP4 with H.264 video, at most 100 MB and 10 minutes long.
- The origin must support HTTP HEAD and range requests.
What you get
- URL templates for thumbnails, previews and storyboards
- Front-end components for hover previews and scrubbing
- Fallbacks for sources outside the limits
- A cost estimate from your library's size and traffic
Other projects
More video work on Cloudflare.
- Serverless video platformUploads, encoding, captions and signed playback with no servers to run
- Private video delivery from R2Pre-encoded HLS served from R2 through a Worker, with signed links that expire
- FFmpeg encoding on Cloudflare ContainersYour own ladder and packaging, started by an upload, served from R2
- Sub-second live with WHIP and WHEPLive auctions, Q&A and watch-alongs where a few seconds of delay is too much
- Searchable video archiveFind the moment in hours of recordings by what was said
- Instant clips from a live streamViewers clip the moment they just saw and share it while the event is still on
DRM solutions
Three corporate use cases, each with a Widevine demo that runs in your browser and checks what your device supports.
Talk about your video project
Tell us what you are building, or what is not working in the platform you have.
128 City Road, London, EC1V 2NX, United Kingdom
17420568
Registered in England and Wales