Video and Audio - Introducing HTML5 - page 123

connection. Compressing a video down to a size appropriate for
a small screen can save a lot of bandwidth, making your server
and—most importantly—your mobile users happy.
HTML5 allows you to use the media attribute on the <source>
element, which queries the browser to find out screen size (or
number of colours, aspect ratio, and so on) and to send different
files that are optimised for different screen sizes.
This functionality and syntax is borrowed from the CSS Media
Queries specification www.w3.org/TR/css3-mediaqueries but is
part of the markup, as we're switching source files depending
on device characteristics. In the following example, the browser
is “asked” if it has a min-device-width of 800 px—that is, does it
have a wide screen. If it does, it receives hi-res.webm ; if not, it is
sent lo-res.webm :
<video controls>
<source src=hi-res.webm ... media=”(min-device-width:
¬ 800px) ”>
<source src=lo-res.webm>
...
</video>
Also note that you should still use the type attribute with codecs
parameters and fallback content previously discussed. We've
just omitted those for clarity.

NoTE We use min-device-
width rather than min-
width . Mobile browsers (which
vary the reported width of their
viewport to better accommodate
web pages by zooming the
viewport) will then refer to the
nominal width of their physical
screen.

Rolling custom controls

One truly spiffing aspect of the <video> and <audio> media ele-
ments is that they come with a super easy JavaScript API. The
API's events and methods are the same for both <audio> and
<video> . With that in mind, we'll stick with the sexier media ele-
ment: the <video> element for our JavaScript discussion.
As you saw at the start of this chapter, Anne van Kesteren has
spoken about the new API and about the new simple methods
such as play() , pause() (there's no stop method: simply pause
and move to the start), load() , and canPlayType() . In fact, that's
all the methods on the media element. Everything else is events
and attributes.
Table 4.3 provides a reference list of media attributes, methods,
and events.