Jamstack Explorers

Video Streaming with Adaptive Bitrate with Scott Wachtmann & Jen Brissman

Understanding Video Codecs, Containers & Browsers

If you deeply understand codecs, containers, and browsers, and the relationship between the three, feel free to skip this video! Otherwise, this purely informative video will help connect the dots.


In this stage, we'll be learning about codecs, containers, and browsers. To begin with, let's talk about codecs. The ovals in this diagram represent the codecs. The word "codec" is a mash-up of the words "code" and "decode". In short, it's a program that uses algorithms to encode or compress and decode or decompress a digital data stream.

For our mission purposes, we will be focusing on video data streaming. If we think of a video as a collection of sequential images, a codec compresses all of those images into a smaller, more manageable file, making it easier to share or send over a network --and then reconstructs them for viewing and playback. In many cases, the images in a video change only slightly when looked at in sequence and some codecs provide algorithms that take advantage of this by only storing the changes between images.

Moving our attention to the squares in the diagram, let's talk about containers. Containers, simply put, are file formats that can package up multiple file streams for video and audio, codecs that provide instruction for decompression, and metadata like subtitles and SEO. They're basically like zip files.

Some of the names should be familiar as they are also file extensions. The information in the container helps decode or piece the video back together from the encoded compression. The arrows show which codecs can be found in which containers. Inside each container, you can see the browsers that natively support that container.

This is important because we want to know that our containers will be supported by the browsers that our users will be using. Browsers implement code to unpack containers, perform decompression and play video and audio. Different browsers can work with different codecs and containers. The diagram summarizes which codecs and containers can be used by the set of four popular browsers: Chrome Safari, Firefox and Edge.

The browser icons are included in each container that they can host. We see that VP8 and VP9 codecs, created by Google, can be included in WEBM and MP4. AV1 can also be included in MP4 and WEBM. h264 and h265, created by Apple, can be included in MP4 and MOV. Theora, and open-source codec, can be included in an OGG container.

MP4 and WEBM can be used in all four browsers natively. Only Firefox can host an MOV on the web. Chrome, Edge, and Firefox can host an OGV container.


your progress