By Mat Marquis CHAPTER 5At best, it would be tremendously wasteful. At worst, an older mobile
browser might see all this data bearing down on it and give up entirely,
leaving the page unrendered. In either case we do tremendous damage to a
user’s data plan, and saddle our users with a very real cost.
HTML5’s video element makes it refreshingly simple to tailor assets
to best suit a user’s context. While we can’t yet account for specific factors
like connection speed, we can at least ensure that the assets we deliver
are appropriate to the user’s display. HTML5’s source elements allow us to
specify which source should apply based on the same media queries we
use in our layouts, in a media attribute.
Granted, it is a little verbose when we need to specify multiple formats
for each source; codec support is still something of a minefield^17.
In the above example, the smaller of the two video sources — in
whichever format is supported by the browser — is served to any user
with a display narrower than 600px. This attribute is surprisingly well-
supported, despite being a little-known feature: this syntax will work in
current versions of Chrome, Firefox, Opera, Safari, Internet Explorer, iOS,
Windows Phone, BlackBerry and Android.