In this guide, we will learn how to use video on the Web, as is customary in 2019. Chrome and Firefox have begun to support the new AV1 codec - for them, video can be made half as much.
We’ll talk separately how to replace GIFs with video in AV1 and H.264 - then its size will drop by 20-40 times.
We in the Evil Martians already use it on our website and on Amplifer . In this article, I will share the experience of implementing AV1 and step-by-step tell you how to embed a video so that it works in all browsers.
Codecs and containers
With pictures, everything is simple: either JPEG with PNG for all browsers, or make more compact files in WebP for modern browsers . We can always be sure that the files .pngwill have a PNG format (with the rare exception of PNG bombs that imgproxy can protect against ).
Video files are more complicated. The file extension ( .mp4, .wmv, .webmor .mov) speaks only of the container. While video files consist of three different components:
The video codec determines how much you can compress the video, and what you have to sacrifice. The main video codecs of the Web: H.264, HEVC, VP9 and, now, AV1.
The audio codec compresses the sound. Of course, it is not needed if there is no sound in the video. Popular choices are MP3, Opus, and AAC.
The container stores both video (compressed by some kind of video codec) and audio stream (compressed by some kind of audio codec). As well as additional data, such as subtitles and meta-information. Popular containers: MP4, MOV, WebM.
When we see the file extension .mp4, we can only say that the MP4 container was used. But the codecs in it may be different - the author could take H.264 and AAC, AV1 and Opus, or something else.
Behold AV1
AV1 is a video codec that was released a year ago, in March 2018. It was created to surpass the codecs of the previous generation - HEVC, VP9, H.264 and VP8.
Due to new optimizations, AV1 compresses video 30-50% better than H.264 or VP8, and up to 30% better than HEVC. But the codec was released recently and so far has several childhood diseases:
The current encoder is not optimized. AV1 compresses the video very slowly (a new fast encoder on Rust is already in development). The codec is not suitable for streaming. If we are talking about static videos on landings - this problem is not relevant to us.
So far, the codec is only supported on desktop Chrome and Firefox on Windows. There is no support for Safari and Edge yet (although Microsoft is already testing it). You will need at least 2 files: AV1 for Chrome and Firefox and H.264 for other browsers.
The coolest thing about AV1 is that the “ jackalization ” squares do not appear at low bit rates .
Comparing picture quality for different codecs at different bitrates - AV1 wins
Cooking AV1 correctly
Let's finally get down to practice. First, let's decide on the container. In theory, AV1 can be placed in different containers, but MP4 is more compact and recommended in the specification. For the sound in AV1 we take Opus, because it compresses the sound perfectly .
In order for the video to work in all browsers, we will generate 3 files:
For desktop Chrome and Firefox on Windows ( 31% of the market as of March 2019): MP4 container with AV1 for video and Opus for sound.
For the rest: a large MP4 file with H.264 and AAC.
You can take only AV1 and H.264 - the video will also work for everyone.
For compression, I recommend taking the console FFmpeg . There are many graphical utilities, but it’s easier to save options in the console and then start the conversion automatically. Be sure to use the latest version of FFmpeg. Versions prior to 4.1 do not support AV1 in MP4.
We turn to the conversion of the H.264 file, which we need for older browsers. Since all of our files use the MP4 container, I will use .av1.mp4, .hevc.mp4and .h264.mp4postfixes. Do not be alarmed by the long team, we will then analyze it all:
# Замените SOURCE.mov на путь к исходному видео-файлу
ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libfdk_aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4
Now open video.h264.mp4. If the quality is good and the size is large, try increasing it -crf( -crf 26later -crf 28). This option will reduce file size at the cost of reduced quality. Balancing quality and size is an art.
If there is no original video file, then you can convert the old H.264 file to AV1.
Now it's time to convert AV1 - I remind you, it will be longer than H.264. The codec does not yet use the full power of the processor (it makes sense to start converting several files in parallel).
Copy video.h264.mp4, video.hevc.mp4and video.av1.mp4the root of your site.
Understanding FFmpeg Options
Do the commands above look like a demon summoning spell? Do not worry, this is not PostCSS . Let's look at the options.
-i SOURCE.movindicates the input file, from where FFmpeg will take the video and audio streams, compress them and pack them in a new container.
-map_metadata -1removes meta information from the video (for example, the program in which the video was created). Such information is rarely useful on the Web.
-c:a libopusor -c:a libfdk_aacexpose audio codecs. If you do not need sound, replace them with -an.
-c:v libaom-av1selects a video codec - a library that will compress the frames of the video stream.
-crf 34- Constant Rate Factor, balance of quality and size. It's like a JPEG quality slider, only it goes in a different direction (0 is the best quality and the largest file). The CRF scale is different for H.264 and AV1 - for H.264 it goes up to 51, for AV1 it goes up to 61. The CRF for AV1 and H.264 will be different.
Facebook selected an approximate correspondence between the CRF values for H.264 and AV1:
19 → 27, 23 → 33, 27 → 39, 31 → 45, 35 → 51, 39 → 57.
-preset veryslowforces H.264 and HEVC codecs to compress the file even more at the cost of a sharp increase in conversion time.
-profile:v mainused by H.264 to select a codec profile . Only “Main” will work in Safari.
-b:v 0sets the minimum bitrate for AV1, so that the video has consistent quality.
-pix_fmt yuv420p(pixel format) is a tricky way to reduce file size. It leaves the original resolution for brightness, but reduces the resolution for color. Our eyes see color worse, therefore they do not notice this trick. Remove this option if in your case it will interfere.
-movflags +faststartmoves everything important to the beginning of the file so that the browser can play the video until the download is complete.
-vf "scale=trunc(iw/2)*2:trunc(ih/2)*2"change the size of the sides of the video to the nearest even ones (some codecs can work with a resolution of 300 × 200 and 302 × 200, but will not work with 301 × 200). If you are sure that everywhere the resolution is divided by 2 - you can remove this option.
-strict experimentalneeded for AV1, its encoder is still experimental.
video.av1.mp4sets the name of the resulting file.
We launch video in browsers
Now we need each browser to download the video that it supports. For this,there is an attribute type. And I advise you to read about the options at.
look like expressions if…else- the browser reads them from top to bottom until it finds one whose typesupport it is.
You typecan specify the entire file format in: container ( video/mp4for MP4), video codec ( av01.0.05M.08for AV1, hevcfor HEVC and avc1.4D401Efor H.264) and audio codec ( opusfor Opus and mp4a.40.2for AAC).
Bonus: how to convert GIF to AV1 and H.264
In 2019, using GIFs for short videos is a big sin. GIF weighs 20-40 times more than H.264 or AV1. GIF hits the CPU harder and makes the battery leak faster. If you need a short looped video, take video codecs. And FFmpeg can convert video directly from GIF.
Options autoplayand loopmake a video of "USIC" - cyclenes video that plays immediately after the page loads. playsinlineblocks Safari from opening the video in full screen when you click on the video.
Withdrawal time
AV1 is still experimental. But it can already be used to make a quarter of your users happier. A pair of FFmpeg commands will generate video files.
March 5, 2019 at 07:38
