CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>Web video codec guide - Media technologies on the web | MDN</title><link rel="alternate" title="Leitfaden zu Web-Videocodecs" href="https://developer.mozilla.org/de/docs/Web/Media/Guides/Formats/Video_codecs" hrefLang="de"/><link rel="alternate" title="ウェブ動画コーデックガイド" href="https://developer.mozilla.org/ja/docs/Web/Media/Guides/Formats/Video_codecs" hrefLang="ja"/><link rel="alternate" title="웹 비디오 코덱 가이드" href="https://developer.mozilla.org/ko/docs/Web/Media/Guides/Formats/Video_codecs" hrefLang="ko"/><link rel="alternate" title="网页视频编码指南" href="https://developer.mozilla.org/zh-CN/docs/Web/Media/Guides/Formats/Video_codecs" hrefLang="zh"/><link rel="alternate" title="Web video codec guide" href="https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs" hrefLang="en"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="This guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video."/><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs"/><meta property="og:title" content="Web video codec guide - Media technologies on the web | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="en_US"/><meta property="og:description" content="This guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-web document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/en-US/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/en-US/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/en-US/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/en-US/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/en-US/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/en-US/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/en-US/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/en-US/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/en-US/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/en-US/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/en-US/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/en-US/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/en-US/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/en-US/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FMedia%2FGuides%2FFormats%2FVideo_codecs" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fen-US%2Fdocs%2FWeb%2FMedia%2FGuides%2FFormats%2FVideo_codecs" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">References</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/Media" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Media</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/Media/Guides" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Guides</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/Media/Guides/Formats" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Media types and formats for image, audio, and video content</span></a><meta property="position" content="4"/></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/Media/Guides/Formats/Video_codecs" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Web video codec guide</span></a><meta property="position" content="5"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="de" href="/de/docs/Web/Media/Guides/Formats/Video_codecs" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Web/Media/Guides/Formats/Video_codecs" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Web/Media/Guides/Formats/Video_codecs" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Web/Media/Guides/Formats/Video_codecs" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar" data-macro="mediasidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#common_codecs">Common codecs</a></li><li class="document-toc-item "><a class="document-toc-link" href="#factors_affecting_the_encoded_video">Factors affecting the encoded video</a></li><li class="document-toc-item "><a class="document-toc-link" href="#compression_artifacts">Compression artifacts</a></li><li class="document-toc-item "><a class="document-toc-link" href="#codec_details">Codec details</a></li><li class="document-toc-item "><a class="document-toc-link" href="#choosing_a_video_codec">Choosing a video codec</a></li><li class="document-toc-item "><a class="document-toc-link" href="#see_also">See also</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/en-US/docs/Web/Media">Media</a></li><li class="section"><a href="/en-US/docs/Web/Media/Guides">Guides</a></li><li><a href="/en-US/docs/Web/Media/Guides/Images">Using images in HTML</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_manipulation">Audio and video manipulation</a></li><li><a href="/en-US/docs/Web/Media/Guides/Autoplay">Autoplay guide for media and Web Audio APIs</a></li><li><a href="/en-US/docs/Web/Media/Guides/Streaming">Streaming audio and video</a></li><li><a href="/en-US/docs/Web/Media/Guides/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML video</a></li><li class="toggle"><details><summary><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery">Audio and video delivery</a></summary><ol><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML video</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Cross-browser_audio_basics">Cross-browser audio basics</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Livestreaming web audio and video</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li><li><a href="/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/WebAudio_playbackRate_explained">Web audio playbackRate explained</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/en-US/docs/Web/Media/Guides/Formats">Media formats</a></summary><ol><li><a href="/en-US/docs/Web/Media/Guides/Formats/codecs_parameter">Codecs in common media types</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/WebRTC_codecs">Codecs used by WebRTC</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Configuring_servers_for_Ogg_media">Configuring servers for Ogg media</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Audio_concepts">Digital audio concepts</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Video_concepts">Digital video concepts</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Support_issues">Handling unsupported media</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Image_types">Image file type and format guide</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Containers">Media container formats (file types)</a></li><li><a href="/en-US/docs/Web/Media/Guides/Formats/Audio_codecs">Web audio codec guide</a></li><li><em><a href="/en-US/docs/Web/Media/Guides/Formats/Video_codecs" aria-current="page">Web video codec guide</a></em></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In this article</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#common_codecs">Common codecs</a></li><li class="document-toc-item "><a class="document-toc-link" href="#factors_affecting_the_encoded_video">Factors affecting the encoded video</a></li><li class="document-toc-item "><a class="document-toc-link" href="#compression_artifacts">Compression artifacts</a></li><li class="document-toc-item "><a class="document-toc-link" href="#codec_details">Codec details</a></li><li class="document-toc-item "><a class="document-toc-link" href="#choosing_a_video_codec">Choosing a video codec</a></li><li class="document-toc-item "><a class="document-toc-link" href="#see_also">See also</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="en-US"><header><h1>Web video codec guide</h1></header><div class="section-content"><p>This guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video.</p> <p>Due to the sheer size of uncompressed video data, it's necessary to compress it significantly in order to store it, let alone transmit it over a network. Imagine the amount of data needed to store uncompressed video:</p> <ul> <li>A single frame of high definition (1920x1080) video in full color (4 bytes per pixel) is 8,294,400 bytes.</li> <li>At a typical 30 frames per second, each second of HD video would occupy 248,832,000 bytes (~249 MB).</li> <li>A minute of HD video would need 14.93 GB of storage.</li> <li>A fairly typical 30 minute video conference would need about 447.9 GB of storage, and a 2-hour movie would take <em>almost 1.79 <strong>TB</strong> (that is, 1790 GB)</em>.</li> </ul> <p>Not only is the required storage space enormous, but the network bandwidth needed to transmit an uncompressed video like that would be enormous, at 249 MB/sec—not including audio and overhead. This is where video codecs come in. Just as audio codecs do for the sound data, video codecs compress the video data and encode it into a format that can later be decoded and played back or edited.</p> <p>Most video codecs are <strong>lossy</strong>, in that the decoded video does not precisely match the source. Some details may be lost; the amount of loss depends on the codec and how it's configured, but as a general rule, the more compression you achieve, the more loss of detail and fidelity will occur. Some lossless codecs do exist, but they are typically used for archival and storage for local playback rather than for use on a network.</p></div><section aria-labelledby="common_codecs"><h2 id="common_codecs"><a href="#common_codecs">Common codecs</a></h2><div class="section-content"><p>The following video codecs are those which are most commonly used on the web. For each codec, the containers (file types) that can support them are also listed. Each codec provides a link to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of.</p> <figure class="table-container"><table class="standard-table"> <thead> <tr> <th scope="row">Codec name (short)</th> <th scope="col">Full codec name</th> <th scope="col">Container support</th> </tr> </thead> <tbody> <tr> <th scope="row"><a href="#av1">AV1</a></th> <td>AOMedia Video 1</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> </td> </tr> <tr> <th scope="row"><a href="#avc_h.264">AVC (H.264)</a></th> <td>Advanced Video Coding</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a> </td> </tr> <tr> <th scope="row"><a href="#h.263">H.263</a></th> <td>H.263 Video</td> <td><a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a></td> </tr> <tr> <th scope="row"><a href="#hevc_h.265">HEVC (H.265)</a></th> <td>High Efficiency Video Coding</td> <td><a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a></td> </tr> <tr> <th scope="row"><a href="#mp4v-es">MP4V-ES</a></th> <td>MPEG-4 Video Elemental Stream</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a> </td> </tr> <tr> <th scope="row"><a href="#mpeg-1_part_2_video">MPEG-1</a></th> <td>MPEG-1 Part 2 Visual</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpegmpeg-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime">QuickTime</a> </td> </tr> <tr> <th scope="row"><a href="#mpeg-2_part_2_video">MPEG-2</a></th> <td>MPEG-2 Part 2 Visual</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpegmpeg-2">MPEG</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime">QuickTime</a> </td> </tr> <tr> <th scope="row"><a href="#theora">Theora</a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></th> <td>Theora</td> <td><a href="/en-US/docs/Web/Media/Guides/Formats/Containers#ogg">Ogg</a></td> </tr> <tr> <th scope="row"><a href="#vp8">VP8</a></th> <td>Video Processor 8</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> </td> </tr> <tr> <th scope="row"><a href="#vp9">VP9</a></th> <td>Video Processor 9</td> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="factors_affecting_the_encoded_video"><h2 id="factors_affecting_the_encoded_video"><a href="#factors_affecting_the_encoded_video">Factors affecting the encoded video</a></h2><div class="section-content"><p>As is the case with any encoder, there are two basic groups of factors affecting the size and quality of the encoded video: specifics about the source video's format and contents, and the characteristics and configuration of the codec used while encoding the video.</p> <p>The simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the resulting data larger as well. Thus, it's always a tradeoff of size versus quality. In some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file.</p></div></section><section aria-labelledby="effect_of_source_video_format_on_encoded_output"><h3 id="effect_of_source_video_format_on_encoded_output"><a href="#effect_of_source_video_format_on_encoded_output">Effect of source video format on encoded output</a></h3><div class="section-content"><p>The degree to which the format of the source video will affect the output varies depending on the codec and how it works. If the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference. However, things such as frame rate and, obviously, resolution will always have an impact on the output size of the media.</p> <p>Additionally, all codecs have their strengths and weaknesses. Some have trouble with specific kinds of shapes and patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities. It all depends on the underlying algorithms and mathematics.</p> <figure class="table-container"><table class="standard-table"> <caption> The potential effect of source video format and contents on the encoded video quality and size </caption> <thead> <tr> <th scope="row">Feature</th> <th scope="col">Effect on quality</th> <th scope="col">Effect on size</th> </tr> </thead> <tbody> <tr> <th scope="row">Color depth (bit depth)</th> <td> The higher the color bit depth, the higher the quality of color fidelity is achieved in the video. Additionally, in saturated portions of the image (that is, where colors are pure and intense, such as a bright, pure red: <code>rgb(255 0 0 / 100%)</code>), color depths below 10 bits per component (10-bit color) allow banding, where gradients cannot be represented without visible stepping of the colors. </td> <td> Depending on the codec, higher color depths may result in larger compressed file sizes. The determining factor is what internal storage format is used for the compressed data. </td> </tr> <tr> <th scope="row">Frame rate</th> <td> Primarily affects the perceived smoothness of the motion in the image. To a point, the higher the frame rate, the smoother and more realistic the motion will appear. Eventually the point of diminishing returns is reached. See <a href="#reduced_frame_rate">Frame rate</a> below for details. </td> <td> Assuming the frame rate is not reduced during encoding, higher frame rates cause larger compressed video sizes. </td> </tr> <tr> <th scope="row">Motion</th> <td> Compression of video typically works by comparing frames, finding where they differ, and constructing records containing enough information to update the previous frame to approximate the appearance of the following frame. The more successive frames differ from one another, the larger these differences are, and the less effective the compression is at avoiding the introduction of artifacts into the compressed video. </td> <td> The complexity introduced by motion results in larger intermediate frames due to the higher number of differences between frames). For this and other reasons, the more motion there is in a video, the larger the output file will typically be. </td> </tr> <tr> <th scope="row">Noise</th> <td> Picture noise (such as film grain effects, dust, or other grittiness to the image) introduces variability. Variability generally makes compression more difficult, resulting in more lost quality due to the need to drop details to achieve the same level of compression. </td> <td> The more variability—such as noise—there is in the image, the more complex the compression process and the less success the algorithm is likely to have compressing the image to the same degree. Unless you configure the encoder in a way that ignores some or all of the variations caused by noise, the compressed video will be larger. </td> </tr> <tr> <th scope="row">Resolution (width and height)</th> <td> Higher resolution video, presented in the same screen size, will typically be able to more accurately portray the original scene, barring effects introduced during compression. </td> <td> The higher the resolution of a video, the larger it gets. This plays a key role in the final size of the video. </td> </tr> </tbody> </table></figure> <p>The degree to which these affect the resulting encoded video will vary depending on the precise details of the situation, including which encoder you use and how it's configured. In addition to general codec options, the encoder could be configured to reduce the frame rate, to clean up noise, and/or to reduce the overall resolution of the video during encoding.</p></div></section><section aria-labelledby="effect_of_codec_configuration_on_encoded_output"><h3 id="effect_of_codec_configuration_on_encoded_output"><a href="#effect_of_codec_configuration_on_encoded_output">Effect of codec configuration on encoded output</a></h3><div class="section-content"><p>The algorithms used do encode video typically use one or more of a number of general techniques to perform their encoding. Generally speaking, any configuration option that is intended to reduce the output size of the video will probably have a negative impact on the overall quality of the video, or will introduce certain types of artifacts into the video. It's also possible to select a lossless form of encoding, which will result in a much larger encoded file but with perfect reproduction of the original video upon decoding.</p> <p>In addition, each encoder utility may have variations in how they process the source video, resulting in differences in the output quality and/or size.</p> <figure class="table-container"><table class="standard-table"> <caption> Video encoder configuration effects on quality and size </caption> <thead> <tr> <th scope="row">Feature</th> <th scope="col">Effect on quality</th> <th scope="col">Effect on size</th> </tr> </thead> <tbody> <tr> <th scope="row">Lossless compression</th> <td>No loss of quality</td> <td> Lossless compression cannot reduce the overall video size nearly as much as lossy compression; the resulting files are likely to still be too large for general usage. </td> </tr> <tr> <th scope="row">Lossy compression</th> <td> To some degree, artifacts and other forms of quality degradation will occur, depending on the specific codec and how much compression is being applied </td> <td> The more the encoded video is allowed to deviate from the source, the easier it is to accomplish higher compression rates </td> </tr> <tr> <th scope="row">Quality setting</th> <td> The higher the quality configuration, the more like the original media the encoded video will look </td> <td> In general, higher quality settings will result in larger encoded video files; the degree to which this is true varies depending on the codec </td> </tr> <tr> <th scope="row">Bit rate</th> <td>Quality generally improves with higher bit rates</td> <td>Higher bit rates inherently lead to larger output files</td> </tr> </tbody> </table></figure> <p>The options available when encoding video, and the values to be assigned to those options, will vary not only from one codec to another but depending on the encoding software you use. The documentation included with your encoding software will help you to understand the specific impact of these options on the encoded video.</p></div></section><section aria-labelledby="compression_artifacts"><h2 id="compression_artifacts"><a href="#compression_artifacts">Compression artifacts</a></h2><div class="section-content"><p><strong>Artifacts</strong> are side effects of a lossy encoding process in which the lost or rearranged data results in visibly negative effects. Once an artifact has appeared, it may linger for a while, because of how video is displayed. Each frame of video is presented by applying a set of changes to the currently-visible frame. This means that any errors or artifacts will compound over time, resulting in glitches or otherwise strange or unexpected deviations in the image that linger for a time.</p> <p>To resolve this, and to improve seek time through the video data, periodic <strong>key frames</strong> (also known as <strong>intra-frames</strong> or <strong>i-frames</strong>) are placed into the video file. The key frames are full frames, which are used to repair any damage or artifact residue that's currently visible.</p></div></section><section aria-labelledby="aliasing"><h3 id="aliasing"><a href="#aliasing">Aliasing</a></h3><div class="section-content"><p>Aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. There are many forms of aliasing; the most common ones you may see include:</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <td> <h4 id="moiré_patterns">Moiré patterns</h4> <p> A <a href="https://en.wikipedia.org/wiki/Moir%C3%A9_pattern" class="external" target="_blank"><strong>Moiré pattern</strong></a> is a large-scale spatial interference pattern produced when a pattern in the source image and the manner in which the encoder operates are slightly out of alignment spatially. The artifacts generated by the encoder then introduce strange, swirling effects in the source image's pattern upon decoding. </p> </td> <td> <a href="moire-pattern.jpg"><img alt="a brick wall showing swirling effect similar to waves due to the moire pattern" src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/moire-pattern.jpg" width="205" height="250" loading="lazy"></a> </td> </tr> <tr> <td> <h4 id="staircase_effect">Staircase effect</h4> <p> The <strong>staircase effect</strong> is a spatial artifact that occurs when diagonal straight or curved edges that should be smooth take on a jagged appearance, looking somewhat like a set of stair steps. This is the effect that is being reduced by "anti-aliasing" filters. </p> </td> <td> <a href="staircase-effect.jpg"><img alt=" Photo of diagonal lines that look like a staircase due to aliasing causing a staircase effect " src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/staircase-effect.jpg" width="452" height="548" loading="lazy"></a> </td> </tr> <tr> <td> <h4 id="wagon-wheel_effect">Wagon-wheel effect</h4> <p> The <strong>wagon-wheel effect</strong> (or <strong><a href="https://en.wikipedia.org/wiki/Stroboscopic_effect" class="external" target="_blank">stroboscopic effect</a></strong>) is the visual effect that's commonly seen in film, in which a turning wheel appears to rotate at the wrong speed, or even in reverse, due to an interaction between the frame rate and the compression algorithm. The same effect can occur with any repeating pattern that moves, such as the ties on a railway line, posts along the side of a road, and so forth. This is a temporal (time-based) aliasing issue; the speed of the rotation interferes with the frequency of the sampling performed during compression or encoding. </p> </td> <td> <a href="stroboscopic-effect.gif"><img alt="Turning wheel due to aliasing causing a wagon wheel effect." src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/stroboscopic-effect.gif" width="180" height="60" loading="lazy"></a> </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="color_edging"><h3 id="color_edging"><a href="#color_edging">Color edging</a></h3><div class="section-content"><p><strong>Color edging</strong> is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. These colors have no intentional color relationship to the contents of the frame.</p></div></section><section aria-labelledby="loss_of_sharpness"><h3 id="loss_of_sharpness"><a href="#loss_of_sharpness">Loss of sharpness</a></h3><div class="section-content"><p>The act of removing data in the process of encoding video requires that some details be lost. If enough compression is applied, parts or potentially all of the image could lose sharpness, resulting in a slightly fuzzy or hazy appearance.</p> <p>Lost sharpness can make text in the image difficult to read, as text—especially small text—is very detail-oriented content, where minor alterations can significantly impact legibility.</p></div></section><section aria-labelledby="ringing"><h3 id="ringing"><a href="#ringing">Ringing</a></h3><div class="section-content"><p>Lossy compression algorithms can introduce <strong><a href="https://en.wikipedia.org/wiki/Ringing_artifacts" class="external" target="_blank">ringing</a></strong>, an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. This happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. This is particularly common at higher compression levels.</p> <p><img src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/ringing-effects.png" alt="Example of the ringing effect" width="684" height="599" loading="lazy"></p> <p>Note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). Those fringes are the ringing effect. Ringing is similar in some respects to <a href="#mosquito_noise">mosquito noise</a>, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves.</p> <p>Ringing is another type of artifact that can make it particularly difficult to read text contained in your images.</p></div></section><section aria-labelledby="posterizing"><h3 id="posterizing"><a href="#posterizing">Posterizing</a></h3><div class="section-content"><p><strong>Posterization</strong> occurs when the compression results in the loss of color detail in gradients. Instead of smooth transitions through the various colors in a region, the image becomes blocky, with blobs of color that approximate the original appearance of the image.</p> <p><img src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/posterize-effect.jpg" alt="Bald eagle photo with blotchy resolution." width="380" height="418" loading="lazy"></p> <p>Note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background). The details of the feathers is largely lost due to these posterization artifacts.</p></div></section><section aria-labelledby="contouring"><h3 id="contouring"><a href="#contouring">Contouring</a></h3><div class="section-content"><p><strong>Contouring</strong> or <strong>color banding</strong> is a specific form of posterization in which the color blocks form bands or stripes in the image. This occurs when the video is encoded with too coarse a quantization configuration. As a result, the video's contents show a "layered" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear.</p> <p><img src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/contouring-effect.jpg" alt="Example of an image whose compression has introduced contouring" width="320" height="240" loading="lazy"></p> <p>In the example image above, note how the sky has bands of different shades of blue, instead of being a consistent gradient as the sky color changes toward the horizon. This is the contouring effect.</p></div></section><section aria-labelledby="mosquito_noise"><h3 id="mosquito_noise"><a href="#mosquito_noise">Mosquito noise</a></h3><div class="section-content"><p><strong>Mosquito noise</strong> is a temporal artifact which presents as noise or <strong>edge busyness</strong> that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to <a href="#ringing">ringing</a>.</p> <p><img src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/mosquito-effect-sm.png" alt="Example of an image whose compression has introduced mosquito noise." width="400" height="393" loading="lazy"></p> <p>The photo above shows mosquito noise in a number of places, including in the sky surrounding the bridge. In the upper-right corner, an inset shows a close-up of a portion of the image that exhibits mosquito noise.</p> <p>Mosquito noise artifacts are most commonly found in MPEG video, but can occur whenever a discrete cosine transform (DCT) algorithm is used; this includes, for example, JPEG still images.</p></div></section><section aria-labelledby="motion_compensation_block_boundary_artifacts"><h3 id="motion_compensation_block_boundary_artifacts"><a href="#motion_compensation_block_boundary_artifacts">Motion compensation block boundary artifacts</a></h3><div class="section-content"><p>Compression of video generally works by comparing two frames and recording the differences between them, one frame after another, until the end of the video. This technique works well when the camera is fixed in place, or the objects in the frame are relatively stationary, but if there is a great deal of motion in the frame, the number of differences between frames can be so great that compression doesn't do any good.</p> <p><strong><a href="https://en.wikipedia.org/wiki/Motion_compensation" class="external" target="_blank">Motion compensation</a></strong> is a technique that looks for motion (either of the camera or of objects in the frame of view) and determines how many pixels the moving object has moved in each direction. Then that shift is stored, along with a description of the pixels that have moved that can't be described just by that shift. In essence, the encoder finds the moving objects, then builds an internal frame of sorts that looks like the original but with all the objects translated to their new locations. In theory, this approximates the new frame's appearance. Then, to finish the job, the remaining differences are found, then the set of object shifts and the set of pixel differences are stored in the data representing the new frame. This object that describes the shift and the pixel differences is called a <strong>residual frame</strong>.</p> <figure class="table-container"><table class="standard-table"> <thead> <tr> <th scope="col" style="width: 216px">Original frame</th> <th scope="col" style="width: 216px">Inter-frame differences</th> <th scope="col" style="width: 216px"> Difference after motion compensation </th> </tr> </thead> <tbody> <tr> <td><img alt="Original frame of video" src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/motion-comp-orig.jpg" width="1024" height="576" loading="lazy"></td> <td><img alt="Differences between the first frame and the following frame." src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/motion-comp-diff.jpg" width="1024" height="576" loading="lazy"></td> <td> <img alt="Differences between the frames after shifting two pixels right" src="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/motion-comp-compensated.jpg" width="1024" height="576" loading="lazy"> </td> </tr> <tr> <td style="vertical-align: top"> The first full frame as seen by the viewer. </td> <td style="vertical-align: top"> Here, only the differences between the first frame and the following frame are seen. Everything else is black. Looking closely, we can see that the majority of these differences come from a horizontal camera move, making this a good candidate for motion compensation. </td> <td style="vertical-align: top"> To minimize the number of pixels that are different, here we take into account the panning of the camera by first shifting the first frame to the right by two pixels, then by taking the difference. This compensates for the panning of the camera, allowing for more overlap between the two frames. </td> </tr> <tr> <th colspan="3" style=" font: italic 0.9em Arial, x-locale-body, sans-serif; vertical-align: middle; "> Images from <a href="https://en.wikipedia.org/wiki/Motion_compensation#Illustrated_example" class="external" target="_blank">Wikipedia</a> </th> </tr> </tbody> </table></figure> <p>There are two general types of motion compensation: <strong>global motion compensation</strong> and <strong>block motion compensation</strong>. Global motion compensation generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements. Block motion compensation handles localized changes, looking for smaller sections of the image that can be encoded using motion compensation. These blocks are normally of a fixed size, in a grid, but there are forms of motion compensation that allow for variable block sizes, and even for blocks to overlap.</p> <p>There are, however, artifacts that can occur due to motion compensation. These occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. These are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next key frame.</p></div></section><section aria-labelledby="reduced_frame_size"><h3 id="reduced_frame_size"><a href="#reduced_frame_size">Reduced frame size</a></h3><div class="section-content"><p>In certain situations, it may be useful to reduce the video's dimensions in order to improve the final size of the video file. While the immediate loss of size or smoothness of playback may be a negative factor, careful decision-making can result in a good end result. If a 1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.</p></div></section><section aria-labelledby="reduced_frame_rate"><h3 id="reduced_frame_rate"><a href="#reduced_frame_rate">Reduced frame rate</a></h3><div class="section-content"><p>Similarly, you can remove frames from the video entirely and decrease the frame rate to compensate. This has two benefits: it makes the overall video smaller, and that smaller size allows motion compensation to accomplish even more for you. For example, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels of movement. This lets the overall movement of the camera be represented by fewer residual frames.</p> <p>The absolute minimum frame rate that a video can be before its contents are no longer perceived as motion by the human eye is about 12 frames per second. Less than that, and the video becomes a series of still images. Motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and 60 frames per second. Anything from 24 FPS upward will generally be seen as satisfactorily smooth; 30 or 60 FPS is an ideal target, depending on your needs.</p> <p>In the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your design team.</p></div></section><section aria-labelledby="codec_details"><h2 id="codec_details"><a href="#codec_details">Codec details</a></h2><div class="section-content"></div></section><section aria-labelledby="av1"><h3 id="av1"><a href="#av1">AV1</a></h3><div class="section-content"><p>The <strong>AOMedia Video 1</strong> (<strong>AV1</strong>) codec is an open format designed by the <a href="https://aomedia.org/" class="external" target="_blank">Alliance for Open Media</a> specifically for internet video. It achieves higher data compression rates than <a href="#vp9">VP9</a> and <a href="#hevc_h.265">H.265/HEVC</a>, and as much as 50% higher rates than <a href="#avc_h.264">AVC</a>. AV1 is fully royalty-free and is designed for use by both the <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> element and by <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>.</p> <p>AV1 currently offers three profiles: <strong>main</strong>, <strong>high</strong>, and <strong>professional</strong> with increasing support for color depths and chroma subsampling. In addition, a series of <strong>levels</strong> are specified, each defining limits on a range of attributes of the video. These attributes include frame dimensions, image area in pixels, display and decode rates, average and maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process.</p> <p>For example, AV1 level 2.0 offers a maximum frame width of 2048 pixels and a maximum height of 1152 pixels, but its maximum frame size in pixels is 147,456, so you can't actually have a 2048x1152 video at level 2.0. It's worth noting, however, that at least for Firefox and Chrome, the levels are actually ignored at this time when performing software decoding, and the decoder just does the best it can to play the video given the settings provided. For compatibility's sake going forward, however, you should stay within the limits of the level you choose.</p> <p>The primary drawback to AV1 at this time is that it is very new, and support is still in the process of being integrated into most browsers. Additionally, encoders and decoders are still being optimized for performance, and hardware encoders and decoders are still mostly in development rather than production. For this reason, encoding a video into AV1 format takes a very long time, since all the work is done in software.</p> <p>For the time being, because of these factors, AV1 is not yet ready to be your first choice of video codec, but you should watch for it to be ready to use in the future.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td> <p> Varies depending on the video's level; theoretical maximum reaches 800 Mbps at level 6.3 </p> <p> See the AV1 specification's <a href="https://aomediacodec.github.io/av1-spec/#levels" class="external" target="_blank">tables of levels</a>, which describe the maximum resolutions and rates at each level. </p> </td> </tr> <tr> <th scope="row">Supported frame rates</th> <td> Varies by level; for example, level 2.0 has a maximum of 30 FPS while level 6.3 can reach 120 FPS </td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td> 8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these </td> </tr> <tr> <th scope="row">Supported color modes</th> <td> <figure class="table-container"><table class="standard-table"> <thead> <tr> <th scope="row">Profile</th> <th scope="col">Color depths</th> <th scope="col">Chroma subsampling</th> </tr> </thead> <tbody> <tr> <th scope="row">Main</th> <td>8 or 10</td> <td>4:0:0 (greyscale) or 4:2:0</td> </tr> <tr> <th scope="row">High</th> <td>8 or 10</td> <td>4:0:0 (greyscale), 4:2:0, or 4:4:4</td> </tr> <tr> <th scope="row">Professional</th> <td>8, 10, or 12</td> <td>4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">HDR support</th> <td>Yes</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>Yes</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Firefox Android</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">AV1 support</th> <td>70</td> <td>75</td> <td>67</td> <td>113</td> <td>57</td> <td>17</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="https://en.wikipedia.org/wiki/ISO/IEC_base_media_file_format" class="external" target="_blank">ISOBMFF</a>, MPEG-TS, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>Yes</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://aomedia.org/" class="external" target="_blank">Alliance for Open Media</a></td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf" class="external" target="_blank">https://aomediacodec.github.io/av1-spec/av1-spec.pdf</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td>Royalty-free, open standard</td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="avc_h.264"><h3 id="avc_h.264"><a href="#avc_h.264">AVC (H.264)</a></h3><div class="section-content"><p>The MPEG-4 specification suite's <strong>Advanced Video Coding</strong> (<strong>AVC</strong>) standard is specified by the identical ITU H.264 specification and the MPEG-4 Part 10 specification. It's a motion compensation based codec that is widely used today for all sorts of media, including broadcast television, <a href="/en-US/docs/Glossary/RTP">RTP</a> videoconferencing, and as the video codec for Blu-Ray discs.</p> <p>AVC is highly flexible, with a number of profiles with varying capabilities; for example, the Constrained Baseline Profile is designed for use in videoconferencing and mobile scenarios, using less bandwidth than the Main Profile (which is used for standard definition digital TV in some regions) or the High Profile (used for Blu-Ray Disc video). Most of the profiles use 8-bit color components and 4:2:0 chroma subsampling; The High 10 Profile adds support for 10-bit color, and advanced forms of High 10 add 4:2:2 and 4:4:4 chroma subsampling.</p> <p>AVC also has special features such as support for multiple views of the same scene (Multiview Video Coding), which allows, among other things, the production of stereoscopic video.</p> <p>AVC is a proprietary format, however, and numerous patents are owned by multiple parties regarding its technologies. Commercial use of AVC media requires a license, though the Via LA patent pool does not require license fees for streaming internet video in AVC format as long as the video is free for end users.</p> <p>Non-web browser implementations of WebRTC (any implementation which doesn't include the JavaScript APIs) are <em>required</em> to support AVC as a codec in WebRTC calls. While web browsers are not required to do so, some do.</p> <p>In HTML content for web browsers, AVC is broadly compatible and many platforms support hardware encoding and decoding of AVC media. However, be aware of its <a href="https://www.via-la.com/licensing-2/avc-h-264/" class="external" target="_blank">licensing requirements</a> before choosing to use AVC in your project!</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Varies by level</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td>Varies by level; up to 300 FPS is possible</td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a>, though it's possible to create lossless macroblocks within the image </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td>Up to 8,192 x 4,320 pixels</td> </tr> <tr> <th scope="row">Supported color modes</th> <td> <p>Some of the more common or interesting profiles:</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Profile</th> <th scope="col">Color depths</th> <th scope="col">Chroma subsampling</th> </tr> <tr> <td>Constrained Baseline (CBP)</td> <td>8</td> <td>4:2:0</td> </tr> <tr> <td>Baseline (BP)</td> <td>8</td> <td>4:2:0</td> </tr> <tr> <td>Extended (XP)</td> <td>8</td> <td>4:2:0</td> </tr> <tr> <td>Main (MP)</td> <td>8</td> <td>4:2:0</td> </tr> <tr> <td>High (HiP)</td> <td>8</td> <td>4:0:0 (greyscale) and 4:2:0</td> </tr> <tr> <td>Progressive High (ProHiP)</td> <td>8</td> <td>4:0:0 (greyscale) and 4:2:0</td> </tr> <tr> <td>High 10 (Hi10P)</td> <td>8 to 10</td> <td>4:0:0 (greyscale) and 4:2:0</td> </tr> <tr> <td>High 4:2:2 (Hi422P)</td> <td>8 to 10</td> <td>4:0:0 (greyscale), 4:2:0, and 4:2:2</td> </tr> <tr> <td>High 4:4:4 Predictive</td> <td>8 to 14</td> <td>4:0:0 (greyscale), 4:2:0, 4:2:2, and 4:4:4</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">HDR support</th> <td> Yes; <a href="https://en.wikipedia.org/wiki/Hybrid_Log-Gamma" class="external" target="_blank">Hybrid Log-Gamma</a> or Advanced HDR/SL-HDR; both are part of ATSC </td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>Yes</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> All versions of Chrome, Edge, Firefox, Opera, and Safari <p> Firefox support for AVC is dependent upon the operating system's built-in or preinstalled codecs for AVC and its container in order to avoid patent concerns. </p> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>Yes</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td> <a href="https://mpeg.chiariglione.org/" class="external" target="_blank">MPEG</a> / <a href="https://www.itu.int/" class="external" target="_blank">ITU</a> </td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding.html" class="external" target="_blank">https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding.html</a><br><a href="https://www.itu.int/rec/T-REC-H.264" class="external" target="_blank">https://www.itu.int/rec/T-REC-H.264</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td> Proprietary with numerous patents. Commercial use <a href="https://www.via-la.com/licensing-2/avc-h-264/" class="external" target="_blank">requires a license</a>. Note that multiple patent pools may apply. </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="h.263"><h3 id="h.263"><a href="#h.263">H.263</a></h3><div class="section-content"><p>ITU's <strong>H.263</strong> codec was designed primarily for use in low-bandwidth situations. In particular, its focus is for video conferencing on PSTN (Public Switched Telephone Networks), <a href="/en-US/docs/Glossary/RTSP">RTSP</a>, and SIP (IP-based videoconferencing) systems. Despite being optimized for low-bandwidth networks, it is fairly CPU intensive and may not perform adequately on lower-end computers. The data format is similar to that of MPEG-4 Part 2.</p> <p>H.263 has never been widely used on the web. Variations on H.263 have been used as the basis for other proprietary formats, such as Flash video or the Sorenson codec. However, no major browser has ever included H.263 support by default. Certain media plugins have enabled support for H.263 media.</p> <p>Unlike most codecs, H.263 defines fundamentals of an encoded video in terms of the maximum bit rate per frame (picture), or <strong>BPPmaxKb</strong>. During encoding, a value is selected for BPPmaxKb, and then the video cannot exceed this value for each frame. The final bit rate will depend on this, the frame rate, the compression, and the chosen resolution and block format.</p> <p>H.263 has been superseded by H.264 and is therefore considered a legacy media format which you generally should avoid using if you can. The only real reason to use H.263 in new projects is if you require support on very old devices on which H.263 is your best choice.</p> <p>H.263 is a proprietary format, with <a href="https://www.itu.int/ITU-T/recommendations/related_ps.aspx?id_prod=4242" class="external" target="_blank">patents</a> held by a number of organizations and companies, including Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm, and so on. To use H.263, you are legally obligated to obtain the appropriate licenses.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Unrestricted, but typically below 64 kbps</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td>Any</td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td> <p>Up to 1408 x 1152 pixels.</p> <p> Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions. </p> </td> </tr> <tr> <th scope="row">Supported color modes</th> <td> YCbCr; each picture format (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF) defines the frame size in pixels as well as how many rows each of luminance and chrominance samples are used for each frame </td> </tr> <tr> <th scope="row">HDR support</th> <td>No</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>No</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">H.263 support</th> <td>No</td> <td>No</td> <td>No</td> <td>No</td> <td>No</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime">QuickTime</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>No</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://www.itu.int/" class="external" target="_blank">ITU</a></td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://www.itu.int/rec/T-REC-H.263/" class="external" target="_blank">https://www.itu.int/rec/T-REC-H.263/</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td> Proprietary; appropriate license or licenses are required. Note that multiple patent pools may apply. </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="hevc_h.265"><h3 id="hevc_h.265"><a href="#hevc_h.265">HEVC (H.265)</a></h3><div class="section-content"><p>The <strong><a href="http://hevc.info/" class="external" target="_blank">High Efficiency Video Coding</a></strong> (<strong>HEVC</strong>) codec is defined by ITU's <strong>H.265</strong> as well as by MPEG-H Part 2 (the still in-development follow-up to MPEG-4). HEVC was designed to support efficient encoding and decoding of video in sizes including very high resolutions (including 8K video), with a structure specifically designed to let software take advantage of modern processors. Theoretically, HEVC can achieve compressed file sizes half that of <a href="#avc_h.264">AVC</a> but with comparable image quality.</p> <p>For example, each coding tree unit (CTU)—similar to the macroblock used in previous codecs—consists of a tree of luma values for each sample as well as a tree of chroma values for each chroma sample used in the same coding tree unit, as well as any required syntax elements. This structure supports easy processing by multiple cores.</p> <p>An interesting feature of HEVC is that the main profile supports only 8-bit per component color with 4:2:0 chroma subsampling. Also interesting is that 4:4:4 video is handled specially. Instead of having the luma samples (representing the image's pixels in grayscale) and the Cb and Cr samples (indicating how to alter the grays to create color pixels), the three channels are instead treated as three monochrome images, one for each color, which are then combined during rendering to produce a full-color image.</p> <p>HEVC is a proprietary format and is covered by a number of patents. Licensing is <a href="https://www.via-la.com/licensing-2/hevc-vvc/" class="external" target="_blank">managed by Via LA</a>; fees are charged to developers rather than to content producers and distributors. Be sure to review the latest license terms and requirements before making a decision on whether or not to use HEVC in your app or website!</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Up to 800,000 kbps</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td>Varies by level; up to 300 FPS is possible</td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td>128 x 96 to 8,192 x 4,320 pixels; varies by profile and level</td> </tr> <tr> <th scope="row">Supported color modes</th> <td> <p> Information below is provided for the major profiles. There are a number of other profiles available that are not included here. </p> <figure class="table-container"><table class="standard-table"> <thead> <tr> <th scope="col">Profile</th> <th scope="col">Color depths</th> <th scope="col">Chroma subsampling</th> </tr> </thead> <tbody> <tr> <td>Main</td> <td>8</td> <td>4:2:0</td> </tr> <tr> <td>Main 10</td> <td>8 to 10</td> <td>4:2:0</td> </tr> <tr> <td>Main 12</td> <td>8 to 12</td> <td>4:0:0 and 4:2:0</td> </tr> <tr> <td>Main 4:2:2 10</td> <td>8 to 10</td> <td>4:0:0, 4:2:0, and 4:2:2</td> </tr> <tr> <td>Main 4:2:2 12</td> <td>8 to 12</td> <td>4:0:0, 4:2:0, and 4:2:2</td> </tr> <tr> <td>Main 4:4:4</td> <td>8</td> <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> </tr> <tr> <td>Main 4:4:4 10</td> <td>8 to 10</td> <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> </tr> <tr> <td>Main 4:4:4 12</td> <td>8 to 12</td> <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> </tr> <tr> <td>Main 4:4:4 16 Intra</td> <td>8 to 16</td> <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">HDR support</th> <td>Yes</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>Yes</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">HEVC / H.265 support</th> <td>107</td> <td>18</td> <td>No</td> <td>94</td> <td>11</td> </tr> </tbody> </table></figure> <p>Chrome support HEVC for devices with hardware support on Windows 8+, Linux and ChromeOS, for all devices on macOS Big Sur 11+ and Android 5.0+.</p> <p>Edge (Chromium) supports HEVC for devices with hardware support on Windows 10 1709+ when <a href="https://apps.microsoft.com/detail/9nmzlz57r3t7" class="external" target="_blank">HEVC video extensions from the Microsoft Store</a> is installed, and has the same support status as Chrome on other platforms. Edge (Legacy) only supports HEVC for devices with a hardware decoder. </p> <p>Mozilla will not support HEVC while it is encumbered by patents.</p> <p>Opera and other Chromium based browsers have the same support status as Chrome.</p> <p>Safari supports HEVC for all devices on macOS High Sierra or later.</p> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="https://en.wikipedia.org/wiki/ISO/IEC_base_media_file_format" class="external" target="_blank">ISOBMFF</a>, MPEG-TS, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime">QuickTime</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>No</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td> <a href="https://www.itu.int/" class="external" target="_blank">ITU</a> / <a href="https://mpeg.chiariglione.org/" class="external" target="_blank">MPEG</a> </td> </tr> <tr> <th scope="row">Specifications</th> <td> <a href="https://www.itu.int/rec/T-REC-H.265" class="external" target="_blank">http://www.itu.int/rec/T-REC-H.265</a><br><a href="https://www.iso.org/standard/69668.html" class="external" target="_blank">https://www.iso.org/standard/69668.html</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td> Proprietary; confirm your compliance with the <a href="https://www.via-la.com/licensing-2/hevc-vvc/" class="external" target="_blank">licensing requirements</a>. Note that multiple patent pools may apply. </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="mp4v-es"><h3 id="mp4v-es"><a href="#mp4v-es">MP4V-ES</a></h3><div class="section-content"><p>The <strong>MPEG-4 Video Elemental Stream</strong> (<strong>MP4V-ES</strong>) format is part of the MPEG-4 Part 2 Visual standard. While in general, MPEG-4 part 2 video is not used by anyone because of its lack of compelling value related to other codecs, MP4V-ES does have some usage on mobile. MP4V is essentially H.263 encoding in an MPEG-4 container.</p> <p>Its primary purpose is to be used to stream MPEG-4 audio and video over an <a href="/en-US/docs/Glossary/RTP">RTP</a> session. However, MP4V-ES is also used to transmit MPEG-4 audio and video over a mobile connection using <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>.</p> <p>You almost certainly don't want to use this format, since it isn't supported in a meaningful way by any major browsers, and is quite obsolete. Files of this type should have the extension <code>.mp4v</code>, but sometimes are inaccurately labeled <code>.mp4</code>.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>5 kbps to 1 Gbps and more</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td>No specific limit; restricted only by the data rate</td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td>Up to 4,096 x 4,096 pixels</td> </tr> <tr> <th scope="row">Supported color modes</th> <td> YCrCb with chroma subsampling (4:2:0, 4:2:2, and 4:4:4) supported; up to 12 bits per component </td> </tr> <tr> <th scope="row">HDR support</th> <td>No</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>Yes</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">MP4V-ES support</th> <td>No</td> <td>No</td> <td>Yes</td> <td>No</td> <td>No</td> </tr> </tbody> </table></figure> <p> Firefox supports MP4V-ES in <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a> containers only. </p> <p>Chrome does not support MP4V-ES; however, ChromeOS does.</p> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>No</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://mpeg.chiariglione.org/" class="external" target="_blank">MPEG</a></td> </tr> <tr> <th scope="row">Specification</th> <td><a href="https://datatracker.ietf.org/doc/html/rfc6416" class="external" target="_blank">RFC 6416</a></td> </tr> <tr> <th scope="row">Licensing</th> <td> Proprietary; <a href="https://www.via-la.com/licensing-2/mpeg-4-visual/" class="external" target="_blank">obtain a license</a> through <a href="https://www.via-la.com/" class="external" target="_blank">Via LA</a> and/or <a href="https://about.att.com/innovation/ip/patents" class="external" target="_blank">AT&T</a> as needed </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="mpeg-1_part_2_video"><h3 id="mpeg-1_part_2_video"><a href="#mpeg-1_part_2_video">MPEG-1 Part 2 Video</a></h3><div class="section-content"><p><strong>MPEG-1 Part 2 Video</strong> was unveiled at the beginning of the 1990s. Unlike the later MPEG video standards, MPEG-1 was created solely by MPEG, without the <a href="/en-US/docs/Glossary/ITU">ITU's</a> involvement.</p> <p>Because any MPEG-2 decoder can also play MPEG-1 video, it's compatible with a wide variety of software and hardware devices. There are no active patents remaining in relation to MPEG-1 video, so it may be used free of any licensing concerns. However, few web browsers support MPEG-1 video without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-1 a poor choice for use in websites and web applications.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Up to 1.5 Mbps</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td> 23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, and 60 FPS </td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td>Up to 4,095 x 4,095 pixels</td> </tr> <tr> <th scope="row">Supported color modes</th> <td> Y'CbCr with 4:2:0 chroma subsampling with up to 12 bits per component </td> </tr> <tr> <th scope="row">HDR support</th> <td>No</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>No</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">MPEG-1 support</th> <td>No</td> <td>No</td> <td>No</td> <td>No</td> <td>Yes</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">Container support</th> <td>MPEG</td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>No</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://mpeg.chiariglione.org/" class="external" target="_blank">MPEG</a></td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://www.iso.org/standard/22411.html" class="external" target="_blank">https://www.iso.org/standard/22411.html</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td> Proprietary; however, all patents have expired, so MPEG-1 may be used freely </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="mpeg-2_part_2_video"><h3 id="mpeg-2_part_2_video"><a href="#mpeg-2_part_2_video">MPEG-2 Part 2 Video</a></h3><div class="section-content"><p><strong><a href="https://en.wikipedia.org/wiki/H.262/MPEG-2_Part_2" class="external" target="_blank">MPEG-2 Part 2</a></strong> is the video format defined by the MPEG-2 specification, and is also occasionally referred to by its <a href="/en-US/docs/Glossary/ITU">ITU</a> designation, H.262. It is very similar to MPEG-1 video—in fact, any MPEG-2 player can automatically handle MPEG-1 without any special work—except it has been expanded to support higher bit rates and enhanced encoding techniques.</p> <p>The goal was to allow MPEG-2 to compress standard definition television, so interlaced video is also supported. The standard definition compression rate and the quality of the resulting video met needs well enough that MPEG-2 is the primary video codec used for DVD video media.</p> <p>MPEG-2 has several profiles available with different capabilities. Each profile is then available four levels, each of which increases attributes of the video, such as frame rate, resolution, bit rate, and so forth. Most profiles use Y'CbCr with 4:2:0 chroma subsampling, but more advanced profiles support 4:2:2 as well. In addition, there are four levels, each of which offers support for larger frame dimensions and bit rates. For example, the <a href="https://en.wikipedia.org/wiki/ATSC_standards" class="external" target="_blank">ATSC</a> specification for television used in North America supports MPEG-2 video in high definition using the Main Profile at High Level, allowing 4:2:0 video at both 1920 x 1080 (30 FPS) and 1280 x 720 (60 FPS), at a maximum bit rate of 80 Mbps.</p> <p>However, few web browsers support MPEG-2 without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-2 a poor choice for use in websites and web applications.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Up to 100 Mbps; varies by level and profile</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td> <figure class="table-container"><table class="standard-table"> <thead> <tr> <th scope="row">Abbr.</th> <th scope="col">Level name</th> <th scope="col">Frame rates supported</th> </tr> </thead> <tbody> <tr> <th scope="row">LL</th> <td>Low Level</td> <td>23.9, 24, 25, 29.97, 30</td> </tr> <tr> <th scope="row">ML</th> <td>Main Level</td> <td>23.976, 24, 25, 29.97, 30</td> </tr> <tr> <th scope="row">H-14</th> <td>High 1440</td> <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td> </tr> <tr> <th scope="row">HL</th> <td>High Level</td> <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Abbr.</th> <th scope="col">Level name</th> <th scope="col">Maximum frame size</th> </tr> <tr> <th scope="row">LL</th> <td>Low Level</td> <td>352 x 288 pixels</td> </tr> <tr> <th scope="row">ML</th> <td>Main Level</td> <td>720 x 576 pixels</td> </tr> <tr> <th scope="row">H-14</th> <td>High 1440</td> <td>1440 x 1152 pixels</td> </tr> <tr> <th scope="row">HL</th> <td>High Level</td> <td>1920 x 1152 pixels</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">Supported color modes</th> <td> Y'CbCr with 4:2:0 chroma subsampling in most profiles; the "High" and "4:2:2" profiles support 4:2:2 chroma subsampling as well. </td> </tr> <tr> <th scope="row">HDR support</th> <td>No</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>No</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">MPEG-2 support</th> <td>No</td> <td>No</td> <td>No</td> <td>No</td> <td>Yes</td> </tr> </tbody> </table></figure> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpegmpeg-2">MPEG</a>, MPEG-TS (MPEG Transport Stream), <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime">QuickTime</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>No</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td> <a href="https://mpeg.chiariglione.org/" class="external" target="_blank">MPEG</a> / <a href="https://www.itu.int/" class="external" target="_blank">ITU</a> </td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://www.itu.int/rec/T-REC-H.262" class="external" target="_blank">https://www.itu.int/rec/T-REC-H.262</a><br><a href="https://www.iso.org/standard/61152.html" class="external" target="_blank">https://www.iso.org/standard/61152.html</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td> Proprietary; all patents have expired worldwide with the exception of in Malaysia (as of October 1, 2024), so MPEG-2 can be used freely outside of Malaysia. Patents are licensed by <a href="https://www.via-la.com/licensing-2/mpeg-2/" class="external" target="_blank">Via LA</a>. </td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="theora"><h3 id="theora"><a href="#theora">Theora</a></h3><div class="section-content"><div class="notecard warning"> <p><strong>Warning:</strong> This codec is no longer recommended. It has extremely small usage, and support is being removed from browsers.</p> </div> <p><strong><a href="https://en.wikipedia.org/wiki/Theora" class="external" target="_blank">Theora</a></strong>, developed by <a href="https://xiph.org/" class="external" target="_blank">Xiph.org</a>, is an open and free video codec which may be used without royalties or licensing. Theora is comparable in quality and compression rates to MPEG-4 Part 2 Visual and AVC, making it a very good if not top-of-the-line choice for video encoding. But its status as being free from any licensing concerns and its relatively low CPU resource requirements make it a popular choice for many software and web projects. The low CPU impact is particularly useful since there are no hardware decoders available for Theora.</p> <p>Theora was originally based upon the VC3 codec by On2 Technologies. The codec and its specification were released under the LGPL license and entrusted to Xiph.org, which then developed it into the Theora standard.</p> <p>One drawback to Theora is that it only supports 8 bits per color component, with no option to use 10 or more in order to avoid color banding. That said, 8 bits per component is still the most commonly-used color format in use today, so this is only a minor inconvenience in most cases. Also, Theora can only be used in an Ogg container. The biggest drawback of all, however, is that it is not supported by Safari, leaving Theora unavailable not only on macOS but on all those millions and millions of iPhones and iPads.</p> <p>The <a href="https://en.flossmanuals.net/ogg-theora/_full/" class="external" target="_blank">Theora Cookbook</a> offers additional details about Theora as well as the Ogg container format it is used within.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Up to 2 Gbps</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td> Arbitrary; any non-zero value is supported. The frame rate is specified as a 32-bit numerator and a 32-bit denominator, to allow for non-integer frame rates. </td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td> Any combination of width and height up to 1,048,560 x 1,048,560 pixels </td> </tr> <tr> <th scope="row">Supported color modes</th> <td> Y'CbCr with 4:2:0, 4:2:2, and 4:4:4 chroma subsampling at 8 bits per component </td> </tr> <tr> <th scope="row">HDR support</th> <td>No</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td> <p>Yes</p> <p> While Theora doesn't support Variable Frame Rate (VFR) within a single stream, multiple streams can be chained together within a single file, and each of those can have its own frame rate, thus allowing what is essentially VFR. However, this is impractical if the frame rate needs to change frequently. </p> </td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Feature</th> <th scope="col">Chrome</th> <th scope="col">Edge</th> <th scope="col">Firefox</th> <th scope="col">Opera</th> <th scope="col">Safari</th> </tr> <tr> <th scope="row">Theora support</th> <td>3 to 121</td> <td>12 to 121</td> <td>3.5 to 126</td> <td>10.5 to 107</td> <td>No</td> </tr> </tbody> </table></figure> <p> Edge supports Theora with the optional <a href="https://apps.microsoft.com/detail/9n5tdp8vcmhs" class="external" target="_blank">Web Media Extensions</a> add-on. </p> </td> </tr> <tr> <th scope="row">Container support</th> <td><a href="/en-US/docs/Web/Media/Guides/Formats/Containers#ogg">Ogg</a></td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>No</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://www.xiph.org/" class="external" target="_blank">Xiph.org</a></td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://www.theora.org/doc/" class="external" target="_blank">https://www.theora.org/doc/</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td>Open and free of royalties and any other licensing requirements</td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="vp8"><h3 id="vp8"><a href="#vp8">VP8</a></h3><div class="section-content"><p>The <strong>Video Processor 8</strong> (<strong>VP8</strong>) codec was initially created by On2 Technologies. Following their purchase of On2, Google released VP8 as an open and royalty-free video format under a promise not to enforce the relevant patents. In terms of quality and compression rate, VP8 is comparable to <a href="#avc_h.264">AVC</a>.</p> <p>If supported by the browser, VP8 allows video with an alpha channel, allowing the video to play with the background able to be seen through the video to a degree specified by each pixel's alpha component.</p> <p>There is good browser support for VP8 in HTML content, especially within <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> files. This makes VP8 a good candidate for your content, although VP9 is an even better choice if available to you. Web browsers are <em>required</em> to support VP8 for WebRTC, but not all browsers that do so also support it in HTML audio and video elements.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Arbitrary; no maximum unless level-based limitations are enforced</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td>Arbitrary</td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td>Up to 16,384 x 16,384 pixels</td> </tr> <tr> <th scope="row">Supported color modes</th> <td>Y'CbCr with 4:2:0 chroma subsampling at 8 bits per component</td> </tr> <tr> <th scope="row">HDR support</th> <td>No</td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>Yes</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <p>All versions of Chrome, Edge, Firefox, Opera, and Safari</p><p> </p><p><a href="https://webkit.org/blog/8672/on-the-road-to-webrtc-1-0-including-vp8/" class="external" target="_blank">iOS: Safari 12.1</a> and later support VP8 in WebRTC connections only.</p> <p>Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use <a href="/en-US/docs/Web/API/MediaSource/isTypeSupported_static" title="MediaSource.isTypeSupported()"><code>MediaSource.isTypeSupported()</code></a> to check for availability.</p> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#3gp">3GP</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>Yes; VP8 is one of the spec-required codecs for WebRTC</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://www.google.com/" class="external" target="_blank">Google</a></td> </tr> <tr> <th scope="row">Specification</th> <td><a href="https://datatracker.ietf.org/doc/html/rfc6386" class="external" target="_blank">RFC 6386</a></td> </tr> <tr> <th scope="row">Licensing</th> <td>Open and free of royalties and any other licensing requirements</td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="vp9"><h3 id="vp9"><a href="#vp9">VP9</a></h3><div class="section-content"><p><strong>Video Processor 9</strong> (<strong>VP9</strong>) is the successor to the older VP8 standard developed by Google. Like VP8, VP9 is entirely open and royalty-free. Its encoding and decoding performance is comparable to or slightly faster than that of AVC, but with better quality. VP9's encoded video quality is comparable to that of HEVC at similar bit rates.</p> <p>VP9's main profile supports only 8-bit color depth at 4:2:0 chroma subsampling levels, but its profiles include support for deeper color and the full range of chroma subsampling modes. It supports several HDR implementations, and offers substantial freedom in selecting frame rates, aspect ratios, and frame sizes.</p> <p>VP9 is widely supported by browsers, and hardware implementations of the codec are fairly common. VP9 is one of the two video codecs mandated by <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> (the other being <a href="#vp8">VP8</a>). Note however that Safari support for WebM and VP9 was only introduced in version 14.1, so if you choose to use VP9, consider offering a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users.</p> <p>VP9 is a good choice if you are able to use a WebM container (and can provide fallback video when needed). This is especially true if you wish to use an open codec rather than a proprietary one.</p> <figure class="table-container"><table class="standard-table"> <tbody> <tr> <th scope="row">Supported bit rates</th> <td>Arbitrary; no maximum unless level-based limitations are enforced</td> </tr> <tr> <th scope="row">Supported frame rates</th> <td>Arbitrary</td> </tr> <tr> <th scope="row">Compression</th> <td> Lossy <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform" class="external" target="_blank">DCT-based algorithm</a> </td> </tr> <tr> <th scope="row">Supported frame sizes</th> <td>Up to 65,536 x 65,536 pixels</td> </tr> <tr> <th scope="row">Supported color modes</th> <td> <figure class="table-container"><table class="standard-table"> <thead> <tr> <th scope="row">Profile</th> <th scope="col">Color depths</th> <th scope="col">Chroma subsampling</th> </tr> </thead> <tbody> <tr> <th scope="row">Profile 0</th> <td>8</td> <td>4:2:0</td> </tr> <tr> <th scope="row">Profile 1</th> <td>8</td> <td>4:2:0, 4:2:2, and 4:4:4</td> </tr> <tr> <th scope="row">Profile 2</th> <td>10 to 12</td> <td>4:2:0</td> </tr> <tr> <th scope="row">Profile 3</th> <td>10 to 12</td> <td>4:2:0, 4:2:2, and f:4:4</td> </tr> </tbody> </table></figure> <p> Color spaces supported: <a href="https://en.wikipedia.org/wiki/Rec._601" class="external" target="_blank">Rec. 601</a>, <a href="https://en.wikipedia.org/wiki/Rec._709" class="external" target="_blank">Rec. 709</a>, <a href="https://en.wikipedia.org/wiki/Rec._2020" class="external" target="_blank">Rec. 2020</a>, <a href="https://en.wikipedia.org/wiki/SMPTE_C" class="external" target="_blank">SMPTE C</a>, SMPTE-240M (obsolete; replaced by Rec. 709), and <a href="https://en.wikipedia.org/wiki/SRGB" class="external" target="_blank">sRGB</a>. </p> </td> </tr> <tr> <th scope="row">HDR support</th> <td> Yes; HDR10+, <a href="https://en.wikipedia.org/wiki/Hybrid_Log-Gamma" class="external" target="_blank">HLG</a>, and <a href="https://en.wikipedia.org/wiki/Perceptual_Quantizer" class="external" target="_blank">PQ</a> </td> </tr> <tr> <th scope="row">Variable Frame Rate (VFR) support</th> <td>Yes</td> </tr> <tr> <th scope="row">Browser compatibility</th> <td> <p>All versions of Chrome, Edge, Firefox, Opera, and Safari</p><p> </p><p> Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use <a href="/en-US/docs/Web/API/MediaSource/isTypeSupported_static" title="MediaSource.isTypeSupported()"><code>MediaSource.isTypeSupported()</code></a> to check for availability. </p> </td> </tr> <tr> <th scope="row">Container support</th> <td> <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#ogg">Ogg</a>, <a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a> </td> </tr> <tr> <th scope="row"> <a href="/en-US/docs/Glossary/RTP">RTP</a> / <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> compatible </th> <td>Yes</td> </tr> <tr> <th scope="row">Supporting/Maintaining organization</th> <td><a href="https://www.google.com/" class="external" target="_blank">Google</a></td> </tr> <tr> <th scope="row">Specification</th> <td> <a href="https://www.webmproject.org/vp9/" class="external" target="_blank">https://www.webmproject.org/vp9/</a> </td> </tr> <tr> <th scope="row">Licensing</th> <td>Open and free of royalties and any other licensing requirements</td> </tr> </tbody> </table></figure></div></section><section aria-labelledby="choosing_a_video_codec"><h2 id="choosing_a_video_codec"><a href="#choosing_a_video_codec">Choosing a video codec</a></h2><div class="section-content"><p>The decision as to which codec or codecs to use begins with a series of questions to prepare yourself:</p> <ul> <li>Do you wish to use an open format, or are proprietary formats also to be considered?</li> <li>Do you have the resources to produce more than one format for each of your videos? The ability to provide a fallback option vastly simplifies the decision-making process.</li> <li>Are there any browsers you're willing to sacrifice compatibility with?</li> <li>How old is the oldest version of web browser you need to support? For example, do you need to work on every browser shipped in the past five years, or just the past one year?</li> </ul> <p>In the sections below, we offer recommended codec selections for specific use cases. For each use case, you'll find up to two recommendations. If the codec which is considered best for the use case is proprietary or may require royalty payments, then two options are provided: first, an open and royalty-free option, followed by the proprietary one.</p> <p>If you are only able to offer a single version of each video, you can choose the format that's most appropriate for your needs. The first one is recommended as being a good combination of quality, performance, and compatibility. The second option will be the most broadly compatible choice, at the expense of some amount of quality, performance, and/or size.</p></div></section><section aria-labelledby="recommendations_for_everyday_videos"><h3 id="recommendations_for_everyday_videos"><a href="#recommendations_for_everyday_videos">Recommendations for everyday videos</a></h3><div class="section-content"><p>First, let's look at the best options for videos presented on a typical website such as a blog, informational site, small business website where videos are used to demonstrate products (but not where the videos themselves are a product), and so forth.</p> <ol> <li> <p>A <strong><a href="/en-US/docs/Web/Media/Guides/Formats/Containers#webm">WebM</a></strong> container using the <strong><a href="#vp9">VP9</a></strong> codec for video and the <strong><a href="/en-US/docs/Web/Media/Guides/Formats/Audio_codecs#opus">Opus</a></strong> codec for audio. These are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><video controls src="filename.webm"></video> </code></pre></div> </li> <li> <p>An <strong><a href="/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4">MP4</a></strong> container and the <strong><a href="#avc_h.264">AVC</a></strong> (<strong>H.264</strong>) video codec, ideally with <strong><a href="/en-US/docs/Web/Media/Guides/Formats/Audio_codecs#aac_advanced_audio_coding">AAC</a></strong> as your audio codec. This is because the MP4 container with AVC and AAC codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. Make sure you verify your compliance with the license requirements, however.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><video controls> <source type="video/webm" src="filename.webm" /> <source type="video/mp4" src="filename.mp4" /> </video> </code></pre></div> </li> </ol> <div class="notecard note"> <p><strong>Note:</strong> The <a href="/en-US/docs/Web/HTML/Element/video"><code><video></code></a> element requires a closing <code></video></code> tag, whether or not you have any <a href="/en-US/docs/Web/HTML/Element/source"><code><source></code></a> elements inside it.</p> </div></div></section><section aria-labelledby="recommendations_for_high-quality_video_presentation"><h3 id="recommendations_for_high-quality_video_presentation"><a href="#recommendations_for_high-quality_video_presentation">Recommendations for high-quality video presentation</a></h3><div class="section-content"><p>If your mission is to present video at the highest possible quality, you will probably benefit from offering as many formats as possible, as the codecs capable of the best quality tend also to be the newest, and thus the most likely to have gaps in browser compatibility.</p> <ol> <li> <p>A WebM container using AV1 for video and Opus for audio. If you're able to use the High or Professional profile when encoding AV1, at a high level like 6.3, you can get very high bit rates at 4K or 8K resolution, while maintaining excellent video quality. Encoding your audio using Opus's Fullband profile at a 48 kHz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><video controls src="filename.webm"></video> </code></pre></div> </li> <li> <p>An MP4 container using the <a href="#hevc_h.265">HEVC</a> codec using one of the advanced Main profiles, such as Main 4:2:2 with 10 or 12 bits of color depth, or even the Main 4:4:4 profile at up to 16 bits per component. At a high bit rate, this provides excellent graphics quality with remarkable color reproduction. In addition, you can optionally include HDR metadata to provide high dynamic range video. For audio, use the AAC codec at a high sample rate (at least 48 kHz but ideally 96kHz) and encoded with complex encoding rather than fast encoding.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><video controls> <source type="video/webm" src="filename.webm" /> <source type="video/mp4" src="filename.mp4" /> </video> </code></pre></div> </li> </ol></div></section><section aria-labelledby="recommendations_for_archival_editing_or_remixing"><h3 id="recommendations_for_archival_editing_or_remixing"><a href="#recommendations_for_archival_editing_or_remixing">Recommendations for archival, editing, or remixing</a></h3><div class="section-content"><p>There are not currently any lossless—or even near-lossless—video codecs generally available in web browsers. The reason for this is simple: video is huge. Lossless compression is by definition less effective than lossy compression. For example, uncompressed 1080p video (1920 by 1080 pixels) with 4:2:0 chroma subsampling needs at least 1.5 Gbps. Using lossless compression such as FFV1 (which is not supported by web browsers) could perhaps reduce that to somewhere around 600 Mbps, depending on the content. That's still a huge number of bits to pump through a connection every second, and is not currently practical for any real-world use.</p> <p>This is the case even though some of the lossy codecs have a lossless mode available; the lossless modes are not implemented in any current web browsers. The best you can do is to select a high-quality codec that uses lossy compression and configure it to perform as little compression as possible. One way to do this is to configure the codec to use "fast" compression, which inherently means less compression is achieved.</p> <h4 id="preparing_video_externally">Preparing video externally</h4> <p>To prepare video for archival purposes from outside your website or app, use a utility that performs compression on the original uncompressed video data. For example, the free <a href="https://www.videolan.org/developers/x264.html" class="external" target="_blank">x264</a> utility can be used to encode video in <a href="#avc_h.264">AVC</a> format using a very high bit rate:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>x264 --crf 18 -preset ultrafast --output out-file.mp4 infile </code></pre></div> <p>While other codecs may have better best-case quality levels when compressing the video by a significant margin, their encoders tend to be slow enough that the nearly-lossless encoding you get with this compression is vastly faster at about the same overall quality level.</p> <h4 id="recording_video">Recording video</h4> <p>Given the constraints on how close to lossless you can get, you might consider using <a href="#avc_h.264">AVC</a> or <a href="#av1">AV1</a>. For example, if you're using the <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> to record video, you might use code like the following when creating your <a href="/en-US/docs/Web/API/MediaRecorder"><code>MediaRecorder</code></a> object:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const kbps = 1024; const Mbps = kbps * kbps; const options = { mimeType: 'video/webm; codecs="av01.2.19H.12.0.000.09.16.09.1, flac"', bitsPerSecond: 800 * Mbps, }; let recorder = new MediaRecorder(sourceStream, options); </code></pre></div> <p>This example creates a <code>MediaRecorder</code> configured to record <a href="#av1">AV1</a> video using BT.2100 HDR in 12-bit color with 4:4:4 chroma subsampling and <a href="/en-US/docs/Web/Media/Guides/Formats/Audio_codecs#flac_free_lossless_audio_codec">FLAC</a> for lossless audio. The resulting file will use a bit rate of no more than 800 Mbps shared between the video and audio tracks. You will likely need to adjust these values depending on hardware performance, your requirements, and the specific codecs you choose to use. This bit rate is obviously not realistic for network transmission and would likely only be used locally.</p> <p>Breaking down the value of the <code>codecs</code> parameter into its dot-delineated properties, we see the following:</p> <figure class="table-container"><table> <thead> <tr> <th>Value</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>av01</code></td> <td>The four-character code (4CC) designation identifying the <a href="#av1">AV1</a> codec.</td> </tr> <tr> <td><code>2</code></td> <td>The profile. A value of 2 indicates the Professional profile. A value of 1 is the High profile, while a value of 0 would specify the Main profile.</td> </tr> <tr> <td><code>19H</code></td> <td>The level and tier. This value comes from the table in section <a href="https://aomediacodec.github.io/av1-spec/#levels" class="external" target="_blank">A.3</a> of the AV1 specification, and indicates the high tier of Level 6.3.</td> </tr> <tr> <td><code>12</code></td> <td>The color depth. This indicates 12 bits per component. Other possible values are 8 and 10, but 12 is the highest-accuracy color representation available in AV1.</td> </tr> <tr> <td><code>0</code></td> <td>The monochrome mode flag. If 1, then no chroma planes would be recorded, and all data should be strictly luma data, resulting in a greyscale image. We've specified 0 because we want color.</td> </tr> <tr> <td><code>000</code></td> <td>The chroma subsampling mode, taken from <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics" class="external" target="_blank">section 6.4.2</a> in the AV1 specification. A value of 000, combined with the monochrome mode value 0, indicates that we want 4:4:4 chroma subsampling, or no loss of color data.</td> </tr> <tr> <td><code>09</code></td> <td>The color primaries to use. This value comes from <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics" class="external" target="_blank">section 6.4.2</a> in the AV1 specification; 9 indicates that we want to use BT.2020 color, which is used for HDR.</td> </tr> <tr> <td><code>16</code></td> <td>The transfer characteristics to use. This comes from <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics" class="external" target="_blank">section 6.4.2</a> as well; 16 indicates that we want to use the characteristics for BT.2100 PQ color.</td> </tr> <tr> <td><code>09</code></td> <td>The matrix coefficients to use, from the <a href="https://aomediacodec.github.io/av1-spec/#color-config-semantics" class="external" target="_blank">section 6.4.2</a> again. A value of 9 specifies that we want to use BT.2020 with variable luminance; this is also known as BT.2010 YbCbCr.</td> </tr> <tr> <td><code>1</code></td> <td>The video "full range" flag. A value of 1 indicates that we want the full color range to be used.</td> </tr> </tbody> </table></figure> <p>The documentation for your codec choices will probably offer information you'll use when constructing your <code>codecs</code> parameter.</p></div></section><section aria-labelledby="see_also"><h2 id="see_also"><a href="#see_also">See also</a></h2><div class="section-content"><ul> <li><a href="/en-US/docs/Web/Media/Guides/Formats/Audio_codecs">Web audio codec guide</a></li> <li><a href="/en-US/docs/Web/Media/Guides/Formats/Containers">Media container formats (file types)</a></li> <li><a href="/en-US/docs/Web/Media/Guides/Formats/Support_issues">Handling media support issues in web content</a></li> <li><a href="/en-US/docs/Web/Media/Guides/Formats/WebRTC_codecs">Codecs used by WebRTC</a></li> <li><a href="https://datatracker.ietf.org/doc/html/rfc6381" class="external" target="_blank">RFC 6381</a>: The "Codecs" and "Profiles" parameters for "Bucket" media types</li> <li><a href="https://datatracker.ietf.org/doc/html/rfc5334" class="external" target="_blank">RFC 5334</a>: Ogg Media Types</li> <li><a href="https://datatracker.ietf.org/doc/html/rfc3839" class="external" target="_blank">RFC 3839</a>: MIME Type Registrations for 3GPP Multimedia Files</li> <li><a href="https://datatracker.ietf.org/doc/html/rfc4381" class="external" target="_blank">RFC 4381</a>: MIME Type Registrations for 3GPP2 Multimedia Files</li> <li><a href="https://datatracker.ietf.org/doc/html/rfc4337" class="external" target="_blank">RFC 4337</a>: MIME Type Registrations for MPEG-4</li> <li><a href="https://www.chromium.org/audio-video/" class="external" target="_blank">Video and audio codecs in Chrome</a></li> </ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>Help improve MDN</h2><fieldset class="feedback"><label>Was this page helpful to you?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button></div></fieldset><a class="contribute" href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>.<p class="last-modified-date">This page was last modified on <time dateTime="2025-02-03T15:11:02.000Z">Feb 3, 2025</time> by <a href="/en-US/docs/Web/Media/Guides/Formats/Video_codecs/contributors.txt" rel="nofollow">MDN contributors</a>.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/content/blob/main/files/en-us/web/media/guides/formats/video_codecs/index.md?plain=1" title="Folder: en-us/web/media/guides/formats/video_codecs (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FMedia%2FGuides%2FFormats%2FVideo_codecs&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fmedia%2Fguides%2Fformats%2Fvideo_codecs%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FMedia%2FGuides%2FFormats%2FVideo_codecs%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fmedia%2Fguides%2Fformats%2Fvideo_codecs%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F27bceead8e9b1fe9c92df0fa5e418f81bd5b9fdf%0A*+Document+last+modified%3A+2025-02-03T15%3A11%3A02.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/en-US/docs/Web/Media/Guides/Formats/Video_codecs","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<p>This guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video.</p>\n<p>Due to the sheer size of uncompressed video data, it's necessary to compress it significantly in order to store it, let alone transmit it over a network. Imagine the amount of data needed to store uncompressed video:</p>\n<ul>\n<li>A single frame of high definition (1920x1080) video in full color (4 bytes per pixel) is 8,294,400 bytes.</li>\n<li>At a typical 30 frames per second, each second of HD video would occupy 248,832,000 bytes (~249 MB).</li>\n<li>A minute of HD video would need 14.93 GB of storage.</li>\n<li>A fairly typical 30 minute video conference would need about 447.9 GB of storage, and a 2-hour movie would take <em>almost 1.79 <strong>TB</strong> (that is, 1790 GB)</em>.</li>\n</ul>\n<p>Not only is the required storage space enormous, but the network bandwidth needed to transmit an uncompressed video like that would be enormous, at 249 MB/sec—not including audio and overhead. This is where video codecs come in. Just as audio codecs do for the sound data, video codecs compress the video data and encode it into a format that can later be decoded and played back or edited.</p>\n<p>Most video codecs are <strong>lossy</strong>, in that the decoded video does not precisely match the source. Some details may be lost; the amount of loss depends on the codec and how it's configured, but as a general rule, the more compression you achieve, the more loss of detail and fidelity will occur. Some lossless codecs do exist, but they are typically used for archival and storage for local playback rather than for use on a network.</p>"}},{"type":"prose","value":{"id":"common_codecs","title":"Common codecs","isH3":false,"content":"<p>The following video codecs are those which are most commonly used on the web. For each codec, the containers (file types) that can support them are also listed. Each codec provides a link to a section below which offers additional details about the codec, including specific capabilities and compatibility issues you may need to be aware of.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <thead>\n <tr>\n <th scope=\"row\">Codec name (short)</th>\n <th scope=\"col\">Full codec name</th>\n <th scope=\"col\">Container support</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\"><a href=\"#av1\">AV1</a></th>\n <td>AOMedia Video 1</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#avc_h.264\">AVC (H.264)</a></th>\n <td>Advanced Video Coding</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#h.263\">H.263</a></th>\n <td>H.263 Video</td>\n <td><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a></td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#hevc_h.265\">HEVC (H.265)</a></th>\n <td>High Efficiency Video Coding</td>\n <td><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a></td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#mp4v-es\">MP4V-ES</a></th>\n <td>MPEG-4 Video Elemental Stream</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#mpeg-1_part_2_video\">MPEG-1</a></th>\n <td>MPEG-1 Part 2 Visual</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpegmpeg-2\">MPEG</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime\">QuickTime</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#mpeg-2_part_2_video\">MPEG-2</a></th>\n <td>MPEG-2 Part 2 Visual</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpegmpeg-2\">MPEG</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime\">QuickTime</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#theora\">Theora</a> <abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></th>\n <td>Theora</td>\n <td><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#ogg\">Ogg</a></td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#vp8\">VP8</a></th>\n <td>Video Processor 8</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#ogg\">Ogg</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\"><a href=\"#vp9\">VP9</a></th>\n <td>Video Processor 9</td>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#ogg\">Ogg</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"factors_affecting_the_encoded_video","title":"Factors affecting the encoded video","isH3":false,"content":"<p>As is the case with any encoder, there are two basic groups of factors affecting the size and quality of the encoded video: specifics about the source video's format and contents, and the characteristics and configuration of the codec used while encoding the video.</p>\n<p>The simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the resulting data larger as well. Thus, it's always a tradeoff of size versus quality. In some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that results in a correspondingly larger file.</p>"}},{"type":"prose","value":{"id":"effect_of_source_video_format_on_encoded_output","title":"Effect of source video format on encoded output","isH3":true,"content":"<p>The degree to which the format of the source video will affect the output varies depending on the codec and how it works. If the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple pixels, the format of the original image doesn't make any difference. However, things such as frame rate and, obviously, resolution will always have an impact on the output size of the media.</p>\n<p>Additionally, all codecs have their strengths and weaknesses. Some have trouble with specific kinds of shapes and patterns, or aren't good at replicating sharp edges, or tend to lose detail in dark areas, or any number of possibilities. It all depends on the underlying algorithms and mathematics.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <caption>\n The potential effect of source video format and contents on the encoded\n video quality and size\n </caption>\n <thead>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Effect on quality</th>\n <th scope=\"col\">Effect on size</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Color depth (bit depth)</th>\n <td>\n The higher the color bit depth, the higher the quality of color fidelity\n is achieved in the video. Additionally, in saturated portions of the\n image (that is, where colors are pure and intense, such as a bright,\n pure red: <code>rgb(255 0 0 / 100%)</code>), color depths below 10 bits\n per component (10-bit color) allow banding, where gradients cannot be\n represented without visible stepping of the colors.\n </td>\n <td>\n Depending on the codec, higher color depths may result in larger\n compressed file sizes. The determining factor is what internal storage\n format is used for the compressed data.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Frame rate</th>\n <td>\n Primarily affects the perceived smoothness of the motion in the image.\n To a point, the higher the frame rate, the smoother and more realistic\n the motion will appear. Eventually the point of diminishing returns is\n reached. See <a href=\"#reduced_frame_rate\">Frame rate</a> below for\n details.\n </td>\n <td>\n Assuming the frame rate is not reduced during encoding, higher frame\n rates cause larger compressed video sizes.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Motion</th>\n <td>\n Compression of video typically works by comparing frames, finding where\n they differ, and constructing records containing enough information to\n update the previous frame to approximate the appearance of the following\n frame. The more successive frames differ from one another, the larger\n these differences are, and the less effective the compression is at\n avoiding the introduction of artifacts into the compressed video.\n </td>\n <td>\n The complexity introduced by motion results in larger intermediate\n frames due to the higher number of differences between frames). For this\n and other reasons, the more motion there is in a video, the larger the\n output file will typically be.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Noise</th>\n <td>\n Picture noise (such as film grain effects, dust, or other grittiness to\n the image) introduces variability. Variability generally makes\n compression more difficult, resulting in more lost quality due to the\n need to drop details to achieve the same level of compression.\n </td>\n <td>\n The more variability—such as noise—there is in the image, the more\n complex the compression process and the less success the algorithm is\n likely to have compressing the image to the same degree. Unless you\n configure the encoder in a way that ignores some or all of the\n variations caused by noise, the compressed video will be larger.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Resolution (width and height)</th>\n <td>\n Higher resolution video, presented in the same screen size, will\n typically be able to more accurately portray the original scene, barring\n effects introduced during compression.\n </td>\n <td>\n The higher the resolution of a video, the larger it gets. This plays a\n key role in the final size of the video.\n </td>\n </tr>\n </tbody>\n</table></figure>\n<p>The degree to which these affect the resulting encoded video will vary depending on the precise details of the situation, including which encoder you use and how it's configured. In addition to general codec options, the encoder could be configured to reduce the frame rate, to clean up noise, and/or to reduce the overall resolution of the video during encoding.</p>"}},{"type":"prose","value":{"id":"effect_of_codec_configuration_on_encoded_output","title":"Effect of codec configuration on encoded output","isH3":true,"content":"<p>The algorithms used do encode video typically use one or more of a number of general techniques to perform their encoding. Generally speaking, any configuration option that is intended to reduce the output size of the video will probably have a negative impact on the overall quality of the video, or will introduce certain types of artifacts into the video. It's also possible to select a lossless form of encoding, which will result in a much larger encoded file but with perfect reproduction of the original video upon decoding.</p>\n<p>In addition, each encoder utility may have variations in how they process the source video, resulting in differences in the output quality and/or size.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <caption>\n Video encoder configuration effects on quality and size\n </caption>\n <thead>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Effect on quality</th>\n <th scope=\"col\">Effect on size</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Lossless compression</th>\n <td>No loss of quality</td>\n <td>\n Lossless compression cannot reduce the overall video size nearly as much\n as lossy compression; the resulting files are likely to still be too\n large for general usage.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Lossy compression</th>\n <td>\n To some degree, artifacts and other forms of quality degradation will\n occur, depending on the specific codec and how much compression is being\n applied\n </td>\n <td>\n The more the encoded video is allowed to deviate from the source, the\n easier it is to accomplish higher compression rates\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Quality setting</th>\n <td>\n The higher the quality configuration, the more like the original media\n the encoded video will look\n </td>\n <td>\n In general, higher quality settings will result in larger encoded video\n files; the degree to which this is true varies depending on the codec\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Bit rate</th>\n <td>Quality generally improves with higher bit rates</td>\n <td>Higher bit rates inherently lead to larger output files</td>\n </tr>\n </tbody>\n</table></figure>\n<p>The options available when encoding video, and the values to be assigned to those options, will vary not only from one codec to another but depending on the encoding software you use. The documentation included with your encoding software will help you to understand the specific impact of these options on the encoded video.</p>"}},{"type":"prose","value":{"id":"compression_artifacts","title":"Compression artifacts","isH3":false,"content":"<p><strong>Artifacts</strong> are side effects of a lossy encoding process in which the lost or rearranged data results in visibly negative effects. Once an artifact has appeared, it may linger for a while, because of how video is displayed. Each frame of video is presented by applying a set of changes to the currently-visible frame. This means that any errors or artifacts will compound over time, resulting in glitches or otherwise strange or unexpected deviations in the image that linger for a time.</p>\n<p>To resolve this, and to improve seek time through the video data, periodic <strong>key frames</strong> (also known as <strong>intra-frames</strong> or <strong>i-frames</strong>) are placed into the video file. The key frames are full frames, which are used to repair any damage or artifact residue that's currently visible.</p>"}},{"type":"prose","value":{"id":"aliasing","title":"Aliasing","isH3":true,"content":"<p>Aliasing is a general term for anything that upon being reconstructed from the encoded data does not look the same as it did before compression. There are many forms of aliasing; the most common ones you may see include:</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <td>\n <h4 id=\"moiré_patterns\">Moiré patterns</h4>\n <p>\n A\n <a href=\"https://en.wikipedia.org/wiki/Moir%C3%A9_pattern\" class=\"external\" target=\"_blank\"><strong>Moiré pattern</strong></a>\n is a large-scale spatial interference pattern produced when a pattern\n in the source image and the manner in which the encoder operates are\n slightly out of alignment spatially. The artifacts generated by the\n encoder then introduce strange, swirling effects in the source image's\n pattern upon decoding.\n </p>\n </td>\n <td>\n <a href=\"moire-pattern.jpg\"><img alt=\"a brick wall showing swirling effect similar to waves due to the moire pattern\" src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/moire-pattern.jpg\" width=\"205\" height=\"250\" loading=\"lazy\"></a>\n </td>\n </tr>\n <tr>\n <td>\n <h4 id=\"staircase_effect\">Staircase effect</h4>\n <p>\n The <strong>staircase effect</strong> is a spatial artifact that\n occurs when diagonal straight or curved edges that should be smooth\n take on a jagged appearance, looking somewhat like a set of stair\n steps. This is the effect that is being reduced by \"anti-aliasing\"\n filters.\n </p>\n </td>\n <td>\n <a href=\"staircase-effect.jpg\"><img alt=\"\n Photo of diagonal lines that look like a staircase due to aliasing causing a staircase effect\n \" src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/staircase-effect.jpg\" width=\"452\" height=\"548\" loading=\"lazy\"></a>\n </td>\n </tr>\n <tr>\n <td>\n <h4 id=\"wagon-wheel_effect\">Wagon-wheel effect</h4>\n <p>\n The <strong>wagon-wheel effect</strong> (or\n <strong><a href=\"https://en.wikipedia.org/wiki/Stroboscopic_effect\" class=\"external\" target=\"_blank\">stroboscopic effect</a></strong>) is the visual effect that's commonly seen in film, in which a\n turning wheel appears to rotate at the wrong speed, or even in\n reverse, due to an interaction between the frame rate and the\n compression algorithm. The same effect can occur with any repeating\n pattern that moves, such as the ties on a railway line, posts along\n the side of a road, and so forth. This is a temporal (time-based)\n aliasing issue; the speed of the rotation interferes with the\n frequency of the sampling performed during compression or encoding.\n </p>\n </td>\n <td>\n <a href=\"stroboscopic-effect.gif\"><img alt=\"Turning wheel due to aliasing causing a wagon wheel effect.\" src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/stroboscopic-effect.gif\" width=\"180\" height=\"60\" loading=\"lazy\"></a>\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"color_edging","title":"Color edging","isH3":true,"content":"<p><strong>Color edging</strong> is a type of visual artifact that presents as spurious colors introduced along the edges of colored objects within the scene. These colors have no intentional color relationship to the contents of the frame.</p>"}},{"type":"prose","value":{"id":"loss_of_sharpness","title":"Loss of sharpness","isH3":true,"content":"<p>The act of removing data in the process of encoding video requires that some details be lost. If enough compression is applied, parts or potentially all of the image could lose sharpness, resulting in a slightly fuzzy or hazy appearance.</p>\n<p>Lost sharpness can make text in the image difficult to read, as text—especially small text—is very detail-oriented content, where minor alterations can significantly impact legibility.</p>"}},{"type":"prose","value":{"id":"ringing","title":"Ringing","isH3":true,"content":"<p>Lossy compression algorithms can introduce <strong><a href=\"https://en.wikipedia.org/wiki/Ringing_artifacts\" class=\"external\" target=\"_blank\">ringing</a></strong>, an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. This happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. This is particularly common at higher compression levels.</p>\n<p><img src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/ringing-effects.png\" alt=\"Example of the ringing effect\" width=\"684\" height=\"599\" loading=\"lazy\"></p>\n<p>Note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). Those fringes are the ringing effect. Ringing is similar in some respects to <a href=\"#mosquito_noise\">mosquito noise</a>, except that while the ringing effect is more or less steady and unchanging, mosquito noise shimmers and moves.</p>\n<p>Ringing is another type of artifact that can make it particularly difficult to read text contained in your images.</p>"}},{"type":"prose","value":{"id":"posterizing","title":"Posterizing","isH3":true,"content":"<p><strong>Posterization</strong> occurs when the compression results in the loss of color detail in gradients. Instead of smooth transitions through the various colors in a region, the image becomes blocky, with blobs of color that approximate the original appearance of the image.</p>\n<p><img src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/posterize-effect.jpg\" alt=\"Bald eagle photo with blotchy resolution.\" width=\"380\" height=\"418\" loading=\"lazy\"></p>\n<p>Note the blockiness of the colors in the plumage of the bald eagle in the photo above (and the snowy owl in the background). The details of the feathers is largely lost due to these posterization artifacts.</p>"}},{"type":"prose","value":{"id":"contouring","title":"Contouring","isH3":true,"content":"<p><strong>Contouring</strong> or <strong>color banding</strong> is a specific form of posterization in which the color blocks form bands or stripes in the image. This occurs when the video is encoded with too coarse a quantization configuration. As a result, the video's contents show a \"layered\" look, where instead of smooth gradients and transitions, the transitions from color to color are abrupt, causing strips of color to appear.</p>\n<p><img src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/contouring-effect.jpg\" alt=\"Example of an image whose compression has introduced contouring\" width=\"320\" height=\"240\" loading=\"lazy\"></p>\n<p>In the example image above, note how the sky has bands of different shades of blue, instead of being a consistent gradient as the sky color changes toward the horizon. This is the contouring effect.</p>"}},{"type":"prose","value":{"id":"mosquito_noise","title":"Mosquito noise","isH3":true,"content":"<p><strong>Mosquito noise</strong> is a temporal artifact which presents as noise or <strong>edge busyness</strong> that appears as a flickering haziness or shimmering that roughly follows outside the edges of objects with hard edges or sharp transitions between foreground objects and the background. The effect can be similar in appearance to <a href=\"#ringing\">ringing</a>.</p>\n<p><img src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/mosquito-effect-sm.png\" alt=\"Example of an image whose compression has introduced mosquito noise.\" width=\"400\" height=\"393\" loading=\"lazy\"></p>\n<p>The photo above shows mosquito noise in a number of places, including in the sky surrounding the bridge. In the upper-right corner, an inset shows a close-up of a portion of the image that exhibits mosquito noise.</p>\n<p>Mosquito noise artifacts are most commonly found in MPEG video, but can occur whenever a discrete cosine transform (DCT) algorithm is used; this includes, for example, JPEG still images.</p>"}},{"type":"prose","value":{"id":"motion_compensation_block_boundary_artifacts","title":"Motion compensation block boundary artifacts","isH3":true,"content":"<p>Compression of video generally works by comparing two frames and recording the differences between them, one frame after another, until the end of the video. This technique works well when the camera is fixed in place, or the objects in the frame are relatively stationary, but if there is a great deal of motion in the frame, the number of differences between frames can be so great that compression doesn't do any good.</p>\n<p><strong><a href=\"https://en.wikipedia.org/wiki/Motion_compensation\" class=\"external\" target=\"_blank\">Motion compensation</a></strong> is a technique that looks for motion (either of the camera or of objects in the frame of view) and determines how many pixels the moving object has moved in each direction. Then that shift is stored, along with a description of the pixels that have moved that can't be described just by that shift. In essence, the encoder finds the moving objects, then builds an internal frame of sorts that looks like the original but with all the objects translated to their new locations. In theory, this approximates the new frame's appearance. Then, to finish the job, the remaining differences are found, then the set of object shifts and the set of pixel differences are stored in the data representing the new frame. This object that describes the shift and the pixel differences is called a <strong>residual frame</strong>.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <thead>\n <tr>\n <th scope=\"col\" style=\"width: 216px\">Original frame</th>\n <th scope=\"col\" style=\"width: 216px\">Inter-frame differences</th>\n <th scope=\"col\" style=\"width: 216px\">\n Difference after motion compensation\n </th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><img alt=\"Original frame of video\" src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/motion-comp-orig.jpg\" width=\"1024\" height=\"576\" loading=\"lazy\"></td>\n <td><img alt=\"Differences between the first frame and the following frame.\" src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/motion-comp-diff.jpg\" width=\"1024\" height=\"576\" loading=\"lazy\"></td>\n <td>\n <img alt=\"Differences between the frames after shifting two pixels right\" src=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs/motion-comp-compensated.jpg\" width=\"1024\" height=\"576\" loading=\"lazy\">\n </td>\n </tr>\n <tr>\n <td style=\"vertical-align: top\">\n The first full frame as seen by the viewer.\n </td>\n <td style=\"vertical-align: top\">\n Here, only the differences between the first frame and the following\n frame are seen. Everything else is black. Looking closely, we can see\n that the majority of these differences come from a horizontal camera\n move, making this a good candidate for motion compensation.\n </td>\n <td style=\"vertical-align: top\">\n To minimize the number of pixels that are different, here we take into\n account the panning of the camera by first shifting the first frame to\n the right by two pixels, then by taking the difference. This compensates\n for the panning of the camera, allowing for more overlap between the two\n frames.\n </td>\n </tr>\n <tr>\n <th colspan=\"3\" style=\"\n font: italic 0.9em Arial, x-locale-body, sans-serif;\n vertical-align: middle;\n \">\n Images from\n <a href=\"https://en.wikipedia.org/wiki/Motion_compensation#Illustrated_example\" class=\"external\" target=\"_blank\">Wikipedia</a>\n </th>\n </tr>\n </tbody>\n</table></figure>\n<p>There are two general types of motion compensation: <strong>global motion compensation</strong> and <strong>block motion compensation</strong>. Global motion compensation generally adjusts for camera movements such as tracking, dolly movements, panning, tilting, rolling, and up and down movements. Block motion compensation handles localized changes, looking for smaller sections of the image that can be encoded using motion compensation. These blocks are normally of a fixed size, in a grid, but there are forms of motion compensation that allow for variable block sizes, and even for blocks to overlap.</p>\n<p>There are, however, artifacts that can occur due to motion compensation. These occur along block borders, in the form of sharp edges that produce false ringing and other edge effects. These are due to the mathematics involved in the coding of the residual frames, and can be easily noticed before being repaired by the next key frame.</p>"}},{"type":"prose","value":{"id":"reduced_frame_size","title":"Reduced frame size","isH3":true,"content":"<p>In certain situations, it may be useful to reduce the video's dimensions in order to improve the final size of the video file. While the immediate loss of size or smoothness of playback may be a negative factor, careful decision-making can result in a good end result. If a 1080p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.</p>"}},{"type":"prose","value":{"id":"reduced_frame_rate","title":"Reduced frame rate","isH3":true,"content":"<p>Similarly, you can remove frames from the video entirely and decrease the frame rate to compensate. This has two benefits: it makes the overall video smaller, and that smaller size allows motion compensation to accomplish even more for you. For example, instead of computing motion differences for two frames that are two pixels apart due to inter-frame motion, skipping every other frame could lead to computing a difference that comes out to four pixels of movement. This lets the overall movement of the camera be represented by fewer residual frames.</p>\n<p>The absolute minimum frame rate that a video can be before its contents are no longer perceived as motion by the human eye is about 12 frames per second. Less than that, and the video becomes a series of still images. Motion picture film is typically 24 frames per second, while standard definition television is about 30 frames per second (slightly less, but close enough) and high definition television is between 24 and 60 frames per second. Anything from 24 FPS upward will generally be seen as satisfactorily smooth; 30 or 60 FPS is an ideal target, depending on your needs.</p>\n<p>In the end, the decisions about what sacrifices you're able to make are entirely up to you and/or your design team.</p>"}},{"type":"prose","value":{"id":"codec_details","title":"Codec details","isH3":false,"content":""}},{"type":"prose","value":{"id":"av1","title":"AV1","isH3":true,"content":"<p>The <strong>AOMedia Video 1</strong> (<strong>AV1</strong>) codec is an open format designed by the <a href=\"https://aomedia.org/\" class=\"external\" target=\"_blank\">Alliance for Open Media</a> specifically for internet video. It achieves higher data compression rates than <a href=\"#vp9\">VP9</a> and <a href=\"#hevc_h.265\">H.265/HEVC</a>, and as much as 50% higher rates than <a href=\"#avc_h.264\">AVC</a>. AV1 is fully royalty-free and is designed for use by both the <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a> element and by <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a>.</p>\n<p>AV1 currently offers three profiles: <strong>main</strong>, <strong>high</strong>, and <strong>professional</strong> with increasing support for color depths and chroma subsampling. In addition, a series of <strong>levels</strong> are specified, each defining limits on a range of attributes of the video. These attributes include frame dimensions, image area in pixels, display and decode rates, average and maximum bit rates, and limits on the number of tiles and tile columns used in the encoding/decoding process.</p>\n<p>For example, AV1 level 2.0 offers a maximum frame width of 2048 pixels and a maximum height of 1152 pixels, but its maximum frame size in pixels is 147,456, so you can't actually have a 2048x1152 video at level 2.0. It's worth noting, however, that at least for Firefox and Chrome, the levels are actually ignored at this time when performing software decoding, and the decoder just does the best it can to play the video given the settings provided. For compatibility's sake going forward, however, you should stay within the limits of the level you choose.</p>\n<p>The primary drawback to AV1 at this time is that it is very new, and support is still in the process of being integrated into most browsers. Additionally, encoders and decoders are still being optimized for performance, and hardware encoders and decoders are still mostly in development rather than production. For this reason, encoding a video into AV1 format takes a very long time, since all the work is done in software.</p>\n<p>For the time being, because of these factors, AV1 is not yet ready to be your first choice of video codec, but you should watch for it to be ready to use in the future.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>\n <p>\n Varies depending on the video's level; theoretical maximum reaches 800 Mbps at level 6.3\n </p>\n <p>\n See the AV1 specification's\n <a href=\"https://aomediacodec.github.io/av1-spec/#levels\" class=\"external\" target=\"_blank\">tables of levels</a>, which describe the maximum resolutions and rates at each level.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>\n Varies by level; for example, level 2.0 has a maximum of 30 FPS while level 6.3 can reach 120 FPS\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>\n 8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <thead>\n <tr>\n <th scope=\"row\">Profile</th>\n <th scope=\"col\">Color depths</th>\n <th scope=\"col\">Chroma subsampling</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Main</th>\n <td>8 or 10</td>\n <td>4:0:0 (greyscale) or 4:2:0</td>\n </tr>\n <tr>\n <th scope=\"row\">High</th>\n <td>8 or 10</td>\n <td>4:0:0 (greyscale), 4:2:0, or 4:4:4</td>\n </tr>\n <tr>\n <th scope=\"row\">Professional</th>\n <td>8, 10, or 12</td>\n <td>4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Firefox Android</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">AV1 support</th>\n <td>70</td>\n <td>75</td>\n <td>67</td>\n <td>113</td>\n <td>57</td>\n <td>17</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"https://en.wikipedia.org/wiki/ISO/IEC_base_media_file_format\" class=\"external\" target=\"_blank\">ISOBMFF</a>, MPEG-TS,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://aomedia.org/\" class=\"external\" target=\"_blank\">Alliance for Open Media</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://aomediacodec.github.io/av1-spec/av1-spec.pdf\" class=\"external\" target=\"_blank\">https://aomediacodec.github.io/av1-spec/av1-spec.pdf</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>Royalty-free, open standard</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"avc_h.264","title":"AVC (H.264)","isH3":true,"content":"<p>The MPEG-4 specification suite's <strong>Advanced Video Coding</strong> (<strong>AVC</strong>) standard is specified by the identical ITU H.264 specification and the MPEG-4 Part 10 specification. It's a motion compensation based codec that is widely used today for all sorts of media, including broadcast television, <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> videoconferencing, and as the video codec for Blu-Ray discs.</p>\n<p>AVC is highly flexible, with a number of profiles with varying capabilities; for example, the Constrained Baseline Profile is designed for use in videoconferencing and mobile scenarios, using less bandwidth than the Main Profile (which is used for standard definition digital TV in some regions) or the High Profile (used for Blu-Ray Disc video). Most of the profiles use 8-bit color components and 4:2:0 chroma subsampling; The High 10 Profile adds support for 10-bit color, and advanced forms of High 10 add 4:2:2 and 4:4:4 chroma subsampling.</p>\n<p>AVC also has special features such as support for multiple views of the same scene (Multiview Video Coding), which allows, among other things, the production of stereoscopic video.</p>\n<p>AVC is a proprietary format, however, and numerous patents are owned by multiple parties regarding its technologies. Commercial use of AVC media requires a license, though the Via LA patent pool does not require license fees for streaming internet video in AVC format as long as the video is free for end users.</p>\n<p>Non-web browser implementations of WebRTC (any implementation which doesn't include the JavaScript APIs) are <em>required</em> to support AVC as a codec in WebRTC calls. While web browsers are not required to do so, some do.</p>\n<p>In HTML content for web browsers, AVC is broadly compatible and many platforms support hardware encoding and decoding of AVC media. However, be aware of its <a href=\"https://www.via-la.com/licensing-2/avc-h-264/\" class=\"external\" target=\"_blank\">licensing requirements</a> before choosing to use AVC in your project!</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Varies by level</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>Varies by level; up to 300 FPS is possible</td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>, though it's possible to create lossless macroblocks within the image\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>Up to 8,192 x 4,320 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n <p>Some of the more common or interesting profiles:</p>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Profile</th>\n <th scope=\"col\">Color depths</th>\n <th scope=\"col\">Chroma subsampling</th>\n </tr>\n <tr>\n <td>Constrained Baseline (CBP)</td>\n <td>8</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <td>Baseline (BP)</td>\n <td>8</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <td>Extended (XP)</td>\n <td>8</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <td>Main (MP)</td>\n <td>8</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <td>High (HiP)</td>\n <td>8</td>\n <td>4:0:0 (greyscale) and 4:2:0</td>\n </tr>\n <tr>\n <td>Progressive High (ProHiP)</td>\n <td>8</td>\n <td>4:0:0 (greyscale) and 4:2:0</td>\n </tr>\n <tr>\n <td>High 10 (Hi10P)</td>\n <td>8 to 10</td>\n <td>4:0:0 (greyscale) and 4:2:0</td>\n </tr>\n <tr>\n <td>High 4:2:2 (Hi422P)</td>\n <td>8 to 10</td>\n <td>4:0:0 (greyscale), 4:2:0, and 4:2:2</td>\n </tr>\n <tr>\n <td>High 4:4:4 Predictive</td>\n <td>8 to 14</td>\n <td>4:0:0 (greyscale), 4:2:0, 4:2:2, and 4:4:4</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>\n Yes; <a href=\"https://en.wikipedia.org/wiki/Hybrid_Log-Gamma\" class=\"external\" target=\"_blank\">Hybrid Log-Gamma</a> or\n Advanced HDR/SL-HDR; both are part of ATSC\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n All versions of Chrome, Edge, Firefox, Opera, and Safari\n <p>\n Firefox support for AVC is dependent upon the operating system's\n built-in or preinstalled codecs for AVC and its container in order to\n avoid patent concerns.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td>\n <a href=\"https://mpeg.chiariglione.org/\" class=\"external\" target=\"_blank\">MPEG</a> /\n <a href=\"https://www.itu.int/\" class=\"external\" target=\"_blank\">ITU</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding.html\" class=\"external\" target=\"_blank\">https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding.html</a><br><a href=\"https://www.itu.int/rec/T-REC-H.264\" class=\"external\" target=\"_blank\">https://www.itu.int/rec/T-REC-H.264</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>\n Proprietary with numerous patents. Commercial use\n <a href=\"https://www.via-la.com/licensing-2/avc-h-264/\" class=\"external\" target=\"_blank\">requires a license</a>. Note that multiple patent pools may apply.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"h.263","title":"H.263","isH3":true,"content":"<p>ITU's <strong>H.263</strong> codec was designed primarily for use in low-bandwidth situations. In particular, its focus is for video conferencing on PSTN (Public Switched Telephone Networks), <a href=\"/en-US/docs/Glossary/RTSP\">RTSP</a>, and SIP (IP-based videoconferencing) systems. Despite being optimized for low-bandwidth networks, it is fairly CPU intensive and may not perform adequately on lower-end computers. The data format is similar to that of MPEG-4 Part 2.</p>\n<p>H.263 has never been widely used on the web. Variations on H.263 have been used as the basis for other proprietary formats, such as Flash video or the Sorenson codec. However, no major browser has ever included H.263 support by default. Certain media plugins have enabled support for H.263 media.</p>\n<p>Unlike most codecs, H.263 defines fundamentals of an encoded video in terms of the maximum bit rate per frame (picture), or <strong>BPPmaxKb</strong>. During encoding, a value is selected for BPPmaxKb, and then the video cannot exceed this value for each frame. The final bit rate will depend on this, the frame rate, the compression, and the chosen resolution and block format.</p>\n<p>H.263 has been superseded by H.264 and is therefore considered a legacy media format which you generally should avoid using if you can. The only real reason to use H.263 in new projects is if you require support on very old devices on which H.263 is your best choice.</p>\n<p>H.263 is a proprietary format, with <a href=\"https://www.itu.int/ITU-T/recommendations/related_ps.aspx?id_prod=4242\" class=\"external\" target=\"_blank\">patents</a> held by a number of organizations and companies, including Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm, and so on. To use H.263, you are legally obligated to obtain the appropriate licenses.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Unrestricted, but typically below 64 kbps</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>Any</td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>\n <p>Up to 1408 x 1152 pixels.</p>\n <p>\n Version 1 of H.263 specifies a set of picture sizes which are\n supported. Later versions may support additional resolutions.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n YCbCr; each picture format (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF) defines\n the frame size in pixels as well as how many rows each of luminance and\n chrominance samples are used for each frame\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">H.263 support</th>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime\">QuickTime</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://www.itu.int/\" class=\"external\" target=\"_blank\">ITU</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://www.itu.int/rec/T-REC-H.263/\" class=\"external\" target=\"_blank\">https://www.itu.int/rec/T-REC-H.263/</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>\n Proprietary; appropriate license or licenses are required. Note that\n multiple patent pools may apply.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"hevc_h.265","title":"HEVC (H.265)","isH3":true,"content":"<p>The <strong><a href=\"http://hevc.info/\" class=\"external\" target=\"_blank\">High Efficiency Video Coding</a></strong> (<strong>HEVC</strong>) codec is defined by ITU's <strong>H.265</strong> as well as by MPEG-H Part 2 (the still in-development follow-up to MPEG-4). HEVC was designed to support efficient encoding and decoding of video in sizes including very high resolutions (including 8K video), with a structure specifically designed to let software take advantage of modern processors. Theoretically, HEVC can achieve compressed file sizes half that of <a href=\"#avc_h.264\">AVC</a> but with comparable image quality.</p>\n<p>For example, each coding tree unit (CTU)—similar to the macroblock used in previous codecs—consists of a tree of luma values for each sample as well as a tree of chroma values for each chroma sample used in the same coding tree unit, as well as any required syntax elements. This structure supports easy processing by multiple cores.</p>\n<p>An interesting feature of HEVC is that the main profile supports only 8-bit per component color with 4:2:0 chroma subsampling. Also interesting is that 4:4:4 video is handled specially. Instead of having the luma samples (representing the image's pixels in grayscale) and the Cb and Cr samples (indicating how to alter the grays to create color pixels), the three channels are instead treated as three monochrome images, one for each color, which are then combined during rendering to produce a full-color image.</p>\n<p>HEVC is a proprietary format and is covered by a number of patents. Licensing is <a href=\"https://www.via-la.com/licensing-2/hevc-vvc/\" class=\"external\" target=\"_blank\">managed by Via LA</a>; fees are charged to developers rather than to content producers and distributors. Be sure to review the latest license terms and requirements before making a decision on whether or not to use HEVC in your app or website!</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Up to 800,000 kbps</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>Varies by level; up to 300 FPS is possible</td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>128 x 96 to 8,192 x 4,320 pixels; varies by profile and level</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n <p>\n Information below is provided for the major profiles. There are a\n number of other profiles available that are not included here.\n </p>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <thead>\n <tr>\n <th scope=\"col\">Profile</th>\n <th scope=\"col\">Color depths</th>\n <th scope=\"col\">Chroma subsampling</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Main</td>\n <td>8</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <td>Main 10</td>\n <td>8 to 10</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <td>Main 12</td>\n <td>8 to 12</td>\n <td>4:0:0 and 4:2:0</td>\n </tr>\n <tr>\n <td>Main 4:2:2 10</td>\n <td>8 to 10</td>\n <td>4:0:0, 4:2:0, and 4:2:2</td>\n </tr>\n <tr>\n <td>Main 4:2:2 12</td>\n <td>8 to 12</td>\n <td>4:0:0, 4:2:0, and 4:2:2</td>\n </tr>\n <tr>\n <td>Main 4:4:4</td>\n <td>8</td>\n <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>\n </tr>\n <tr>\n <td>Main 4:4:4 10</td>\n <td>8 to 10</td>\n <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>\n </tr>\n <tr>\n <td>Main 4:4:4 12</td>\n <td>8 to 12</td>\n <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>\n </tr>\n <tr>\n <td>Main 4:4:4 16 Intra</td>\n <td>8 to 16</td>\n <td>4:0:0, 4:2:0, 4:2:2, and 4:4:4</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">HEVC / H.265 support</th>\n <td>107</td>\n <td>18</td>\n <td>No</td>\n <td>94</td>\n <td>11</td>\n </tr>\n </tbody>\n </table></figure>\n <p>Chrome support HEVC for devices with hardware support on Windows 8+, Linux and ChromeOS, for all devices on macOS Big Sur 11+ and Android 5.0+.</p>\n <p>Edge (Chromium) supports HEVC for devices with hardware support on Windows 10 1709+ when\n <a href=\"https://apps.microsoft.com/detail/9nmzlz57r3t7\" class=\"external\" target=\"_blank\">HEVC video extensions from the Microsoft Store</a>\n is installed, and has the same support status as Chrome on other platforms. Edge (Legacy) only supports HEVC for devices with a hardware decoder.\n </p>\n <p>Mozilla will not support HEVC while it is encumbered by patents.</p>\n <p>Opera and other Chromium based browsers have the same support status as Chrome.</p>\n <p>Safari supports HEVC for all devices on macOS High Sierra or later.</p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"https://en.wikipedia.org/wiki/ISO/IEC_base_media_file_format\" class=\"external\" target=\"_blank\">ISOBMFF</a>, MPEG-TS,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime\">QuickTime</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td>\n <a href=\"https://www.itu.int/\" class=\"external\" target=\"_blank\">ITU</a> /\n <a href=\"https://mpeg.chiariglione.org/\" class=\"external\" target=\"_blank\">MPEG</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Specifications</th>\n <td>\n <a href=\"https://www.itu.int/rec/T-REC-H.265\" class=\"external\" target=\"_blank\">http://www.itu.int/rec/T-REC-H.265</a><br><a href=\"https://www.iso.org/standard/69668.html\" class=\"external\" target=\"_blank\">https://www.iso.org/standard/69668.html</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>\n Proprietary; confirm your compliance with the\n <a href=\"https://www.via-la.com/licensing-2/hevc-vvc/\" class=\"external\" target=\"_blank\">licensing requirements</a>. Note that multiple patent pools may apply.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"mp4v-es","title":"MP4V-ES","isH3":true,"content":"<p>The <strong>MPEG-4 Video Elemental Stream</strong> (<strong>MP4V-ES</strong>) format is part of the MPEG-4 Part 2 Visual standard. While in general, MPEG-4 part 2 video is not used by anyone because of its lack of compelling value related to other codecs, MP4V-ES does have some usage on mobile. MP4V is essentially H.263 encoding in an MPEG-4 container.</p>\n<p>Its primary purpose is to be used to stream MPEG-4 audio and video over an <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> session. However, MP4V-ES is also used to transmit MPEG-4 audio and video over a mobile connection using <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>.</p>\n<p>You almost certainly don't want to use this format, since it isn't supported in a meaningful way by any major browsers, and is quite obsolete. Files of this type should have the extension <code>.mp4v</code>, but sometimes are inaccurately labeled <code>.mp4</code>.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>5 kbps to 1 Gbps and more</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>No specific limit; restricted only by the data rate</td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>Up to 4,096 x 4,096 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n YCrCb with chroma subsampling (4:2:0, 4:2:2, and 4:4:4) supported; up to\n 12 bits per component\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">MP4V-ES support</th>\n <td>No</td>\n <td>No</td>\n <td>Yes</td>\n <td>No</td>\n <td>No</td>\n </tr>\n </tbody>\n </table></figure>\n <p>\n Firefox supports MP4V-ES in\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>\n containers only.\n </p>\n <p>Chrome does not support MP4V-ES; however, ChromeOS does.</p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://mpeg.chiariglione.org/\" class=\"external\" target=\"_blank\">MPEG</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td><a href=\"https://datatracker.ietf.org/doc/html/rfc6416\" class=\"external\" target=\"_blank\">RFC 6416</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>\n Proprietary;\n <a href=\"https://www.via-la.com/licensing-2/mpeg-4-visual/\" class=\"external\" target=\"_blank\">obtain a license</a>\n through <a href=\"https://www.via-la.com/\" class=\"external\" target=\"_blank\">Via LA</a> and/or\n <a href=\"https://about.att.com/innovation/ip/patents\" class=\"external\" target=\"_blank\">AT&T</a>\n as needed\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"mpeg-1_part_2_video","title":"MPEG-1 Part 2 Video","isH3":true,"content":"<p><strong>MPEG-1 Part 2 Video</strong> was unveiled at the beginning of the 1990s. Unlike the later MPEG video standards, MPEG-1 was created solely by MPEG, without the <a href=\"/en-US/docs/Glossary/ITU\">ITU's</a> involvement.</p>\n<p>Because any MPEG-2 decoder can also play MPEG-1 video, it's compatible with a wide variety of software and hardware devices. There are no active patents remaining in relation to MPEG-1 video, so it may be used free of any licensing concerns. However, few web browsers support MPEG-1 video without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-1 a poor choice for use in websites and web applications.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Up to 1.5 Mbps</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>\n 23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, and 60\n FPS\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>Up to 4,095 x 4,095 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n Y'CbCr with 4:2:0 chroma subsampling with up to 12 bits per component\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">MPEG-1 support</th>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n <td>Yes</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>MPEG</td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://mpeg.chiariglione.org/\" class=\"external\" target=\"_blank\">MPEG</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://www.iso.org/standard/22411.html\" class=\"external\" target=\"_blank\">https://www.iso.org/standard/22411.html</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>\n Proprietary; however, all patents have expired, so MPEG-1 may be used\n freely\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"mpeg-2_part_2_video","title":"MPEG-2 Part 2 Video","isH3":true,"content":"<p><strong><a href=\"https://en.wikipedia.org/wiki/H.262/MPEG-2_Part_2\" class=\"external\" target=\"_blank\">MPEG-2 Part 2</a></strong> is the video format defined by the MPEG-2 specification, and is also occasionally referred to by its <a href=\"/en-US/docs/Glossary/ITU\">ITU</a> designation, H.262. It is very similar to MPEG-1 video—in fact, any MPEG-2 player can automatically handle MPEG-1 without any special work—except it has been expanded to support higher bit rates and enhanced encoding techniques.</p>\n<p>The goal was to allow MPEG-2 to compress standard definition television, so interlaced video is also supported. The standard definition compression rate and the quality of the resulting video met needs well enough that MPEG-2 is the primary video codec used for DVD video media.</p>\n<p>MPEG-2 has several profiles available with different capabilities. Each profile is then available four levels, each of which increases attributes of the video, such as frame rate, resolution, bit rate, and so forth. Most profiles use Y'CbCr with 4:2:0 chroma subsampling, but more advanced profiles support 4:2:2 as well. In addition, there are four levels, each of which offers support for larger frame dimensions and bit rates. For example, the <a href=\"https://en.wikipedia.org/wiki/ATSC_standards\" class=\"external\" target=\"_blank\">ATSC</a> specification for television used in North America supports MPEG-2 video in high definition using the Main Profile at High Level, allowing 4:2:0 video at both 1920 x 1080 (30 FPS) and 1280 x 720 (60 FPS), at a maximum bit rate of 80 Mbps.</p>\n<p>However, few web browsers support MPEG-2 without the support of a plugin, and with plugin use deprecated in web browsers, these are generally no longer available. This makes MPEG-2 a poor choice for use in websites and web applications.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Up to 100 Mbps; varies by level and profile</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <thead>\n <tr>\n <th scope=\"row\">Abbr.</th>\n <th scope=\"col\">Level name</th>\n <th scope=\"col\">Frame rates supported</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">LL</th>\n <td>Low Level</td>\n <td>23.9, 24, 25, 29.97, 30</td>\n </tr>\n <tr>\n <th scope=\"row\">ML</th>\n <td>Main Level</td>\n <td>23.976, 24, 25, 29.97, 30</td>\n </tr>\n <tr>\n <th scope=\"row\">H-14</th>\n <td>High 1440</td>\n <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td>\n </tr>\n <tr>\n <th scope=\"row\">HL</th>\n <td>High Level</td>\n <td>23.976, 24, 26, 29.97, 30, 50, 59.94, 60</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Abbr.</th>\n <th scope=\"col\">Level name</th>\n <th scope=\"col\">Maximum frame size</th>\n </tr>\n <tr>\n <th scope=\"row\">LL</th>\n <td>Low Level</td>\n <td>352 x 288 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">ML</th>\n <td>Main Level</td>\n <td>720 x 576 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">H-14</th>\n <td>High 1440</td>\n <td>1440 x 1152 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">HL</th>\n <td>High Level</td>\n <td>1920 x 1152 pixels</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n Y'CbCr with 4:2:0 chroma subsampling in most profiles; the \"High\" and\n \"4:2:2\" profiles support 4:2:2 chroma subsampling as well.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">MPEG-2 support</th>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n <td>No</td>\n <td>Yes</td>\n </tr>\n </tbody>\n </table></figure>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpegmpeg-2\">MPEG</a>, MPEG-TS (MPEG Transport Stream), <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>, <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#quicktime\">QuickTime</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td>\n <a href=\"https://mpeg.chiariglione.org/\" class=\"external\" target=\"_blank\">MPEG</a> / <a href=\"https://www.itu.int/\" class=\"external\" target=\"_blank\">ITU</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://www.itu.int/rec/T-REC-H.262\" class=\"external\" target=\"_blank\">https://www.itu.int/rec/T-REC-H.262</a><br><a href=\"https://www.iso.org/standard/61152.html\" class=\"external\" target=\"_blank\">https://www.iso.org/standard/61152.html</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>\n Proprietary; all patents have expired worldwide with the exception of in Malaysia (as of October 1, 2024), so MPEG-2 can be used freely outside of Malaysia.\n Patents are licensed by <a href=\"https://www.via-la.com/licensing-2/mpeg-2/\" class=\"external\" target=\"_blank\">Via LA</a>.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"theora","title":"Theora","isH3":true,"content":"<div class=\"notecard warning\">\n<p><strong>Warning:</strong>\nThis codec is no longer recommended.\nIt has extremely small usage, and support is being removed from browsers.</p>\n</div>\n<p><strong><a href=\"https://en.wikipedia.org/wiki/Theora\" class=\"external\" target=\"_blank\">Theora</a></strong>, developed by <a href=\"https://xiph.org/\" class=\"external\" target=\"_blank\">Xiph.org</a>, is an open and free video codec which may be used without royalties or licensing. Theora is comparable in quality and compression rates to MPEG-4 Part 2 Visual and AVC, making it a very good if not top-of-the-line choice for video encoding. But its status as being free from any licensing concerns and its relatively low CPU resource requirements make it a popular choice for many software and web projects. The low CPU impact is particularly useful since there are no hardware decoders available for Theora.</p>\n<p>Theora was originally based upon the VC3 codec by On2 Technologies. The codec and its specification were released under the LGPL license and entrusted to Xiph.org, which then developed it into the Theora standard.</p>\n<p>One drawback to Theora is that it only supports 8 bits per color component, with no option to use 10 or more in order to avoid color banding. That said, 8 bits per component is still the most commonly-used color format in use today, so this is only a minor inconvenience in most cases. Also, Theora can only be used in an Ogg container. The biggest drawback of all, however, is that it is not supported by Safari, leaving Theora unavailable not only on macOS but on all those millions and millions of iPhones and iPads.</p>\n<p>The <a href=\"https://en.flossmanuals.net/ogg-theora/_full/\" class=\"external\" target=\"_blank\">Theora Cookbook</a> offers additional details about Theora as well as the Ogg container format it is used within.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Up to 2 Gbps</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>\n Arbitrary; any non-zero value is supported. The frame rate is specified\n as a 32-bit numerator and a 32-bit denominator, to allow for non-integer\n frame rates.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>\n Any combination of width and height up to 1,048,560 x 1,048,560 pixels\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n Y'CbCr with 4:2:0, 4:2:2, and 4:4:4 chroma subsampling at 8 bits per\n component\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>\n <p>Yes</p>\n <p>\n While Theora doesn't support Variable Frame Rate (VFR) within a single\n stream, multiple streams can be chained together within a single file,\n and each of those can have its own frame rate, thus allowing what is\n essentially VFR. However, this is impractical if the frame rate needs\n to change frequently.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Feature</th>\n <th scope=\"col\">Chrome</th>\n <th scope=\"col\">Edge</th>\n <th scope=\"col\">Firefox</th>\n <th scope=\"col\">Opera</th>\n <th scope=\"col\">Safari</th>\n </tr>\n <tr>\n <th scope=\"row\">Theora support</th>\n <td>3 to 121</td>\n <td>12 to 121</td>\n <td>3.5 to 126</td>\n <td>10.5 to 107</td>\n <td>No</td>\n </tr>\n </tbody>\n </table></figure>\n <p>\n Edge supports Theora with the optional\n <a href=\"https://apps.microsoft.com/detail/9n5tdp8vcmhs\" class=\"external\" target=\"_blank\">Web Media Extensions</a>\n add-on.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#ogg\">Ogg</a></td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://www.xiph.org/\" class=\"external\" target=\"_blank\">Xiph.org</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://www.theora.org/doc/\" class=\"external\" target=\"_blank\">https://www.theora.org/doc/</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>Open and free of royalties and any other licensing requirements</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"vp8","title":"VP8","isH3":true,"content":"<p>The <strong>Video Processor 8</strong> (<strong>VP8</strong>) codec was initially created by On2 Technologies. Following their purchase of On2, Google released VP8 as an open and royalty-free video format under a promise not to enforce the relevant patents. In terms of quality and compression rate, VP8 is comparable to <a href=\"#avc_h.264\">AVC</a>.</p>\n<p>If supported by the browser, VP8 allows video with an alpha channel, allowing the video to play with the background able to be seen through the video to a degree specified by each pixel's alpha component.</p>\n<p>There is good browser support for VP8 in HTML content, especially within <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a> files.\nThis makes VP8 a good candidate for your content, although VP9 is an even better choice if available to you.\nWeb browsers are <em>required</em> to support VP8 for WebRTC, but not all browsers that do so also support it in HTML audio and video elements.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Arbitrary; no maximum unless level-based limitations are enforced</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>Arbitrary</td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>Up to 16,384 x 16,384 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>Y'CbCr with 4:2:0 chroma subsampling at 8 bits per component</td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>No</td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <p>All versions of Chrome, Edge, Firefox, Opera, and Safari</p><p>\n </p><p><a href=\"https://webkit.org/blog/8672/on-the-road-to-webrtc-1-0-including-vp8/\" class=\"external\" target=\"_blank\">iOS: Safari 12.1</a> and later support VP8 in WebRTC connections only.</p>\n <p>Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use <a href=\"/en-US/docs/Web/API/MediaSource/isTypeSupported_static\" title=\"MediaSource.isTypeSupported()\"><code>MediaSource.isTypeSupported()</code></a> to check for availability.</p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#3gp\">3GP</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#ogg\">Ogg</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> /\n <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>Yes; VP8 is one of the spec-required codecs for WebRTC</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://www.google.com/\" class=\"external\" target=\"_blank\">Google</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td><a href=\"https://datatracker.ietf.org/doc/html/rfc6386\" class=\"external\" target=\"_blank\">RFC 6386</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>Open and free of royalties and any other licensing requirements</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"vp9","title":"VP9","isH3":true,"content":"<p><strong>Video Processor 9</strong> (<strong>VP9</strong>) is the successor to the older VP8 standard developed by Google.\nLike VP8, VP9 is entirely open and royalty-free.\nIts encoding and decoding performance is comparable to or slightly faster than that of AVC, but with better quality.\nVP9's encoded video quality is comparable to that of HEVC at similar bit rates.</p>\n<p>VP9's main profile supports only 8-bit color depth at 4:2:0 chroma subsampling levels, but its profiles include support for deeper color and the full range of chroma subsampling modes.\nIt supports several HDR implementations, and offers substantial freedom in selecting frame rates, aspect ratios, and frame sizes.</p>\n<p>VP9 is widely supported by browsers, and hardware implementations of the codec are fairly common.\nVP9 is one of the two video codecs mandated by <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a> (the other being <a href=\"#vp8\">VP8</a>).\nNote however that Safari support for WebM and VP9 was only introduced in version 14.1, so if you choose to use VP9, consider offering a fallback format such as AVC or HEVC for iPhone, iPad, and Mac users.</p>\n<p>VP9 is a good choice if you are able to use a WebM container (and can provide fallback video when needed).\nThis is especially true if you wish to use an open codec rather than a proprietary one.</p>\n<figure class=\"table-container\"><table class=\"standard-table\">\n <tbody>\n <tr>\n <th scope=\"row\">Supported bit rates</th>\n <td>Arbitrary; no maximum unless level-based limitations are enforced</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame rates</th>\n <td>Arbitrary</td>\n </tr>\n <tr>\n <th scope=\"row\">Compression</th>\n <td>\n Lossy\n <a href=\"https://en.wikipedia.org/wiki/Discrete_cosine_transform\" class=\"external\" target=\"_blank\">DCT-based algorithm</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Supported frame sizes</th>\n <td>Up to 65,536 x 65,536 pixels</td>\n </tr>\n <tr>\n <th scope=\"row\">Supported color modes</th>\n <td>\n <figure class=\"table-container\"><table class=\"standard-table\">\n <thead>\n <tr>\n <th scope=\"row\">Profile</th>\n <th scope=\"col\">Color depths</th>\n <th scope=\"col\">Chroma subsampling</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th scope=\"row\">Profile 0</th>\n <td>8</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <th scope=\"row\">Profile 1</th>\n <td>8</td>\n <td>4:2:0, 4:2:2, and 4:4:4</td>\n </tr>\n <tr>\n <th scope=\"row\">Profile 2</th>\n <td>10 to 12</td>\n <td>4:2:0</td>\n </tr>\n <tr>\n <th scope=\"row\">Profile 3</th>\n <td>10 to 12</td>\n <td>4:2:0, 4:2:2, and f:4:4</td>\n </tr>\n </tbody>\n </table></figure>\n <p>\n Color spaces supported:\n <a href=\"https://en.wikipedia.org/wiki/Rec._601\" class=\"external\" target=\"_blank\">Rec. 601</a>,\n <a href=\"https://en.wikipedia.org/wiki/Rec._709\" class=\"external\" target=\"_blank\">Rec. 709</a>,\n <a href=\"https://en.wikipedia.org/wiki/Rec._2020\" class=\"external\" target=\"_blank\">Rec. 2020</a>,\n <a href=\"https://en.wikipedia.org/wiki/SMPTE_C\" class=\"external\" target=\"_blank\">SMPTE C</a>, SMPTE-240M\n (obsolete; replaced by Rec. 709), and\n <a href=\"https://en.wikipedia.org/wiki/SRGB\" class=\"external\" target=\"_blank\">sRGB</a>.\n </p>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">HDR support</th>\n <td>\n Yes; HDR10+, <a href=\"https://en.wikipedia.org/wiki/Hybrid_Log-Gamma\" class=\"external\" target=\"_blank\">HLG</a>, and\n <a href=\"https://en.wikipedia.org/wiki/Perceptual_Quantizer\" class=\"external\" target=\"_blank\">PQ</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Variable Frame Rate (VFR) support</th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Browser compatibility</th>\n <td>\n <p>All versions of Chrome, Edge, Firefox, Opera, and Safari</p><p>\n </p><p>\n Firefox only supports VP8 in MSE when no H.264 hardware decoder is available. Use\n <a href=\"/en-US/docs/Web/API/MediaSource/isTypeSupported_static\" title=\"MediaSource.isTypeSupported()\"><code>MediaSource.isTypeSupported()</code></a> to check for availability.\n </p>\n \n </td>\n </tr>\n <tr>\n <th scope=\"row\">Container support</th>\n <td>\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#ogg\">Ogg</a>,\n <a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">\n <a href=\"/en-US/docs/Glossary/RTP\">RTP</a> / <a href=\"/en-US/docs/Web/API/WebRTC_API\">WebRTC</a> compatible\n </th>\n <td>Yes</td>\n </tr>\n <tr>\n <th scope=\"row\">Supporting/Maintaining organization</th>\n <td><a href=\"https://www.google.com/\" class=\"external\" target=\"_blank\">Google</a></td>\n </tr>\n <tr>\n <th scope=\"row\">Specification</th>\n <td>\n <a href=\"https://www.webmproject.org/vp9/\" class=\"external\" target=\"_blank\">https://www.webmproject.org/vp9/</a>\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Licensing</th>\n <td>Open and free of royalties and any other licensing requirements</td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"choosing_a_video_codec","title":"Choosing a video codec","isH3":false,"content":"<p>The decision as to which codec or codecs to use begins with a series of questions to prepare yourself:</p>\n<ul>\n<li>Do you wish to use an open format, or are proprietary formats also to be considered?</li>\n<li>Do you have the resources to produce more than one format for each of your videos? The ability to provide a fallback option vastly simplifies the decision-making process.</li>\n<li>Are there any browsers you're willing to sacrifice compatibility with?</li>\n<li>How old is the oldest version of web browser you need to support? For example, do you need to work on every browser shipped in the past five years, or just the past one year?</li>\n</ul>\n<p>In the sections below, we offer recommended codec selections for specific use cases. For each use case, you'll find up to two recommendations. If the codec which is considered best for the use case is proprietary or may require royalty payments, then two options are provided: first, an open and royalty-free option, followed by the proprietary one.</p>\n<p>If you are only able to offer a single version of each video, you can choose the format that's most appropriate for your needs. The first one is recommended as being a good combination of quality, performance, and compatibility. The second option will be the most broadly compatible choice, at the expense of some amount of quality, performance, and/or size.</p>"}},{"type":"prose","value":{"id":"recommendations_for_everyday_videos","title":"Recommendations for everyday videos","isH3":true,"content":"<p>First, let's look at the best options for videos presented on a typical website such as a blog, informational site, small business website where videos are used to demonstrate products (but not where the videos themselves are a product), and so forth.</p>\n<ol>\n<li>\n<p>A <strong><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#webm\">WebM</a></strong> container using the <strong><a href=\"#vp9\">VP9</a></strong> codec for video and the <strong><a href=\"/en-US/docs/Web/Media/Guides/Formats/Audio_codecs#opus\">Opus</a></strong> codec for audio. These are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><video controls src=\"filename.webm\"></video>\n</code></pre></div>\n</li>\n<li>\n<p>An <strong><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers#mpeg-4_mp4\">MP4</a></strong> container and the <strong><a href=\"#avc_h.264\">AVC</a></strong> (<strong>H.264</strong>) video codec, ideally with <strong><a href=\"/en-US/docs/Web/Media/Guides/Formats/Audio_codecs#aac_advanced_audio_coding\">AAC</a></strong> as your audio codec. This is because the MP4 container with AVC and AAC codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. Make sure you verify your compliance with the license requirements, however.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><video controls>\n <source type=\"video/webm\" src=\"filename.webm\" />\n <source type=\"video/mp4\" src=\"filename.mp4\" />\n</video>\n</code></pre></div>\n</li>\n</ol>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nThe <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a> element requires a closing <code></video></code> tag, whether or not you have any <a href=\"/en-US/docs/Web/HTML/Element/source\"><code><source></code></a> elements inside it.</p>\n</div>"}},{"type":"prose","value":{"id":"recommendations_for_high-quality_video_presentation","title":"Recommendations for high-quality video presentation","isH3":true,"content":"<p>If your mission is to present video at the highest possible quality, you will probably benefit from offering as many formats as possible, as the codecs capable of the best quality tend also to be the newest, and thus the most likely to have gaps in browser compatibility.</p>\n<ol>\n<li>\n<p>A WebM container using AV1 for video and Opus for audio. If you're able to use the High or Professional profile when encoding AV1, at a high level like 6.3, you can get very high bit rates at 4K or 8K resolution, while maintaining excellent video quality. Encoding your audio using Opus's Fullband profile at a 48 kHz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><video controls src=\"filename.webm\"></video>\n</code></pre></div>\n</li>\n<li>\n<p>An MP4 container using the <a href=\"#hevc_h.265\">HEVC</a> codec using one of the advanced Main profiles, such as Main 4:2:2 with 10 or 12 bits of color depth, or even the Main 4:4:4 profile at up to 16 bits per component. At a high bit rate, this provides excellent graphics quality with remarkable color reproduction. In addition, you can optionally include HDR metadata to provide high dynamic range video. For audio, use the AAC codec at a high sample rate (at least 48 kHz but ideally 96kHz) and encoded with complex encoding rather than fast encoding.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><video controls>\n <source type=\"video/webm\" src=\"filename.webm\" />\n <source type=\"video/mp4\" src=\"filename.mp4\" />\n</video>\n</code></pre></div>\n</li>\n</ol>"}},{"type":"prose","value":{"id":"recommendations_for_archival_editing_or_remixing","title":"Recommendations for archival, editing, or remixing","isH3":true,"content":"<p>There are not currently any lossless—or even near-lossless—video codecs generally available in web browsers. The reason for this is simple: video is huge. Lossless compression is by definition less effective than lossy compression. For example, uncompressed 1080p video (1920 by 1080 pixels) with 4:2:0 chroma subsampling needs at least 1.5 Gbps. Using lossless compression such as FFV1 (which is not supported by web browsers) could perhaps reduce that to somewhere around 600 Mbps, depending on the content. That's still a huge number of bits to pump through a connection every second, and is not currently practical for any real-world use.</p>\n<p>This is the case even though some of the lossy codecs have a lossless mode available; the lossless modes are not implemented in any current web browsers. The best you can do is to select a high-quality codec that uses lossy compression and configure it to perform as little compression as possible. One way to do this is to configure the codec to use \"fast\" compression, which inherently means less compression is achieved.</p>\n<h4 id=\"preparing_video_externally\">Preparing video externally</h4>\n<p>To prepare video for archival purposes from outside your website or app, use a utility that performs compression on the original uncompressed video data. For example, the free <a href=\"https://www.videolan.org/developers/x264.html\" class=\"external\" target=\"_blank\">x264</a> utility can be used to encode video in <a href=\"#avc_h.264\">AVC</a> format using a very high bit rate:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>x264 --crf 18 -preset ultrafast --output out-file.mp4 infile\n</code></pre></div>\n<p>While other codecs may have better best-case quality levels when compressing the video by a significant margin, their encoders tend to be slow enough that the nearly-lossless encoding you get with this compression is vastly faster at about the same overall quality level.</p>\n<h4 id=\"recording_video\">Recording video</h4>\n<p>Given the constraints on how close to lossless you can get, you might consider using <a href=\"#avc_h.264\">AVC</a> or <a href=\"#av1\">AV1</a>. For example, if you're using the <a href=\"/en-US/docs/Web/API/MediaStream_Recording_API\">MediaStream Recording API</a> to record video, you might use code like the following when creating your <a href=\"/en-US/docs/Web/API/MediaRecorder\"><code>MediaRecorder</code></a> object:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const kbps = 1024;\nconst Mbps = kbps * kbps;\n\nconst options = {\n mimeType: 'video/webm; codecs=\"av01.2.19H.12.0.000.09.16.09.1, flac\"',\n bitsPerSecond: 800 * Mbps,\n};\n\nlet recorder = new MediaRecorder(sourceStream, options);\n</code></pre></div>\n<p>This example creates a <code>MediaRecorder</code> configured to record <a href=\"#av1\">AV1</a> video using BT.2100 HDR in 12-bit color with 4:4:4 chroma subsampling and <a href=\"/en-US/docs/Web/Media/Guides/Formats/Audio_codecs#flac_free_lossless_audio_codec\">FLAC</a> for lossless audio. The resulting file will use a bit rate of no more than 800 Mbps shared between the video and audio tracks. You will likely need to adjust these values depending on hardware performance, your requirements, and the specific codecs you choose to use. This bit rate is obviously not realistic for network transmission and would likely only be used locally.</p>\n<p>Breaking down the value of the <code>codecs</code> parameter into its dot-delineated properties, we see the following:</p>\n<figure class=\"table-container\"><table>\n<thead>\n<tr>\n<th>Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>av01</code></td>\n<td>The four-character code (4CC) designation identifying the <a href=\"#av1\">AV1</a> codec.</td>\n</tr>\n<tr>\n<td><code>2</code></td>\n<td>The profile. A value of 2 indicates the Professional profile. A value of 1 is the High profile, while a value of 0 would specify the Main profile.</td>\n</tr>\n<tr>\n<td><code>19H</code></td>\n<td>The level and tier. This value comes from the table in section <a href=\"https://aomediacodec.github.io/av1-spec/#levels\" class=\"external\" target=\"_blank\">A.3</a> of the AV1 specification, and indicates the high tier of Level 6.3.</td>\n</tr>\n<tr>\n<td><code>12</code></td>\n<td>The color depth. This indicates 12 bits per component. Other possible values are 8 and 10, but 12 is the highest-accuracy color representation available in AV1.</td>\n</tr>\n<tr>\n<td><code>0</code></td>\n<td>The monochrome mode flag. If 1, then no chroma planes would be recorded, and all data should be strictly luma data, resulting in a greyscale image. We've specified 0 because we want color.</td>\n</tr>\n<tr>\n<td><code>000</code></td>\n<td>The chroma subsampling mode, taken from <a href=\"https://aomediacodec.github.io/av1-spec/#color-config-semantics\" class=\"external\" target=\"_blank\">section 6.4.2</a> in the AV1 specification. A value of 000, combined with the monochrome mode value 0, indicates that we want 4:4:4 chroma subsampling, or no loss of color data.</td>\n</tr>\n<tr>\n<td><code>09</code></td>\n<td>The color primaries to use. This value comes from <a href=\"https://aomediacodec.github.io/av1-spec/#color-config-semantics\" class=\"external\" target=\"_blank\">section 6.4.2</a> in the AV1 specification; 9 indicates that we want to use BT.2020 color, which is used for HDR.</td>\n</tr>\n<tr>\n<td><code>16</code></td>\n<td>The transfer characteristics to use. This comes from <a href=\"https://aomediacodec.github.io/av1-spec/#color-config-semantics\" class=\"external\" target=\"_blank\">section 6.4.2</a> as well; 16 indicates that we want to use the characteristics for BT.2100 PQ color.</td>\n</tr>\n<tr>\n<td><code>09</code></td>\n<td>The matrix coefficients to use, from the <a href=\"https://aomediacodec.github.io/av1-spec/#color-config-semantics\" class=\"external\" target=\"_blank\">section 6.4.2</a> again. A value of 9 specifies that we want to use BT.2020 with variable luminance; this is also known as BT.2010 YbCbCr.</td>\n</tr>\n<tr>\n<td><code>1</code></td>\n<td>The video \"full range\" flag. A value of 1 indicates that we want the full color range to be used.</td>\n</tr>\n</tbody>\n</table></figure>\n<p>The documentation for your codec choices will probably offer information you'll use when constructing your <code>codecs</code> parameter.</p>"}},{"type":"prose","value":{"id":"see_also","title":"See also","isH3":false,"content":"<ul>\n<li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Audio_codecs\">Web audio codec guide</a></li>\n<li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers\">Media container formats (file types)</a></li>\n<li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Support_issues\">Handling media support issues in web content</a></li>\n<li><a href=\"/en-US/docs/Web/Media/Guides/Formats/WebRTC_codecs\">Codecs used by WebRTC</a></li>\n<li><a href=\"https://datatracker.ietf.org/doc/html/rfc6381\" class=\"external\" target=\"_blank\">RFC 6381</a>: The \"Codecs\" and \"Profiles\" parameters for \"Bucket\" media types</li>\n<li><a href=\"https://datatracker.ietf.org/doc/html/rfc5334\" class=\"external\" target=\"_blank\">RFC 5334</a>: Ogg Media Types</li>\n<li><a href=\"https://datatracker.ietf.org/doc/html/rfc3839\" class=\"external\" target=\"_blank\">RFC 3839</a>: MIME Type Registrations for 3GPP Multimedia Files</li>\n<li><a href=\"https://datatracker.ietf.org/doc/html/rfc4381\" class=\"external\" target=\"_blank\">RFC 4381</a>: MIME Type Registrations for 3GPP2 Multimedia Files</li>\n<li><a href=\"https://datatracker.ietf.org/doc/html/rfc4337\" class=\"external\" target=\"_blank\">RFC 4337</a>: MIME Type Registrations for MPEG-4</li>\n<li><a href=\"https://www.chromium.org/audio-video/\" class=\"external\" target=\"_blank\">Video and audio codecs in Chrome</a></li>\n</ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Web/Media/Guides/Formats/Video_codecs","modified":"2025-02-03T15:11:02.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"Leitfaden zu Web-Videocodecs","native":"Deutsch"},{"locale":"ja","title":"ウェブ動画コーデックガイド","native":"日本語"},{"locale":"ko","title":"웹 비디오 코덱 가이드","native":"한국어"},{"locale":"zh-CN","title":"网页视频编码指南","native":"中文 (简体)"}],"pageTitle":"Web video codec guide - Media technologies on the web | MDN","parents":[{"uri":"/en-US/docs/Web","title":"References"},{"uri":"/en-US/docs/Web/Media","title":"Media"},{"uri":"/en-US/docs/Web/Media/Guides","title":"Guides"},{"uri":"/en-US/docs/Web/Media/Guides/Formats","title":"Media types and formats for image, audio, and video content"},{"uri":"/en-US/docs/Web/Media/Guides/Formats/Video_codecs","title":"Web video codec guide"}],"popularity":null,"short_title":"Web video codec guide","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Web/Media\">Media</a></li><li class=\"section\"><a href=\"/en-US/docs/Web/Media/Guides\">Guides</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Images\">Using images in HTML</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_manipulation\">Audio and video manipulation</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Autoplay\">Autoplay guide for media and Web Audio APIs</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Streaming\">Streaming audio and video</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/DASH_Adaptive_Streaming_for_HTML_5_Video\">DASH Adaptive Streaming for HTML video</a></li><li class=\"toggle\"><details><summary><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery\">Audio and video delivery</a></summary><ol><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video\">Adding captions and subtitles to HTML video</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player\">Creating a cross-browser video player</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Cross-browser_audio_basics\">Cross-browser audio basics</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Live_streaming_web_audio_and_video\">Livestreaming web audio and video</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/buffering_seeking_time_ranges\">Media buffering, seeking, and time ranges</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Setting_up_adaptive_streaming_media_sources\">Setting up adaptive streaming media sources</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics\">Video player styling basics</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/WebAudio_playbackRate_explained\">Web audio playbackRate explained</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/en-US/docs/Web/Media/Guides/Formats\">Media formats</a></summary><ol><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/codecs_parameter\">Codecs in common media types</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/WebRTC_codecs\">Codecs used by WebRTC</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Configuring_servers_for_Ogg_media\">Configuring servers for Ogg media</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Audio_concepts\">Digital audio concepts</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Video_concepts\">Digital video concepts</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Support_issues\">Handling unsupported media</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Image_types\">Image file type and format guide</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Containers\">Media container formats (file types)</a></li><li><a href=\"/en-US/docs/Web/Media/Guides/Formats/Audio_codecs\">Web audio codec guide</a></li><li><em><a href=\"/en-US/docs/Web/Media/Guides/Formats/Video_codecs\" aria-current=\"page\">Web video codec guide</a></em></li></ol></details></li></ol>","sidebarMacro":"mediasidebar","source":{"folder":"en-us/web/media/guides/formats/video_codecs","github_url":"https://github.com/mdn/content/blob/main/files/en-us/web/media/guides/formats/video_codecs/index.md","last_commit_url":"https://github.com/mdn/content/commit/27bceead8e9b1fe9c92df0fa5e418f81bd5b9fdf","filename":"index.md"},"summary":"This guide introduces the video codecs you're most likely to encounter or consider using on the web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video.","title":"Web video codec guide","toc":[{"text":"Common codecs","id":"common_codecs"},{"text":"Factors affecting the encoded video","id":"factors_affecting_the_encoded_video"},{"text":"Compression artifacts","id":"compression_artifacts"},{"text":"Codec details","id":"codec_details"},{"text":"Choosing a video codec","id":"choosing_a_video_codec"},{"text":"See also","id":"see_also"}],"pageType":"guide"}}</script></body></html>