6 Things To Know About Video For The Web - Part 2

Have you already read Part 1 of this two-part series?  If not, check it out, then read the last 4 tips below.

3. Always deinterlace

If you've bought a TV recently, you may have heard the terms 1080i or 480p. These numbers aren't there to make the cable girl look like she knows what she's doing -- these numbers actually mean something. The numbers (1080, 480, etc.) are the dimensions of the picture you are watching. If you are looking at a 1080i picture, then the screen size or aspect ratio is 1920 pixels wide by 1080 high (1920x1080).

The letter "i" stands for interlaced, which is the format all video on TV is broadcast. Interlacing is simply the interlacing of two frames together. You begin with frame 1. Your TV only fills in the rows for every other row (1, 3, 5, etc.) with frame 1's video. In the even lines (2, 4, 6, etc), the TV uses the lines of video from frame 2. The reason for interlacing goes back to the early days of TV. Before the LED monitors, all video was displayed on CRT (Cathode Ray Tube) monitors. The way these CRT's work is they shoot a beam across the top of the screen. The opposite side reflects it back and the beam zig-zags all the way down the screen until you have your picture. Once its done with one frame, it starts at the top and does it all over again for the next frame. If you are looking at 1080 screen, you would have 1080 lines stacked on top of each other. Well, in the old days, this caused a problem. By the time the beam was at the bottom of the screen, the lines at the very top were starting to fade, so when the beam started again at the top, the line was refreshed with a new bright beam. When this is done at a high rate, the picture would flicker. The reason this works is that it now takes half the time complete one cycle through a frame, which is quick enough so the first line does not fade, thereby removing the annoying flickering. So why is this a problem now?

HD televisions and LED monitors are what are called progressive scan display. The technology of these has advanced to the point where there is a danger of that fading that happens on CRT monitors. Progressive scan displays do not interlace the frames of video but simply display the entire frame concurrently. This becomes a problem when interlaced video is displayed on a progressive display. You can see from the image below that when an interlaced video is viewed in a progressive display that the 2 frames are actually visible. This is especially true with high motion frames like the one below.

That long explanation leads into the most important thing to look out for when encoding video for the web: since the vast majority of video is interlaced, you ALWAYS need to deinterlace your video when encoding or you will get what you see above. All major video encoders have this ability but they won't do it by default.

4. Know your aspect ratios

When dealing with video size, there are many different dimensions or aspect ratios. An aspect ratio is the ratio of the width of the frame to its height (e.g. 4:3, 1.66:1, 1.85:1, 2.20:1 and 2.35:1 and more).  All screen sizes (like photographs, file screen, TV screens, american, european formats, etc.) share a commonality: they are all horizontally laid out. This is to closely resemble how humans see -- our eyes are laid out next to each other. If our eyes were on top of each other (creepy), the ratios would be reversed.

The most common ratio is the Standard Definition(SD) or 4:3 ratio. This dimension was reached in part by Thomas Edison in 1892 because it had the best ratio of the width between the perforations on the 35MM film strips while leaving room on the film for the sound by 4 perforation of film high. One reason for alternate aspect ratios came when TV was becoming popular. The movie producers wanted to compete with a wider more panoramic screen and widened their screens to 1.85:1(5.5:3)

As of February 17, 2009, the standard for television shifted from the SD standard to the High Definition(HD) standard of 16:9. The HD format came about in 1980 when a man by the name of Kerns H. Powers. Back then, no one was making video at that ratio, but the reason he proposed this was to suit the many aspect ratios out there. Powers discovered that all of those aspects, when normalized to constant area, would fit within an outer rectangle and, when over-lapped, would share a common inner rectangle. The aspect ratio of these rectangles is simply the geometric mean of the extremes of 4:3 and 2.35:1, which is about 16:9. So with a 16:9 ratio, you can fit all major aspect ratios on the screen.

5. A word about Codecs

I should cover first what codecs are since, up until recently, I was one of those who used the term but really had no idea what it meant. Codec stands for COpmpression/DECompression. Simply put, when a video is stored, it is compressed, and during playback, it is decompressed frame-by-frame by your player.

Flash video deals with two codecs: Sorenson Spark was the first and ON2VP6 is the most recent version. There are benefits of using one over the other (beside the fact that one is just the latest greatest version). Knowing the ins and outs of each as well as who will be viewing your videos is important when choosing your codec.

Initially, you need to consider that Sorenson is compatible with FP6 and later, while ON2VP6 is compatible with FP8 and later. So, if you have a large amount of visitors, or know only your mom who still has FP6 will be viewing your site, then Sorenson is your best bet.

ON2VP6 is a more modern codec in that it assumes that you have a faster processor. When encoding a video using ON2VP6, you will get smaller files than Sorenson because the encoder is stripping out more information. When the player plays it back, however, it's called upon to do more to fill this information back in.

The last word on choosing your codec is the alpha channel. If you need to take advantage of using transparency in your video, then you need to choose ON2VP6, which supports alpha transparency.

6. How to serve video

Video comes in two flavors: progressive and streaming. Again these are terms I used in the past, didn't fully understand, and even used interchangeably; however, they are quite different.

Progressive video is just like other assets on the web like images and other files in that it is fully downloaded and cached on your computer. Most sites, including YouTube, Vimeo, and other sites that do not have DRM restriction serve video this way. This is because it's easer to implement and does not add any extra cost.

Streaming video for Flash requires a third party server to deliver video and is never downloaded and cached on your computer but is served from the server in little "packets." Your player takes these packets and buffers them. Then, once they leave the buffer, they are gone forever. Sites like Hulu.com, Netflix, and other sites that want to protect their content use this method.

Questions

If you've gotten this far in the post, thanks for reading, and I hope you learned a thing or two. This is by no means the end-all word on internet video. If you have any questions or corrections, please put me in my place and add your comments below! I would also like to hear others' thoughts on internet video. Where do you see web video heading? What are your experiences with mobile video?