HTML and CSS Reference
In-Depth Information
What's the “best” codec?
Asking what's “better” (WebM or MP4) starts an argument that makes debating the merits of Mac or PC
seem like a quiet chat between old friends.
To d i s c u s s i in h e r e in t c h a r a c t e r i s t i c s , y To u in e e d t To a r g u e a b To u t m a c r To b l To c k t y p e i in B - f r a m e s a in d s i x - t a p i l t e r -
ing for derivation of half-pel luma sample predictions—for all intents and purposes, “My flux capacitor is
bigger than yours!”
Suffice it to say that for delivering video across the Web, both WebM and MP4 offer good-enough quality
at web-friendly compression. Ogg Theora is less web-friendly.
The real differences are royalty encumbrance and hardware acceleration. Some people need to pay if they
have MP4/H.264 video on their website.
There are many chips that perform hardware decoding of H.264, which is why watching movies on your
mobile phone doesn't drain the battery in seconds as it would if the video were decoded in software.
At the time of this writing (July 2011, a year after WebM was open sourced), hardware-decoding chips for
WebM are just hitting the market.
Previously, we've used the
<video src=”...”>
syntax to specify
the source for our video. This works fine for a single file, but
how do we tell the browser that there are multiple versions
(using different encoding) available? Instead of using the single
src
attribute, you nest separate
<source>
elements for each
encoding with appropriate
type
attributes inside the
<audio>
or
<video>
element and let the browser download the format that it
can display. Faced with multiple
<source>
elements, the browser
will look through them (in source order) and choose the first one
it finds that it thinks it can play (based on the
type
attribute—
which gives explicit information about the container MIME type
and the codec used—or, missing that, heuristic based on file
extension). Note that in this case we do not provide a
src
attri-
bute in the media element itself:
1.
<video controls>
2.
<source src=leverage-a-synergy.mp4 type='video/mp4;
¬
codecs=”avc1.42E01E, mp4a.40.2”'>
3.
<source src=leverage-a-synergy.webm type='video/webm;
¬
codecs=”vp8, vorbis”'>
4.
<p>Your browser doesn't support video.
5.
Please download the video in <a href=leverage-a-
¬
synergy.webm>webM</a> or <a href=leverage-a-
¬
synergy.mp4>MP4</a> format.</p>
6.
</video>
