HTML and CSS Reference
In-Depth Information
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>
</video>
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
standards?
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
support them.
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
fullscreen?
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
