Smooth Playback

Interframe Compression, Flash, and HTML5

Smooth Playback is a webcomic about web video.

If you've dealt with web video, you've probably dealt with a similar dilemma to our protagonist, though perhaps not for the same reasons: you want to skip to a particular frame in the video you've uploaded but can only seem to reach the surrounding frames. This is because you can only skip to keyframes if you're viewing a video using the currently-omnipresent Flash plugin.

There are two main types of video compression: the first is intraframe compression, which treats each frame as an individual entity and encodes it accordingly (basically, each frame is treated as a JPG image). Because all of the data in every frame is retained, it results in large files, so it doesn't make a whole lot of sense to use it these days.

That's where interframe compression comes in. Interframe compression takes advantage of the nature of video to use information from surrounding frames to compress the images in a video. Each keyframe in this mode of compression retains all of its information, and the subsequent frames only need to record the changes.

This is great for reducing file size because it takes advantage of video as a medium -- there are going to be similarities between frames, so why store these more than once? It's more important to store the differences between frames so less information is stored redundantly.

Most video on the web right now is displayed using the Flash plugin, which only allows you to skip to keyframes. You can definitely feel the difference between this and the ability to smoothly skip to whatever frame you like in a desktop client like Quicktime or VLC, which have access to more resources in terms of memory, graphics, and CPU than a plugin does (and if you haven't noticed it before, sorry, I may have just ruined the Internet for you).

If you're a web video buff (or even a casual follower of web video news), you've heard some hype about HTML5 video. One of the big advantages of HTML5 video is that it replicates this desktop software experience of being able to skip to any frame in a video, not just the keyframes, because video encoding and display is built right into the browser, which is desktop software (and consequently has access to all those precious resources). In a modern browser like Chrome, you can already see the difference. And chances are, it won't be that long before other browsers catch up!

Keep Learning
Here are some related guides and posts that you might enjoy next.