HTML and CSS Reference
In-Depth Information
</audio>
Videos usually include two tracks in the same container file: a video track and an audio track. These two
tracks will use two different codecs, and a browser must support both if it's to play the complete media. If
you include both codecs in a
type
attribute, you can help the browser determine how to handle the media.
Multiple codecs appear in a
type
attribute separated by commas, but unfortunately it can be tricky to
include those commas without throwing validation errors. To pass validation (for the present, at least) the
codecs need to be wrapped in double quotation marks, and the complete value of the
type
attribute needs
to appear in single quotes, like this:
<video controls>
<source src="video/Pod_People.webm"
type='video/webm; codecs="vp8,vorbis"'
>
<source src="video/Pod_People.ogv"
type='video/ogg; codecs="theora,vorbis"'
>
<source src="video/Pod_People.mp4"
type='video/mpeg; codecs="avc1.42E01E,mp4a.40.2"'
>
</video>
It's a bit messy, but it's valid. If you prefer life on the edge, most browsers are happy to accept comma-
separated codecs without double quotes, though you'll instead need to omit any spaces, like
type="video/webm;codecs=vp8,vorbis"
. If you want to play it safe and are a stickler for validation, use
the nested quotation marks. It's all part of the media encoding thrill ride.
The
source
element can also carry an optional
media
attribute, indicating the media type (screen, print,
Braille, aural, handheld, etc.) for which the embedded media (audio or video) is intended. The value of a
media
attribute is a comma-separated list of
media queries
, each consisting of a media type and one or
more expressions about the media features, such as screen width or aspect ratio. This way you can offer
different audio or video optimized for different displays or devices.
Media queries are a concept introduced in CSS3. They extend the functionality of media
types and allow a web developer to programmatically check for certain device or media
properties, delivering different content or style rules to meet different criteria. You'll learn
a bit more about media queries later in this topic, and in the mean time you can also
read up on them in the CSS specification (
w3.org/TR/css3-mediaqueries
).
You can see an example of a
media
attribute in Listing 5-7. In this scenario, the first
source
element
targets screen media (as opposed to print or Braille, which would have very different needs) on devices at
least 600 pixels wide, which we can assume is a computer or tablet with a large enough screen to enjoy
the full-size video. The second
source
element targets screens less than 600 pixels wide, serving those
smaller displays a smaller, more mobile-friendly video. You would naturally include the usual multiple
formats and fallback content, but we left them out here for the sake of brevity.
Unfortunately, no browsers yet support this technique at the time we're writing this, but it never hurts to
begin planning for the future.
Listing 5-7.
A
video
element featuring different sources optimized for different media
<video controls poster="images/Gamera.jpg">
<source src="video/Gamera.ogv"
media="screen and (min-device-width: 600px)"
type='video/ogg;codecs="theora,vorbis"'>
