WebM: Browser Support, Codecs, Known Issues

What is WebM?

WebM is an open, royalty-free audio and video file format that Google introduced in May 2010 at Google I/O. It is based on a profile of the Matroska container, holds VP8, VP9, or AV1 video, and pairs that with Vorbis or Opus audio. The WebM Project, an open-source group, develops and maintains the format, and the Alliance for Open Media now stewards AV1 inside it. WebM is the default open video format on Chrome, Firefox, Opera, and Edge.

Which browsers does WebM support?

WebM works in every modern desktop browser and most mobile browsers, with Chrome, Firefox, and Opera supporting it since 2010 and 2011, and Safari adding native WebM support on macOS in April 2021 and on iOS in September 2021.

How do you check if a browser supports WebM?

You can confirm WebM support inside any browser using the HTMLMediaElement.canPlayType() API or the MediaSource.isTypeSupported() API. Both return a string that tells you whether the browser will play WebM with a given video and audio codec combination.

The canPlayType() call returns one of three values: probably (the browser is sure it can play the file), maybe (likely yes), or "" (an empty string, which means no). Test each codec combination you plan to ship: VP8 with Vorbis for the widest reach, VP9 with Opus for better quality, or AV1 with Opus for the smallest files.

Paste this snippet into the browser DevTools console to confirm WebM support for the three common codec combinations:

// Run in the DevTools console of any browser to test WebM playback.
const v = document.createElement("video");
const canVp8 = v.canPlayType('video/webm; codecs="vp8, vorbis"');
const canVp9 = v.canPlayType('video/webm; codecs="vp9, opus"');
const canAv1 = v.canPlayType('video/webm; codecs="av01.0.04M.08, opus"');

console.log("WebM with VP8 + Vorbis:", canVp8 || "no");
console.log("WebM with VP9 + Opus:", canVp9 || "no");
console.log("WebM with AV1 + Opus:", canAv1 || "no");

if (window.MediaSource) {
  console.log(
    "MSE WebM (VP9 + Opus):",
    MediaSource.isTypeSupported('video/webm; codecs="vp9, opus"')
  );
}

If every result is empty, the browser cannot play WebM and your page should fall back to MP4 with H.264. The webmproject.org/detect page also offers a one-click visual test using a small VP8 file.

What are the known issues with WebM?

WebM has the broadest open-source support of any web video format, but a few real edge cases still break in production. The biggest hits are older Safari versions, iOS playback quirks, and missing transparency in some browsers.

• Older Safari and iOS lacked support: Safari did not play WebM at all on macOS until Safari 14.1 in April 2021, and on iPhone until iOS 15 in September 2021. Sites that target visitors on macOS Big Sur 11.2, iOS 14, or older still need an MP4 fallback.
• VP9 hardware gap on older iPhones: iPhones from before iPhone XS lack a hardware VP9 decoder. iOS 15 plays WebM in software on these devices, which drains the battery faster on long videos.
• Alpha transparency is uneven: WebM supports an alpha channel for transparent overlays, but only in VP8 and VP9. Older Safari falls back to a black background instead of transparency, so design alpha effects with that fallback in mind.
• No HDR profile yet: WebM does not have a stable HDR profile shipped across browsers. Use AV1 in MP4 or HEVC in MP4 for HDR streams.
• Internet Explorer never supported it: IE never added native WebM support. The 2011 Google IE plugin no longer installs on Windows 10 or 11. Anyone on IE needs an MP4 H.264 fallback.
• WebRTC uses VP8 and VP9 separately: WebRTC video calls use VP8 or VP9 over RTP, not the WebM container. The .webm file extension does not appear in WebRTC; only the codecs do.
• Some streaming services drop WebM: YouTube serves VP9 and AV1 inside WebM, but Netflix, Disney+, and Apple TV+ ship MP4 with H.264, HEVC, or AV1, not WebM.

In my experience, the most surprising failure happens on iOS 14 and earlier. Safari silently shows the poster image and never fires the canplay event, so a JavaScript player that waits for canplay hangs forever. Always pair the <video> element with a <source type="video/mp4"> fallback when you target iPhone visitors.

Citations

All WebM version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Media container formats: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Containers
• MDN Web Docs - Web video codec guide: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs
• Wikipedia - WebM: en.wikipedia.org/wiki/WebM
• The WebM Project - Welcome to the WebM Project: webmproject.org
• The WebM Project - Playing WebM Video: webmproject.org/users
• The WebM Project - WebM Support Detection: webmproject.org/detect
• WebKit - New WebKit Features in Safari 14.1: webkit.org/blog/11648/new-webkit-features-in-safari-14-1
• Mozilla Hacks - Firefox 67 release announcement: hacks.mozilla.org/2019/05/new-in-firefox-67
• Chrome for Developers - Chrome 70 release notes: developer.chrome.com/blog/new-in-chrome-70
• Microsoft Learn - Web Media Extensions: apps.microsoft.com/detail/9n5tdp8vcmhs
• Apple Developer - iOS 15 release notes: developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-15-release-notes
• Alliance for Open Media: aomedia.org