How Does Video Streaming Play Without Buffering? The Basics of Streaming and Codecs

Press a video on YouTube or Netflix and playback starts with almost no wait. When the internet slows down, the quality blurs for a moment but it usually doesn’t stall. You haven’t downloaded the whole two- or three-hour movie in advance, so how can you watch it right away?

In this post, I’ll unpack, without any code, how video plays without buffering, and what the streaming and codecs beneath it are.

Video isn’t received whole, but a bit at a time #

When you think of watching a video, it’s easy to picture downloading the whole file, but streaming isn’t that. The video is split into small chunks, and the part you’re about to watch is received and played first while the next chunk is fetched right after.

You can compare it to drinking water you pour out. Rather than filling a whole bathtub before drinking, you drink from a cup while filling the next one. So even a two-hour movie can start right away once just the first few seconds arrive, and the rest keeps filling in as you watch. Thanks to this buffer fetched a bit ahead of the playback point, it doesn’t stall even if things slow down briefly.

A codec compresses heavy video #

Video is enormous in data. Dozens of images pass by per second, so untouched video is huge in size even when short. There’s no way to send it fast as is.

So video is compressed with a technology called a codec before being sent. As we saw with image compression earlier, it greatly shrinks the size by removing information people’s eyes don’t easily notice and by not repeatedly recording the parts that don’t change between consecutive scenes. The receiving side unpacks this compression and spreads it back into video. This pair — compressing when sending and unpacking when watching — is the codec.

The quality changes to match the network #

The clever part of streaming is that it changes the quality to match the situation. The service prepares the same video in several qualities in advance. Then, if the viewer’s internet is fast, it picks high-quality chunks; if it slows, low-quality chunks.

This is called adaptive streaming. The experience of the video blurring for a moment instead of stopping when the network slows is exactly this. The idea is that keeping playback going at lower quality is better than cutting off and making you wait.

Video is received from somewhere nearby #

Because video is heavy, fetching it from far away is slow. So services make active use of the CDN covered earlier. Popular videos are copied in advance to nearby servers around the world, and a user receives from the server closest to them.

Thanks to this, there’s no need to go all the way to a distant headquarters server; chunks are fetched fast from somewhere nearby. Small chunks, sizes shrunk by a codec, and a nearby CDN all mesh together to produce buffer-free playback.

So, when you handle video #

When uploading or handling video in a service, there are a few things worth weighing together. Keeping the original only at excessively high quality makes delivery heavy, so preparing several qualities is better for the user experience. Autoplay is convenient, but keep in mind it can use a lot of data on mobile.

Live broadcasts work on a similar principle, but because of the process of gathering and sending chunks, the picture arrives a few seconds later than reality. That’s why you feel a gap between live chat and the picture.

Why this makes work easier for non-developers #

• You understand playback problems. When a video stalls or the quality fluctuates, you can know and explain that it’s the working of the network and adaptive streaming.
• You gauge cost and quality. Knowing that video is delivered over a CDN, you can understand why delivery cost is large for video-heavy services.
• You prepare content appropriately. Knowing about multiple qualities, autoplay, and data use, you can weigh the user’s environment when uploading video.

Wrapping up #

Today we looked at how video is delivered a bit at a time in small chunks, compressed with a codec, changes quality to match the network, and is received from a nearby CDN to play without buffering. The key is that it isn’t received whole but fetched a little ahead in advance.

If you’re curious about the CDN and cache that deliver video fast, read Cache and CDN — What “Try Clearing Your Cache” Really Means; if you’re curious about the compression that lets a codec shrink the size, read Why Are There So Many Image File Types.