Video File Formats for Web: A Quick Guide

For web delivery, MP4 with H.264 encoding is the correct default — it works in every major browser, every operating system, and every video player without configuration or plugins. If file size is a priority and your audience uses modern browsers, WebM with VP9 encoding delivers equivalent visual quality in roughly 20–30% less data.

Container Formats vs. Codecs: The Key Distinction

Understanding web video formats starts with knowing the difference between a container and a codec — two concepts that are frequently, and expensively, confused.

What a Container Does

A container (such as MP4, WebM, or MOV) is a wrapper that holds the video stream, audio stream, subtitles, and metadata in a single file. It defines the file format and the extension you see — but it does not determine how the video is compressed. Think of the container as the box and the codec as the compression method used to pack what goes inside.

What a Codec Does

A codec (such as H.264, H.265, VP9, or AV1) is the algorithm that compresses and decompresses the actual video data. The codec determines file size and quality at any given bitrate — not the container. The same MP4 container can hold video encoded with H.264 or H.265, and you'll get very different file sizes and browser support outcomes depending on which you choose.

Why This Distinction Matters for Web Publishing

When someone asks "what's the best video format for web," the complete answer requires specifying both the container and the codec. "MP4" alone is ambiguous. "MP4 with H.264" is a specific, actionable answer: the most compatible format combination for any web context. Throughout this guide, format names include the codec where it matters — for example, MP4/H.264 or WebM/VP9 — to avoid the ambiguity that leads to production mistakes.

Quick rule: the container determines the file extension and what else can ride along in the file. The codec determines quality, file size, and hardware decode support. Both matter for web delivery.

MP4 (H.264): The Universal Web Standard

MP4 with H.264 encoding is the correct default choice for web video because it achieves universal browser and device support — 100% coverage across every browser in common use today, including iOS Safari, which is notoriously restrictive about video formats.

Browser Support

According to the HTML video element documentation on MDN Web Docs, MP4/H.264 is supported natively in Chrome, Firefox, Safari, Edge, and every major mobile browser — including Safari on iOS, which cannot be replaced with alternative browsers on Apple devices. No other format matches this coverage without a fallback.

File Size and Quality at Web Bitrates

H.264 offers a practical balance between compression efficiency and computational overhead. For a one-minute video at 1080p, properly compressed MP4/H.264 typically lands in the 20–60 MB range depending on content complexity and target bitrate. Key behaviors to know:

• At 2–4 Mbps bitrate for 1080p, quality is excellent for product demos, explainers, and talking-head interviews
• Fast-motion content (animation, screencasts with rapid scrolling) requires higher bitrates to avoid compression artifacts
• Text-heavy screencasts compress remarkably well — the same CRF setting will produce a much smaller file for a SaaS dashboard walkthrough than for live-action footage
• B-frames and two-pass encoding improve efficiency at the cost of longer encode times — relevant for batch production workflows

When MP4/H.264 Is the Right Call

• Any video where you don't control or know the viewer's browser — landing pages, help center embeds, email click-throughs
• Videos that must autoplay on iOS (Safari on iOS only supports autoplay for muted MP4/H.264 videos)
• Any file distributed as a download or embed across unknown third-party contexts
• Social media uploads (all platforms accept MP4/H.264 as input and re-encode from there)

H.264 vs. H.265 (HEVC): Should You Upgrade?

H.265 delivers roughly 40–50% better compression than H.264 at equivalent visual quality. The tradeoff: browser support is uneven. Safari supports H.265 natively; Chrome and Firefox require hardware decode support, which is present on most modern devices but not guaranteed. For web delivery where you cannot control playback hardware, H.265 is not a reliable replacement for H.264. Use H.265 for local storage, Apple device delivery, or contexts where you know the playback environment supports it.

WebM (VP9 and AV1): The Modern Alternative

WebM is an open-source container format developed by Google, designed specifically for web delivery and paired with royalty-free codecs. It is the best choice for reducing file size when you can serve a fallback for browsers that don't support it.

VP9: The Mature, Production-Ready Option

VP9 is well-supported in Chrome, Firefox, Edge, and Safari 17 and later (which covers most modern Safari users). At equivalent visual quality settings, WebM/VP9 files are typically 20–30% smaller than MP4/H.264 — a meaningful reduction for landing pages and high-traffic content pages where page load speed matters. VP9 encode times are moderate — comparable to H.264 — which makes it practical for production pipelines.

AV1: The Future-Proof High-Compression Option

AV1 is the next-generation royalty-free codec developed by the Alliance for Open Media (backed by Google, Mozilla, Microsoft, Apple, and others). It achieves 30–50% better compression than VP9 at the same quality level. Browser support is solid in Chrome and Firefox, and improving in Safari. The practical limitation is encode speed: AV1 is significantly slower to encode than H.264 or VP9 — up to 10–20× slower at the same quality tier with software encoders. For large video libraries where you encode once and serve many times, this cost is worth paying. For high-frequency production workflows where turnaround is the priority, VP9 is the more practical choice.

The Two-Source Pattern for Maximum Compatibility

The standard approach for modern web video is to serve both formats and let the browser pick:

<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Modern browsers download the first format they support and ignore the rest. Chrome, Firefox, and Edge pick WebM; older or more restrictive browsers (including iOS Safari pre-17) pick MP4. This requires maintaining two encoded files, but the file size and performance improvements on the WebM path justify the storage cost for high-traffic pages.

MOV, AVI, MKV: Why These Don't Belong on the Web

Several video formats appear frequently in production workflows but are poor — or outright unsupported — choices for web delivery. Understanding why helps you avoid the mistake of publishing them without conversion.

MOV (QuickTime)

MOV is Apple's native container format, common in macOS production workflows and camera outputs (Canon, Sony, and DJI cameras often record MOV). It is supported in Safari and Chrome on desktop, but Firefox support is inconsistent and relies on the installed codec, and iOS playback via web depends on the codec inside the MOV. The larger problem: MOV files from cameras and editing software typically use production codecs (ProRes, DNXHD) or high-bitrate H.264 that produces unnecessarily large files. Always transcode MOV to a properly compressed MP4/H.264 before web delivery.

AVI (Audio Video Interleave)

AVI is a legacy Microsoft format dating to 1992. It is not supported natively in any modern browser's HTML video element. AVI files are almost always large — an AVI file from a screen recorder or camera will typically be 5–20× the size of the same content encoded as MP4/H.264. There is no scenario where publishing AVI directly to the web is the right decision. If you receive AVI files from clients or legacy systems, transcode them immediately before use.

MKV (Matroska)

MKV is a flexible open container that can hold virtually any codec, multiple audio tracks, chapter markers, and subtitles — which makes it the preferred format for archiving and local media playback. However, HTML video element support for MKV is limited and inconsistent across browsers, with no reliable cross-browser playback. MKV is the right format for master file archiving; always re-encode to MP4 or WebM before web delivery.

FLV, SWF, and Flash Formats

Flash Video (FLV) and Shockwave Flash (SWF) were dominant web video formats through the 2000s. Adobe Flash reached end-of-life in December 2020 and is permanently blocked by all major browsers. If you have legacy FLV content, transcode it to MP4/H.264 using HandBrake or FFmpeg. There is no compatibility path for Flash content in modern browsers — it simply doesn't play.

Web Video Format Comparison Table

The table below compares all major formats across browser support, relative file size, encode speed, and web suitability. Use it as a reference when making format decisions for new projects.

Browser support data is based on Can I Use's video format compatibility tables, which are updated as browser releases ship. Verify current support status there before making delivery decisions — browser support for newer codecs like AV1 is actively improving.

Video Format by Use Case

The optimal format depends on where the video is published and the priorities for that context. Landing page background videos care about load speed; product demo pages care about quality and analytics; social uploads care about universal compatibility. The table below maps common SaaS marketing use cases to format recommendations.

For teams producing product demo videos or SaaS video content at scale, format and compression standards should be codified in your content ops workflow rather than decided per video. This is one of the workflow elements covered in the VEC video editing service — writers, editors, and motion designers follow a consistent export spec so marketing receives publish-ready files without a format conversation every time.

How to Compress Video for Web

Selecting the right format is necessary but not sufficient. Compression settings determine whether your MP4/H.264 is 4 MB or 400 MB — both are technically the same "format." Here is what controls output size and quality.

The Core Export Settings

Resolution: 1080p (1920×1080) is the standard for web video content in 2026. 4K is rarely necessary for web delivery — it increases file size dramatically for an imperceptible quality difference on most screens and on any video smaller than full-viewport. Export 4K only when the content specifically benefits from it (real estate walkthroughs, high-detail product close-ups) and the hosting platform supports adaptive bitrate streaming to handle the large file gracefully.

Bitrate (constant or variable): The amount of data processed per second. For 1080p web content, common targets are:

• 2–4 Mbps for talking-head interviews, screencasts, static-background demos
• 4–8 Mbps for fast-motion content, animation, complex scene changes
• Use variable bitrate (VBR) over constant bitrate (CBR) for web delivery — VBR allocates more bits where the content needs them and saves bits on simple frames

CRF (Constant Rate Factor): A quality control setting used in x264 and x265 encoders. Lower numbers mean higher quality and larger files. For web delivery with x264 (H.264):

• CRF 18–22: Excellent quality, larger files — use for hero demo videos where quality is the priority
• CRF 23–26: Good quality at reasonable file size — standard for most web video
• CRF 27–32: Acceptable for screencasts and low-motion content where visual fidelity is less critical

Frame rate: 24 fps for cinematic content; 30 fps for standard web video; 60 fps for fast-motion demos or interactive product walkthroughs. Higher frame rates proportionally increase file size. Default to 30 fps for web unless there's a specific reason for higher.

Audio: AAC codec at 128 kbps stereo is sufficient for speech-heavy content. Use 192–256 kbps for music-heavy or high-production content where audio quality is part of the brand experience.

Tools for Web-Optimized Encoding

• HandBrake — Free, cross-platform, includes excellent web-optimized presets for H.264 and H.265. The fastest path to a properly compressed web MP4 for most teams.
• FFmpeg — Command-line, used in production automation pipelines. Can encode to any format, handle batch jobs, and integrate into CI/CD workflows. The tool of choice for technical teams processing video at scale.
• Adobe Media Encoder — Part of Adobe Creative Cloud, tightly integrated with Premiere Pro and After Effects. Strong preset library including web delivery settings for both H.264 and WebM.
• DaVinci Resolve Deliver page — Built into Resolve's free version; well-suited for H.264 and H.265 web delivery exports from finished timelines.

Screencasts and SaaS Product Demos Compress Differently

Screen recordings and product demos of SaaS interfaces compress dramatically better than camera footage. A SaaS dashboard walkthrough can often use CRF 28–32 with no visible quality loss because the screen content — flat colors, text, UI elements — has far less noise and complexity than live-action footage. Apply a dedicated preset for screencasts rather than the same settings you use for interview or brand video content. The file size difference is typically 3–5× in favor of the screencasts, which matters significantly for page load performance on product pages.

Video Hosting and Format Implications

Where your video lives determines what format you need to provide and how much format optimization work falls to you versus the hosting platform.

Self-Hosted (Your Server or CDN)

Self-hosting gives you full control over format, bitrate, and delivery — but puts all the optimization work on you. Use the two-source pattern (WebM/VP9 + MP4/H.264 fallback) and serve from a CDN to ensure acceptable load times globally. Best for: landing page background videos and ambient loops where precise load speed and autoplay behavior matter and you want zero dependency on a third-party player.

Managed Video Hosting (Wistia, Vimeo Pro)

Wistia and Vimeo accept your high-quality MP4 or MOV upload and handle the rest: transcoding to multiple formats and bitrates, adaptive bitrate streaming, global CDN delivery, and player analytics. Upload the best-quality source file you have — the platform generates optimized delivery versions. Both platforms support engagement heatmaps, A/B testing, and CRM integrations that are difficult to replicate self-hosted. For SaaS product demo pages and content where analytics inform GTM decisions, managed hosting justifies the cost. You can see how VEC integrates hosted player delivery into the production and delivery workflow.

YouTube and Social Platforms

YouTube, LinkedIn, X, Instagram, and TikTok all re-encode your upload to their own delivery format optimized for their player and CDN. Your input format matters less here — upload the highest-quality MP4/H.264 (or MOV) you have, and the platform handles format optimization for different devices and connection speeds. For YouTube specifically, the platform generates AV1 versions for modern browser playback automatically, so you get the compression benefit without the encode cost on your side.

The Right Hosting Strategy for SaaS Marketing Teams

Most SaaS teams use a hybrid: managed hosting (Wistia or Vimeo) for product demo pages, case studies, and any video where engagement analytics drive decisions; self-hosted compressed MP4/WebM for hero backgrounds and ambient video where load speed and seamless autoplay are the priority; YouTube for top-of-funnel content, organic search, and social distribution. Separating these by use case prevents the common mistake of loading a full Wistia player for a 3-second background loop, or self-hosting a product demo without the analytics infrastructure to see how people engage with it.

Frequently Asked Questions