Will this always produce a real .mp4 file?

Only if your browser's MediaRecorder actually supports encoding MP4 (H.264) — this is common in Safari and recent Chromium builds. If it isn't supported, the tool automatically falls back to recording a real WebM video instead and names the downloaded file converted.webm so the extension always matches the actual bytes.

Why does the video look like it plays exactly once?

The recorder starts, plays the APNG's frames through their full delay schedule exactly once, then stops — it records one complete pass through the animation rather than looping indefinitely, keeping output size and length predictable.

Does this upload my APNG anywhere?

No. Decoding, canvas playback, and video recording all happen locally in your browser using CompressionStream, canvas.captureStream(), and MediaRecorder; nothing is sent to a server.

Why did recording fail with an 'unavailable' message?

Either your browser doesn't implement canvas.captureStream() or MediaRecorder at all, or none of the candidate mimeTypes (MP4 or WebM) are supported — this is checked with MediaRecorder.isTypeSupported() before recording starts, so you'll see a clear error instead of a broken download.

APNG to MP4 Converter - Turn an Animated PNG into a Video

Overview

Introduction

This tool turns an Animated PNG into a downloadable video file by replaying its frames on a canvas and recording that playback with your browser's own media encoder.

It never fabricates video bytes — if your browser can't encode MP4, it honestly falls back to a real WebM file rather than pretending to produce MP4.

What Is APNG to MP4 Converter?

A client-side APNG-to-video converter that decodes an uploaded APNG's individual frames and per-frame delays, then uses canvas.captureStream() plus MediaRecorder to capture a scheduled canvas animation into a real video container.

The mimeType actually used for recording is feature-detected against MediaRecorder.isTypeSupported(), preferring true MP4 (H.264) and falling back to WebM when MP4 isn't available.

How APNG to MP4 Converter Works

The APNG's frames are decoded once up front into RGBA pixel buffers with their delay times. A canvas is sized to the animation's dimensions, and its captured MediaStream is fed into a MediaRecorder.

A requestAnimationFrame loop tracks elapsed time against a precomputed frame schedule, drawing each frame to the canvas only when the current frame index changes, so the recorded video reproduces the original APNG's timing rather than an even, resampled frame rate.

Once the schedule's total duration has elapsed, the recorder is stopped, its collected chunks are assembled into a Blob typed with the recorder's actual negotiated mimeType, and the file is offered for download with an extension that matches those real bytes.

When To Use APNG to MP4 Converter

Use it when you need to share an animated PNG somewhere that only accepts video uploads, or when you want a version of the animation that plays natively in a <video> tag instead of an <img> tag.

It's also useful for archiving an APNG in a more universally-playable container before the original animation library or asset is lost.

Often used alongside MP4 to APNG Converter, APNG to AVI Converter and APNG to WMV Converter.

Features

Advantages

Runs entirely client-side; the uploaded APNG is never sent to a server.
Uses the browser's own real video encoder rather than a JS re-implementation, so the output is a genuinely valid, playable video file.
Names the downloaded file to match its actual encoded format instead of assuming MP4 succeeded.

Limitations

True MP4 (H.264) recording support varies by browser — it's reliable in Safari and recent Chromium-based browsers, but many other browsers/configurations will silently fall back to WebM, which this tool surfaces honestly rather than hiding.
Recording speed is real-time: a 10-second animation takes roughly 10 seconds to record, since the browser is genuinely encoding a live canvas stream rather than transcoding frames instantly.
Very short per-frame delays (a few milliseconds) can be missed if the canvas doesn't repaint fast enough for the recorder to capture every frame distinctly.

Examples

Convert a 5-frame loading spinner

Input

A 100x100 APNG, 5 frames at 200ms each (1 second total)

Output

A ~1 second MP4 or WebM video at the same 100x100 resolution

The recorder plays through the spinner's full delay schedule exactly once and stops.

MP4 unsupported browser

Input

An APNG uploaded in a browser without H.264 MediaRecorder support

Output

A converted.webm file plus a note that WebM was used instead of MP4

pickSupportedMimeType() falls through the candidate list to the first WebM variant the browser actually supports.

Best Practices & Notes

Best Practices

Keep the source APNG reasonably short — recording happens in real time, so a long animation takes just as long to convert.
Check the downloaded file's extension after conversion; it always reflects whether MP4 or WebM was actually recorded.

Developer Notes

The pure lib functions (pickSupportedMimeType, computeFrameScheduleMs, loadApngFramesForVideoExport) only handle mimeType selection, schedule math, and APNG decoding — all DOM-only work (canvas painting, captureStream, MediaRecorder, the rAF playback loop) lives in the client component, mirroring this codebase's random-video-generator precedent.

APNG to MP4 Converter Use Cases

Converting an animated PNG logo into a video for a platform that doesn't accept APNG uploads
Producing a video preview of a PNG-based animation asset
Archiving an APNG animation in a more broadly-supported video container

Common Mistakes

Assuming the download is always a real .mp4 — check whether the tool reports a WebM fallback was used.
Uploading a plain (non-animated) PNG, which has no frames to record and will be rejected.

Tips

If you specifically need true MP4 output, try Safari or a recent Chromium-based browser, which are most likely to support H.264 recording.
Preview the recorded video before downloading to confirm the timing looks right.

APNG to MP4 Converter