HTML and CSS Reference
In-Depth Information
Figure 7-2.
The differences between letterbox video and pillarbox
The most common scenario for this is when you serve video into an ad unit of varying sizes or a publisher's video
player. If the advertiser's video asset is 16:9 and the player environment is 4:3, you'll notice black bars or letterboxing
on the top and bottom of the video to preserve the proportion of the video.
Tools
Before I dig into the big topic of video codecs, you may be wondering why you should learn all of this video-related
information when working with HTML5. Well, video is by far the most prevalent medium in online advertising, and
ensuring optimal video playback will win your clients over. So, I'll cover the different video properties to be aware of as
well as the different codec/formats to be on the lookout for in the space. It all boils down to developing and delivering
optimal HTML5 video for the fragmented browser space. Let's look at some of the tools for creating HTML5 video
before getting into the implementation.
Why are there all of these different video settings, variations, and fragmented browser and device support? Well,
the patents, royalties (i.e., money), and compression quality are what keeps something from being open source and
free to use. I like to think of it like this: whenever you have a really great product, you'd typically charge for the use of
it even though there are free alternatives. For instance, you pay for cable television because it's a better quality and
provides more channels, as opposed to standard over-the-air antenna broadcast where you get limited channels and
the broadcast is of poor quality. Currently, these fragmented codecs and video formats are something you need to
tolerate in the HTML5 space if you want to deploy your video content to the widest user base. There are many tools to
help you do this for serving online video. Many of them are used to convert videos into their appropriate formats
using free or purchased programs on your computer. This includes but is not limited to open source FFMPEG
(
http://ffmpeg.org
)
, FireOgg (
http://firefogg.org
)
, QuickTime Pro (
http://apple.com/quicktime
)
, and Adobe
Media Encoder (
http://adobe.com/products/mediaencoder.html
)
, and even more robust video applications such
as Adobe After Effects (
http://adobe.com/products/aftereffects.html
)
, Avid (
http://avid.com
)
, and Apple Final
