HTML5 Media - HTML5 Advertising - page 153

Figure 7-1. The visual differences between interlaced video footage (left) and progressive (right)
FPS
Frames per second (FPS) are the individual frames of video that make up the entire video sequence. Think of this as a
group of images that make up one second of video. Did you ever make a flipbook when you were a kid, where you draw
the same picture on every sheet of paper with slight adjustments so that when you flip through, it creates a seamless
animation? This is essentially what video is doing. If you remember the discussion on CSS sprite sheets in Chapter 5,
the same principal applies here. For the deinterlaced video, the typical FPS is 23.976 or 29.97 because of the blended
frame occurrence, whereas the typical FPS of progressive video is 24 or 30 because of full individual images being
rendered without the blend. Video with lots of fast-moving action will generally need a higher frame rate to combat
the unwanted shuddering effect, and the same rule applies if you are looking for super-crisp slow-motion video.
Some high-end cameras shoot frames of video upwards to a few thousand frames per second, which can create really
amazing slow-motion footage to be used in a creative. Again, for web playback, you'll typically want to use 24 or 30 FPS.
Aspect Ratio
Much like images, videos have a width property and a height property. In video, much like images, it's important
to maintain the proportion of the original dimensions. In videos, aspect ratios are the proportional relationship
between its width and its height. Most common aspect ratios in web video are 16:9 for wide-screen format and 4:3
for standard format. This proportional relationship is directly tied to the size of the pixels within the video, because
they can be square or rectangle. You will often hear this being referenced as “sixteen by nine” or “four by three.” It's
important to preserve the aspect ratio of the video you are transcoding because this keeps a one-to-one relationship
between the source video asset and the transcoded file. However, in some cases, your creative will require you to
serve your video asset into size not designed in 16:9 or 4:3. In this case, you will use a technique called letterboxing or
pillarboxing , which adds black bars where there is empty space within the allotted video space. Figure 7-2 showcases
a proportionally correct video with letterboxing and pillarboxing applied for 16:9 and 4:3 aspect ratios.