Nowadays we are surrounded by high-quality video content that easily grabs our attention. But because of the high-quality graphics, this content comes in large sizes. You can always compress such files, but compression takes down the quality of the video. In this topic, you will learn how to compress video content with video codecs without losing the video quality. In addition to the codec, you will learn what containers are and why do we use them. Let's begin!
Codec
Video compression can often result in the loss of quality. It can make your video look grainy, sound flat, run slow or sometimes not run at all. These are all the things we want to avoid when we put video content on our website, so for that we will use a codec.
A codec, shorter-term for coder-decoder, is a technology used for compressing the data for storing and sending and decompressing for playing the video, in this case, on your website.
Compression has two types:
- lossless -- the type of compression that retains 100% of file information
- lossy -- the type of compression that discards some file data for easier file transition.
When making a website, lossless compression is a better option, because you can provide a high-quality experience for your visitors.
Furthermore, here is a list of common video codecs that you might use:
| Video codecs | Usage |
| HEVC/H.264 | BlueRay disc |
| HEVC/H.265 | 4k video |
| VP8 | Short looped animation |
| VP9 | Streaming videos |
Not all browsers support all codecs. Here is a list of browsers that support different kinds of codecs.
| Codec | Chrome | Firefox | Microsoft Edge | Safari | Opera |
| HEVC/H.264 | Yes | Yes | Yes | Yes | Yes |
| HEVC/H.265 | No | No | Yes | Yes | No |
| VP8 | Yes | Yes | No | No | Yes |
| VP9 | Yes | Yes | No | No | No |
Container
Now that we've learned what a codec is, it will be easier to understand what a container is. A container is a place that holds the compressed video of a codec. A container is often referred to as a format of a file that it contains. Meaning that, if the container holds an MP4 file, it will be represented by the .mp4 file type.
Here is the list of most commonly used video containers:
- MP4 -- compatible with HEVC/H.264 and HEVC/H.265
- AVI -- a wide range of codecs
- MOV -- used for Apple's Quicktime player
- OGG -- compatible with VP8, VP9.
[ALERT]Remember! Every video codec has a compatible video container. Think thoroughly about which codec you will use with which container.[/ALERT]
Summary
So, in this topic you've learned the difference between video containers and codecs, and how to use them. Let's put this new knowledge into practice!