Pull still frames out of a video in the browser
A thumbnail extractor captures one or more still images from a video at the moments you choose — handy for poster frames, contact sheets, documentation screenshots, or scrubbing through footage frame by frame. This tool does it locally with the HTML5 video element and Canvas, so nothing is uploaded.
How it works
The selected file is wrapped in a local object URL and loaded into an off-screen <video> element. Once metadata is available the tool reads the duration and native resolution. For each requested time it sets video.currentTime and waits for the seeked event to fire — that guarantees the frame at that timestamp is actually decoded and displayed. It then calls ctx.drawImage(video, …) on a Canvas sized to the video and exports the result with canvas.toDataURL("image/png").
In interval mode the timestamps are generated as 0, N, 2N, … up to the duration; in list mode they come from the comma- or newline-separated values you enter.
Common use cases
Poster frames for YouTube or Vimeo. Thumbnail images that appear before playback starts are often pulled from a specific moment in the video — the most visually striking frame, or a title card. Extract that exact moment using list mode to get a full-resolution PNG ready for upload.
Contact sheets for a video library. When you have a collection of raw clips and need to quickly identify each one, extracting a frame every 10 or 30 seconds produces a visual index that is faster to scan than playing each file. Use interval mode and set N to your preferred spacing.
AI video verification. When generating AI video clips, visual quality can vary frame by frame. Extracting frames at regular intervals lets you check motion consistency, face stability, and artifact occurrence without scrubbing through the video manually.
Documentation and tutorials. Step-by-step written guides often need screenshots from a screen recording or demo video. Instead of pausing the video and pressing Print Screen multiple times, load the video and extract all the frames you need at once.
Video-to-storyboard. Extracting one frame per scene cut gives you a rough storyboard of an existing video — useful for editing planning or adapting the structure for a new production.
Two extraction modes explained
Interval mode generates evenly spaced timestamps: if you set N to 5, you get frames at 0, 5, 10, 15 … seconds up to the video’s end. This produces a consistent overview without you needing to decide timestamps manually.
List mode lets you enter specific timestamps (for example: 1.2, 3.5, 7.0, 12.8) to capture exact moments. This is more precise but requires you to already know the times you want — usually by watching the video first and noting them.
Tips and notes
- Use list mode to grab exact moments (for example a title card at 3.5 s); use interval mode to build an even contact sheet.
- Frames are saved at the video’s native resolution, so they are suitable for high-quality poster images or documentation.
- Some browsers cannot decode certain codecs (HEVC/H.265, for instance). If extraction fails or frames appear blank, re-encode the source to H.264 MP4 or WebM first.
- Seeking in the browser is sequential — each seek must complete before the next begins. Extracting many frames from a long video takes proportionally longer; for a 2-hour video, use a wide interval rather than a short one.