To extract a single frame from a video, seek the browser's video decoder to a specific time in seconds, draw the decoded frame onto a same-size canvas, and encode that canvas as a PNG — this is exactly how a focused in-browser tool like Video Frame Extractor works, producing one full-size still per extraction from a local file you already have on your device. "Frame by frame" does not require installing a desktop video editor or uploading a clip to a server; the browser already knows how to play a video, and the same machinery can be paused at a timestamp you choose, painted onto a hidden canvas at native pixel dimensions, and saved as a portable image. The catch is that any in-browser approach pulls one still at a time, so a frame-by-frame workflow becomes a deliberate loop: pick a time, extract, advance the time, extract again. For short clips and modest counts (a handful of stills for slides, references, thumbnails, or social posts), that loop is quick and entirely local. For hundreds of exact-numbered frames, HDR output, batch export, or non-decodable codecs, a dedicated desktop tool is the better fit.

how to extract video frame by frame
how to extract video frame by frame

What "Frame by Frame" Means in a Browser

A video is a sequence of still images played back at a fixed cadence, typically 24, 25, 30, 50, or 60 frames per second. Pulling stills "frame by frame" suggests stepping through that sequence one image at a time, and most desktop editors expose a frame counter for exactly that. Browsers expose a different knob: a media timeline measured in moments, accessed through the currentTime property on a loaded video element. The distinction matters because browser seeking can land on a nearby decoded frame rather than the exact numbered source frame — keyframes, variable frame rates, edit lists, and timestamp rounding all influence where the decoder actually stops. In practice, "frame by frame" in an in-browser workflow means "timestamp by timestamp": you enter a position almost instantly, with decimals for milliseconds or frame-rate-style fractions, the browser decodes that area of the timeline, and you save the still. Repeating the process with a slightly later time gives you the next frame's worth of output. This is the loop that Video Frame Extractor is built for.

In practice, useful timestamps cluster in a few shapes. The first frame sits at zero; the last usable frame sits just inside the reported duration. Between them, millisecond values such as 0.250, 0.500, and 0.750 cover sub-frame precision for slow-motion or motion-analysis work, fractional seconds like 1.5, 2.25, and 3.75 are convenient for ordinary logging, and frame-rate-style decimals (0.04 at 25 fps, 0.033 at 30 fps, 0.0167 at 60 fps) line up with common cadence boundaries. One minute (60.000) is a frequent landmark for longer clips, and the maximum duration boundary is where the last frame lives. Writing those timestamps down before you start extracting makes the loop easy to repeat and verify.

How the Browser Decodes a Single Still

The pipeline has four short stages. First, the file is handed to a hidden video element; if the browser can decode the container and the codec inside it, the element loads metadata and reports a duration. Second, the requested time is assigned to the element's currentTime, which triggers a seek operation; according to MDN's HTMLMediaElement currentTime documentation, seeking causes the decoder to position the playhead at the new media timeline location. Third, once the seek completes, a same-size canvas is created and the current decoded frame is painted onto it using the 2D context's drawImage method, which MDN's Canvas drawImage reference describes as drawing a source image or video onto the canvas at the requested coordinates. Fourth, the canvas is encoded as a PNG and exposed as a local download. The frame is saved at the decoded dimensions — no resize, crop, sharpen, interpolate, or filter is applied — so the still preserves whatever the decoder handed back, including transparency if the decoded frame provides an alpha channel.

Each request also runs through a small validation layer: the input must be a bounded local video whose decoded metadata loads successfully, the requested time must be a finite number inside the reported duration, and the resulting PNG must not be empty. If any of those checks fail — or if seek, canvas, or encoding fails — the tool reports the error instead of producing a download. The local download URL is revocable: it is invalidated whenever inputs change or the component unmounts, which keeps stale stills from lingering in the tab.

Pulling a Frame at an Exact Time

  1. Open Video Frame Extractor and choose one supported local video file. Wait until the duration and the preview both load — loading confirms that your browser could decode the container and the codec inside it. Files are bounded by a shared video safety policy: up to 500 MiB, up to five minutes, no more than 4096 pixels per side, and no greater than 3840 × 2160 in area.
  2. Enter a frame time between zero and the displayed duration, using decimals when you need millisecond or fractional-second precision. Frame-rate-style values such as 0.04 (at 25 fps), 0.033 (at 30 fps), and 0.0167 (at 60 fps) place the request on specific frame boundaries, though the browser may still land on a nearby decoded frame.
  3. Select Extract PNG frame. If decoding, seeking, canvas drawing, or PNG encoding fails, the tool reports the failure instead of producing an empty download. Verify that the resulting still matches the moment you wanted, then download the local PNG. The output filename includes the time you selected, which makes a sequence of extracted frames easy to sort later.

Supported Files and Hard Limits

The tool accepts MP4, WebM, MOV, M4V, and Ogg files, but a supported file extension does not guarantee playback. Each container can hold several different audio and video codecs, and the browser must support the specific codec stored inside the file.

ContainerBrowser codec requirement
MP4Common container; playback depends on the specific codec stored inside.
WebMOpen container; codec support varies by browser.
MOVApple container; playback depends on the codec inside the file.
M4ViTunes-style container; treated similarly to MP4 by most browsers.
OggOpen container; codec support varies by browser.

All inputs share the same safety envelope, applied before decoding begins:

LimitMaximum
File size500 MiB
Duration5 minutes
Width per side4096 pixels
Total pixel area3840 × 2160 pixels

What the Tool Does Not Do

A focused still extractor trades breadth for simplicity. It does not resize, crop, sharpen, interpolate, or apply filters; the saved PNG carries the decoded frame at its native dimensions. It does not batch-export — each frame is one click. It does not identify an exact numbered source frame; the requested time is a media timeline position, and the displayed time records the position you asked for rather than the precise packet timestamp the decoder stopped on. It does not inspect HDR metadata or color management, and it preserves transparency only if the browser's decoded video frame provides an alpha channel. Files are processed in the current tab — decoded, drawn, encoded, and downloaded locally — so nothing leaves the device. For a broader extraction workflow that walks through dozens of timestamps without manual clicks, the dedicated guide on extracting frames from a video without uploading covers complementary approaches.

When to Use a Desktop Video Editor Instead

Browser extraction is the right fit for thumbnails, reference stills, slides, social posts, and quick visual notes from a short clip you can already play in your browser. Switch to a dedicated desktop video editor when the work demands frame-accurate output tied to a specific source frame number, batch export of hundreds or thousands of stills, HDR or color-managed output, alpha workflows that depend on a known channel layout, footage longer than five minutes, files larger than 500 MiB, or formats whose codec the browser does not support. For those jobs, desktop tools can read packet timestamps, walk the entire timeline, and encode stills in formats a browser cannot reach.