{"id":2749,"date":"2020-12-09T23:09:38","date_gmt":"2020-12-09T23:09:38","guid":{"rendered":"http:\/\/mp4gain.com\/mp4gain\/?p=2749"},"modified":"2020-12-09T23:09:38","modified_gmt":"2020-12-09T23:09:38","slug":"new-av1-codec-speed-up-video-loading-in-the-browser","status":"publish","type":"post","link":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/","title":{"rendered":"New AV1 codec: speed up video loading in the browser"},"content":{"rendered":"

New AV1 codec: speed up video loading in the browser<\/strong><\/p>\n

\"AV1<\/p>\n

In this tutorial, we will learn how to use video on the web, as it is in 2019. Chrome and Firefox have started to support the new AV1 codec; you can make a video for them in half.<\/p>\n

\"AV1<\/p>\n

Let’s talk separately about how to replace GIF with video in AV1 and H.264; then its size will be reduced by 20 to 40 times.<\/p>\n

AV1 in the browser<\/p>\n

YouTube is already using it on TestTube. Netflix said AV1 will be “its main next-generation codec.”<\/p>\n

At Evil Martians we are already using it on our website and on Amplifer. In this article, I will share my AV1 implementation experience and show you step by step how to embed a video to make it work in all browsers.<\/p>\n

Codecs and containers<\/p>\n

With images, everything is simple: JPEG with PNG for all browsers or create more compact files in WebP for modern browsers. We can always be sure that the files will contain a .png PNG format (with the rare exception of PNG bombs, which imgproxy can protect against). Video files are more complicated. The file extension (,, or) only speaks of the container. While video files are made up of three different components:<\/p>\n

.mp4.wmv.webm.mov<\/p>\n

The video codec determines how much you can compress the video and what you have to sacrifice. The main video codecs on the Web are H.264, HEVC, VP9 and now AV1.
\nThe audio codec compresses the audio. Of course, it is not necessary if there is no sound in the video. Popular choices are MP3, Opus, and AAC.
\nThe container stores both video (compressed with some kind of video codec) and audio stream (compressed with some kind of audio codec). And also additional data such as subtitles and meta information. Popular containers: MP4, MOV, WebM.<\/p>\n

When we see the extension of the .mp4 file, we can only tell that an MP4 container was used. But the codecs it contains may be different: the author could have taken H.264 and AAC, AV1 and Opus, or something else.<\/p>\n

Behold AV1<\/p>\n

AV1 is a video codec that was released a year ago, in March 2018. It was created to surpass the previous generation of codecs: HEVC, VP9, \u200b\u200bH.264 and VP8.<\/p>\n","protected":false},"excerpt":{"rendered":"

New AV1 codec: speed up video loading in the browser In this tutorial, we will learn how to use video on the web, as it is in 2019. Chrome and Firefox have started to support the new AV1 codec; you can make a video for them in half. Let’s talk separately about how to replace … Continue reading “New AV1 codec: speed up video loading in the browser”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[55963,55977,55945,55953,55954,55949,55958,55955,55957,55956,55959,55960,55961,55962,55944,55973,55970,55969,55971,55972,55947,55946,55950,55948,55951,55952,55964,55967,55974,55976,55965,55968,55975,55966,55978,41243,55979,55980],"class_list":["post-2749","post","type-post","status-publish","format-standard","hentry","category-audio-video","tag-av1-is-a-personal-avatar","tag-av1-when","tag-do-av-10","tag-does-youtube-use-av1","tag-how-av1-works","tag-how-does-av1-work","tag-how-to-convert-av1-to-mp4","tag-how-to-encode-av1","tag-how-to-get-av1-on-samsung-tv","tag-how-to-play-av1-video","tag-how-to-play-av1-video-in-mx-player","tag-how-to-play-av1-video-in-vlc","tag-is-av1-better-than-hevc","tag-is-av1-royalty-free","tag-jak-wejsc-do-av1","tag-was-bedeutet-av-17","tag-was-bedeutet-av1","tag-was-bedeutet-av1-und-av2","tag-was-ist-av1","tag-was-ist-av1-codec","tag-what-does-av1-and-av2-mean","tag-what-does-av1-mean","tag-what-does-av1-mean-kennel-club","tag-what-does-av1-mean-on-my-tv","tag-what-does-av1-rgb-mean","tag-what-does-av15-mean","tag-what-is-av1","tag-what-is-av1-and-av2","tag-what-is-av1-codec","tag-what-is-av1-on-my-tv","tag-what-is-av1-on-tv","tag-what-is-av1-settings","tag-what-is-av1-settings-youtube","tag-what-is-av1-youtube","tag-when-will-av1-be-released","tag-who-use-av1-codec","tag-why-is-av1-so-slow","tag-will-apple-support-av1"],"yoast_head":"\nNew AV1 codec: speed up video loading in the browser - mp4gain.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New AV1 codec: speed up video loading in the browser - mp4gain.com\" \/>\n<meta property=\"og:description\" content=\"New AV1 codec: speed up video loading in the browser In this tutorial, we will learn how to use video on the web, as it is in 2019. Chrome and Firefox have started to support the new AV1 codec; you can make a video for them in half. Let’s talk separately about how to replace … Continue reading "New AV1 codec: speed up video loading in the browser"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"mp4gain.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mp4gain\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-09T23:09:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg\" \/>\n<meta name=\"author\" content=\"R. Arias\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mp4gain\" \/>\n<meta name=\"twitter:site\" content=\"@mp4gain\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"R. Arias\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\"},\"author\":{\"name\":\"R. Arias\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc\"},\"headline\":\"New AV1 codec: speed up video loading in the browser\",\"datePublished\":\"2020-12-09T23:09:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\"},\"wordCount\":387,\"image\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg\",\"keywords\":[\"av1 is a personal avatar\",\"av1 when\",\"do av 10\",\"does youtube use av1\",\"how av1 works\",\"how does av1 work\",\"how to convert av1 to mp4\",\"how to encode av1\",\"how to get av1 on samsung tv\",\"how to play av1 video\",\"how to play av1 video in mx player\",\"how to play av1 video in vlc\",\"is av1 better than hevc\",\"is av1 royalty free\",\"jak wejsc do av1\",\"was bedeutet av 17\",\"was bedeutet av1\",\"was bedeutet av1 und av2\",\"was ist av1\",\"was ist av1 codec\",\"what does av1 and av2 mean\",\"what does av1 mean\",\"what does av1 mean kennel club\",\"what does av1 mean on my tv\",\"what does av1 rgb mean\",\"what does av15+ mean\",\"what is av1\",\"what is av1 and av2\",\"what is av1 codec\",\"what is av1 on my tv\",\"what is av1 on tv\",\"what is av1 settings\",\"what is av1 settings youtube\",\"what is av1 youtube\",\"when will av1 be released\",\"who use av1 codec\",\"why is av1 so slow\",\"will apple support av1\"],\"articleSection\":[\"Audio and video\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\",\"url\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\",\"name\":\"New AV1 codec: speed up video loading in the browser - mp4gain.com\",\"isPartOf\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg\",\"datePublished\":\"2020-12-09T23:09:38+00:00\",\"author\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc\"},\"breadcrumb\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage\",\"url\":\"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg\",\"contentUrl\":\"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mp4gain.com\/mp4gain\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New AV1 codec: speed up video loading in the browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#website\",\"url\":\"https:\/\/mp4gain.com\/mp4gain\/\",\"name\":\"mp4gain.com\",\"description\":\"Mp4 Gain Official Website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mp4gain.com\/mp4gain\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc\",\"name\":\"R. Arias\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g\",\"caption\":\"R. Arias\"},\"description\":\"R. Arias is the author of this article and has extensive experience for more than 30 years as a recording engineer and audio specialist, as well as more than 20 years of experience creating algorithms related to audio and video. Linkedin\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ricardoariaszorrilla\/\"],\"url\":\"https:\/\/mp4gain.com\/mp4gain\/author\/mp4gain\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New AV1 codec: speed up video loading in the browser - mp4gain.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/","og_locale":"en_US","og_type":"article","og_title":"New AV1 codec: speed up video loading in the browser - mp4gain.com","og_description":"New AV1 codec: speed up video loading in the browser In this tutorial, we will learn how to use video on the web, as it is in 2019. Chrome and Firefox have started to support the new AV1 codec; you can make a video for them in half. Let’s talk separately about how to replace … Continue reading \"New AV1 codec: speed up video loading in the browser\"","og_url":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/","og_site_name":"mp4gain.com","article_publisher":"https:\/\/www.facebook.com\/mp4gain","article_published_time":"2020-12-09T23:09:38+00:00","og_image":[{"url":"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg","type":"","width":"","height":""}],"author":"R. Arias","twitter_card":"summary_large_image","twitter_creator":"@mp4gain","twitter_site":"@mp4gain","twitter_misc":{"Written by":"R. Arias","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#article","isPartOf":{"@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/"},"author":{"name":"R. Arias","@id":"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc"},"headline":"New AV1 codec: speed up video loading in the browser","datePublished":"2020-12-09T23:09:38+00:00","mainEntityOfPage":{"@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/"},"wordCount":387,"image":{"@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg","keywords":["av1 is a personal avatar","av1 when","do av 10","does youtube use av1","how av1 works","how does av1 work","how to convert av1 to mp4","how to encode av1","how to get av1 on samsung tv","how to play av1 video","how to play av1 video in mx player","how to play av1 video in vlc","is av1 better than hevc","is av1 royalty free","jak wejsc do av1","was bedeutet av 17","was bedeutet av1","was bedeutet av1 und av2","was ist av1","was ist av1 codec","what does av1 and av2 mean","what does av1 mean","what does av1 mean kennel club","what does av1 mean on my tv","what does av1 rgb mean","what does av15+ mean","what is av1","what is av1 and av2","what is av1 codec","what is av1 on my tv","what is av1 on tv","what is av1 settings","what is av1 settings youtube","what is av1 youtube","when will av1 be released","who use av1 codec","why is av1 so slow","will apple support av1"],"articleSection":["Audio and video"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/","url":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/","name":"New AV1 codec: speed up video loading in the browser - mp4gain.com","isPartOf":{"@id":"https:\/\/mp4gain.com\/mp4gain\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage"},"image":{"@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg","datePublished":"2020-12-09T23:09:38+00:00","author":{"@id":"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc"},"breadcrumb":{"@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#primaryimage","url":"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg","contentUrl":"https:\/\/habrastorage.org\/webt\/e6\/ma\/qx\/e6maqxoeu5hqqh3ilpk5vh6ozvk.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/mp4gain.com\/mp4gain\/new-av1-codec-speed-up-video-loading-in-the-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mp4gain.com\/mp4gain\/"},{"@type":"ListItem","position":2,"name":"New AV1 codec: speed up video loading in the browser"}]},{"@type":"WebSite","@id":"https:\/\/mp4gain.com\/mp4gain\/#website","url":"https:\/\/mp4gain.com\/mp4gain\/","name":"mp4gain.com","description":"Mp4 Gain Official Website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mp4gain.com\/mp4gain\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc","name":"R. Arias","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g","caption":"R. Arias"},"description":"R. Arias is the author of this article and has extensive experience for more than 30 years as a recording engineer and audio specialist, as well as more than 20 years of experience creating algorithms related to audio and video. Linkedin","sameAs":["https:\/\/www.linkedin.com\/in\/ricardoariaszorrilla\/"],"url":"https:\/\/mp4gain.com\/mp4gain\/author\/mp4gain\/"}]}},"_links":{"self":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/posts\/2749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/comments?post=2749"}],"version-history":[{"count":0,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/posts\/2749\/revisions"}],"wp:attachment":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/media?parent=2749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/categories?post=2749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/tags?post=2749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}