HTML and CSS Reference
In-Depth Information
a handheld device screen. Compressing a video down to a size
appropriate for a small screen can save a lot of bandwidth, mak-
ing your server and—most importantly—your mobile users happy.
HTML5 allows you to use the media attribute on the source ele-
ment, which queries the browser to fi nd out screen size (or num-
ber of colours, aspect ratio, and so on) and send different fi les
that are optimised for different screen sizes.
This functionality and syntax is borrowed from the CSS Media
Queries specifi cation ) but
is part of the markup, as we're switching source fi les depending
on device charateristics. In the following example, the browser
is “asked” if it has a min-device-width of 800px—that is, does it
have a wide screen. If it does, it receives hi-res.ogv ; if not, it is
sent lo-res.ogv :
<video controls>
<source src=hi-res.ogv ... media=”(min-device-width:
¬ 800px) ”>
<source src=lo-res.ogv>
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
rather than min-width to cater
to devices that have a viewport
into the content—that is, every
full-featured smartphone
browser, as this gives us the
width of the viewport display.
Rolling custom controls
One truly spiffing aspect of the media element, and therefore
the audio and video elements, is that the JavaScript API is super
easy. The API for both audio and video descend from the same
media API, so they're nearly exactly the same. The only differ-
ence in these elements is that the video element has height and
width attributes and a poster attribute. The events, the methods,
and all other attributes are the same. With that in mind, we'll
stick with the sexier media element: the <video> element for our
JavaScript discussion.
As you saw at the start of this chapter, Anne van Kesteren talks
about the new API and that we have new simple methods such
as play() , pause() (there's no stop method: simply pause and
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.
Search WWH ::

Custom Search