RecordHTML

RecordHTML guides

How to convert an HTML5 banner to MP4

An HTML5 banner is a small website, not a video file. Its animation can depend on scripts, images, fonts and a browser timeline. Converting it to MP4 means rendering that package and recording the result. Start with the published creative from Google Web Designer or Adobe Animate, not the authoring project. The workflow below helps you prepare that output, capture the intended animation and check the delivery file without assuming that every advertising platform uses the same specification.

Create an account or sign in, then review your settings. Your URL and output format carry over. Choose your ZIP file in the recorder after signing in; no file is uploaded on this page.

1. Publish and check the HTML5 creative

In your authoring tool, publish the browser-ready HTML5 output with its accompanying assets. A project file that only opens in an editor is not enough. For Adobe Animate, confirm that you are working with HTML5 Canvas output rather than assuming a different document type can be opened by the recording browser. For Google Web Designer, test the published output rather than the editor preview alone.

Open the result in a browser and verify the complete animation: first frame, image loading, web fonts, final frame and any audio. Remove dependencies on private editor sessions or local disk paths. A production ad environment may provide variables or libraries that your standalone recording page does not have; resolve those dependencies before recording.

2. Supply a hosted URL or prepare a ZIP

A hosted http(s) URL is the simplest starting point. The recording service must be able to reach that URL and all of its required assets. Your own logged-in browser does not prove that the service has access. Avoid passwords, tokens and private information in the page or URL.

If ZIP uploads are enabled, put index.html at the archive root and keep asset references relative, such as ./images/logo.png. RecordHTML accepts up to 25 MiB compressed, 100 MiB expanded and 1,000 entries. An authoring tool may publish a differently named entry file; prepare the package so index.html loads the intended creative and check its asset references. Uploaded creatives become public to anyone with the link.

3. Match dimensions, frame rate and timing

Use the actual banner width and height, not the size of your desktop window. Common presets include 300×250, 300×600 and 728×90; custom dimensions must be even numbers and fit your account limits. Select MP4 for H.264 video. Choose the frame rate from the delivery brief, including 29.97 or 59.94 fps when required, rather than choosing a higher value automatically.

Set the recording length and choose a start delay if the creative needs time to settle. When you control the page, trim_start() and trim_end() markers can identify the intended section. These controls do not repair a page that never loads an asset or waits for a click that the recorder does not perform.

4. Choose audio and output settings deliberately

Keep audio off for silent placements and enable it only when required and permitted. Choose quality-based encoding for a review copy or a target bitrate when the destination specifies one. Crop and scaling are separate decisions: cropping removes part of the composition; scaling changes its output dimensions. Neither makes small text automatically legible on a different screen.

MP4 does not retain click-through areas, links or interactive states. A social or CTV platform may accept a video while imposing its own aspect ratio, duration, codec, audio and creative policies. Treat conversion as file creation, not automatic placement approval. MOV export is not currently offered.

5. Inspect the result before handoff

Preview the saved video from beginning to end. Check for clipped text, missing fonts, unexpected blank frames, timing changes and audio that starts too early or too late. RecordHTML captures real-time browser playback, not deterministic virtual-time animation. A complex or overloaded creative can still stutter even when the encoded video has the requested frame rate and exact frame count.

Download the actual file and measure its size against the destination specification. Keep the source package and note the recording settings so a revised campaign can be exported consistently. No verified source/output samples are published here yet, so this guide does not present invented preview files or file sizes.

Sources and scope

Checked October 22, 2026. Destination specifications and third-party tools can change. Follow the linked documentation and your actual placement brief rather than treating this guide as network approval.