Web Video Formats: Why Your Video Won't Play and How to Fix It

If you've ever uploaded a video to your website only to see a blank player or error message, you're not alone. Video compatibility on the web is more complex than it appears. This guide explains why videos fail to play in browsers and how to convert them to universally supported formats.

Why Videos Don't Play in Browsers

When a video refuses to play in a web browser, the cause is almost always one of these issues:

A Brief History: From Flash to HTML5

The Flash Era (2005-2017)

Before HTML5 video became standard, Adobe Flash Player dominated web video. The FLV (Flash Video) format was everywhere—YouTube, Vimeo, and countless websites relied on it. Flash offered features browsers couldn't match at the time: adaptive streaming, DRM, and interactive elements.

However, Flash had critical problems:

• Security vulnerabilities made it a constant target for malware
• Battery drain on mobile devices was severe
• No iOS support—Apple famously refused to allow Flash on iPhones
• Poor performance compared to native browser capabilities

In 2017, Adobe announced Flash's end-of-life. As of December 2020, Flash Player is dead. FLV files no longer play in any modern browser.

The HTML5 Revolution (2010-Present)

HTML5 introduced the <video> element, allowing browsers to play video natively without plugins. This was a game-changer, but it came with a catch: browser vendors couldn't agree on a single codec.

For years, the web was split:

• Safari supported only H.264 (due to Apple's patent licensing)
• Firefox initially refused H.264, supporting only Theora/Ogg
• Chrome supported both, plus WebM

Today, this war is largely over. H.264 in MP4 containers works everywhere, and WebM (VP9) has broad support as an alternative.

Current Web Video Formats

The Future: AV1 Codec

AV1 (AOMedia Video 1) is the next-generation codec developed by the Alliance for Open Media—a consortium including Google, Apple, Microsoft, Netflix, Amazon, and Meta. It promises:

• 30-50% better compression than H.264 at similar quality
• Royalty-free licensing—no patent fees, unlike H.264/H.265
• 8K and HDR support built into the specification

AV1 Browser Support (2024-2025)

While AV1 support is growing, encoding is still slow and hardware support is limited to newer devices (2020+). For now, H.264 remains the safest choice for production websites, but consider AV1 for:

• High-bandwidth video streaming (Netflix uses AV1)
• Users with modern devices and browsers
• Situations where bandwidth savings justify encoding time

HTML5 Video Code Examples

Basic Video Embed

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Multiple Format Fallback

Provide WebM for browsers that support it, with MP4 fallback:

<video controls width="640" height="360">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Video with Poster Image

<video controls poster="thumbnail.jpg" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
</video>

Responsive Video (Full Width)

<video controls style="width: 100%; height: auto;">
  <source src="video.mp4" type="video/mp4">
</video>

Important: Autoplay Restrictions

Since 2018, all major browsers block autoplay for videos with audio. This policy exists because:

• Users were frustrated by unexpected audio
• It wastes bandwidth on mobile networks
• Accessibility concerns for screen reader users

Autoplay Rules by Browser

Correct Autoplay Code

<!-- This WORKS - muted autoplay -->
<video autoplay muted loop playsinline>
  <source src="background.mp4" type="video/mp4">
</video>

<!-- This FAILS - autoplay with sound -->
<video autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

The playsinline attribute is important for iOS, which otherwise opens videos in fullscreen by default.

Workaround: Unmute on Click

<video id="bgVideo" autoplay muted loop playsinline>
  <source src="video.mp4" type="video/mp4">
</video>
<button id="unmuteBtn">🔊 Enable Sound</button>

<script>
document.getElementById('unmuteBtn').addEventListener('click', function() {
  const video = document.getElementById('bgVideo');
  video.muted = false;
  this.style.display = 'none';
});
</script>

Recommended Settings for Web Video

Convert Your Video

Need to fix a video that won't play? These tools convert any video to web-compatible formats: