WebM to PNG frames

Your video never leaves your browser, and nothing is downloaded to make this work. Your browser already decodes WebM because it has to play it; this asks it for the picture at each moment and writes PNG frames around what comes back.

Every frame as a separate PNG, in a ZIP.

For when you want the pictures rather than an animation: a contact sheet, a thumbnail, one particular moment. Each file is named with the time it was taken from, so the frame you want is the one you can find. PNG is lossless, so these are exactly what the decoder produced.

It will probably be bigger than the video

This surprises everybody, so it is worth saying before you press the button. A video codec stores the difference between one frame and the next: a person talking against a still background costs almost nothing per frame, because almost nothing changes. PNG frames does nothing of the kind. Every frame is stored whole, with nothing carried over from the frame before it.

So a ten-second clip that was 2 MB as an MP4 can easily be 8 MB coming out. The controls above are the cure: fewer frames a second, a smaller width, and a shorter span. The size is shown before you download anything.

Every frame keeps the time it came from

These are stills, so there is no animation timing to get wrong — but there is still the question of which moment each picture is from, and that is worth keeping. Each file is named with the time it was taken, to a hundredth of a second, so a folder of three hundred frames is something you can search rather than scroll.

Each frame is taken from the middle of its slot rather than its start, for the reason given below: asking for the picture at exactly the moment a clip cuts is asking the decoder which side of the line to round to.

Where the frames come from

There are three ways to get pictures out of a video in a browser and only one of them works. This was measured rather than assumed:

• requestVideoFrameCallback only fires for frames the browser actually puts on screen. A video element that is not on the page puts nothing on screen — measured here as zero frames from a clip that played all the way through.
• MediaRecorder has the same problem for the same reason, and it runs in real time: a ten-minute video would take ten minutes.
• Seeking and drawing works with the video off the page, works in a background tab, and runs far faster than real time — about ten milliseconds a frame on a small clip. That is what this uses.

Each frame is taken from the middle of its slot rather than the start. Asking for the picture at exactly 1.0 seconds on a clip that cuts at 1.0 seconds is asking the decoder which side of the line to round to, and different files answer differently. The midpoint has no such question in it.

What does not come across

The sound. None of these five formats has any, so it is not lost so much as impossible. If it was the sound you wanted, the same file will give you an MP3 and nothing is uploaded there either. Subtitles, chapters, rotation metadata and any second video track are not carried.

AVI, MOV, WMV, FLV and MTS are refused, and that is not a shortcoming of this page: no browser will decode them, and working around it would mean shipping a demuxer and a codec for each. If you hand one over it says so plainly rather than producing an empty file. An .ogv with Theora video does open, and has no picture in it this browser can decode — the page says that too.

Where to go next

• WebM to GIF — the same clip, another way
• WebM to APNG — the same clip, another way
• WebM to animated WebP — the same clip, another way
• WebM to JPEG frames — the same clip, another way