HTML and CSS Reference
Another popular codec in the HTML5 video space is VP8. Once a technology from On2 and later acquired by Google,
it was renamed to the WebM codec. Google has been pushing this as the de facto codec to use when delivering
video using HTML5 in modern browsers. However, for it to take full shape, browser vendors need to adopt this as
the standard for their video requirements. As you've just learned, Apple and Microsoft haven't taken much to WebM
because of their longtime support for H.264. VP8/WebM is comparable to H.264 in its encoding algorithms and
quality, but more importantly it comes with no license costs, which is a huge win for open web standards and the
browsers such as Firefox, Chrome, and Opera that support it.
Although H.264 is an open standard, it is not free. It is based upon a pool of video compression and related technology
patents contributed by various companies in exchange for “fair, reasonable, and nondiscriminatory” licensing fees.
Mozilla, Opera, and other free and open source advocates opposed the use of any technology that might require
licensing fees to produce or distribute web content because doing otherwise would go against their support for the
open Web. Because of this, they've relied on an open source video compression technology in addition to VP8, called
Theora from the Xiph foundation. The Ogg Theora war on H.264 ended when HTML5 working group members agreed
that rather than defining Ogg Theora or H.264 or anything else as the “baseline” codec for video served via the HTML5
video tag, the decision should be left to the market and to the votes of web users and Internet broadcasters (this
obviously created fragmentation). Theora is the old VP3 codec that was used in early versions of Flash Video (FLV).
They've taken the older version of that and improved on it; it's not as efficient as H.264, but it's open source.
Historically, HTML has always worked with every other type of media file for images; there is no baseline graphic
format. For example, developers decided for themselves whether to use the GIF, JPEG, or PNG format. Modern
browsers support them all, and in my eyes video should follow suit.
GOP and Keyframes
In compression techniques, you have what is known as a group of pictures (GOP). This group is dictated by keyframe
intervals. If you've ever done any Flash animation or any timeline-based animation work, you know that keyframes
are significant or key points in time where something important happens. In video compression, these are the points
in video playback in which the encoding/transcoding engine gets a chance to rest and reanalyze the video content to
make sure it's on track with the rest of its encoding process. Some codecs support different compression algorithms
such as I, P, and B frames.
• I-frames : This is the least compressible frame but does not require other frames to decode.
• P-frames : This uses information from previous frames to decompress.
• B-frames : This uses previous and forward frames of video to obtain a reference and get the
highest amount of intelligent compression.
Figure 7-5 shows the video keyframes for different frame types. Keep this information in the back of your mind
if your client asks you to optimize their video content for various screens using the HTML5 video element. However,
note that certain codecs allow only for specific keyframe settings.