HTML and CSS Reference
Update and test drive
Update your <source> elements like below, and give your page a test drive:
<video controls autoplay width="512" height="288" >
<source src="video/tweetsip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p> Sorry, your browser doesn't support the video element </p>
The cod ecs for mp4 are more co mplicated th an the other two because
h.264 supports vari ous “profiles, ” different e ncodings for different
uses (lik e high bandw idth vs. low bandwidth). So, to get t hose right,
you'll ne ed to know more details about how yo ur video was encoded.
Most likely, your video will play as before, but you'll know that behind the scenes you're
helping the browser with the additional type and codec information. If and when you do
your own video encoding, you'll need to know more about the various options for the type
parameters to use in your source element. You can get a lot more information on type
parameters at http://wiki.whatwg.org/wiki/Video_type_parameters.
Q: Is there any hope of getting to one
container format or codec type in the
next few years? Isn't this why we have
A: There probably won't be one encoding
to rule them all anytime soon—as we said
earlier, this topic intersects with a whole host
of issues, including companies wanting to
control their own destiny in the video space
to a complex set of intellectual property
issues. The HTML5 standards committee
recognized this and decided not to specify
the video format in the HTML5 specification.
So, while in principle HTML5 supports (or is
at least agnostic to) all of these formats, it
is really up to the browser makers to decide
what they do and don't support.
years as this is all sorted out. And, as always,
keep in mind what your audience needs and
make sure you're doing what you can to
Q: If I want to encode my own video,
where do I start?
A: There are a variety of video capture
and encoding programs out there, and which
one you choose is really going to depend
on what kind of video you're capturing and
how you want to use the end result. Entire
topics have been written on video encoding,
so be prepared to enter a world of all new
acronyms and technology. You can start
simple with programs like iMovie or Adobe
Premiere Elements, which include the ability
to encode your video for the Web. If you're
getting into serious video work with Final
Cut Pro or Adobe Premiere, these software
programs include their own production tools.
And, finally, if you are delivering your videos
from a content delivery network (CDN),
many CDN companies also offer encoding
services. So you've got a wide variety of
choices depending on your needs.
Q: Can I play my video back
A: That functionality hasn't yet been
standardized, although you'll find ways to do
it with some of the browsers if you search
the Web. Some of the browsers supply a
fullscreen control (for instance, on tablets)
that give the video element this capability.
Also note that once you've got a way to go
fullscreen, what you can do with the video,
other than basic playback, may be limited
for security reasons (just as it is with plug-in
video solutions today).
Keep an eye on this topic if video is
important to you; it will surely be an
interesting one to watch over the next few