HTML and CSS Reference
In-Depth Information
___________
9
It is important that the quotes are single quotes surrounding double quotes and not the other way
around, because the MIME type's codecs parameter expects its contents to be in double quotes.
Note
The WHATWG publishes a wiki with a helpful summary of the MIME types
needed for the type attribute; it can be found at
http://wiki.whatwg.org/
The last attribute,
media
, specifies the device and/or media the video is optimized
for. When set, a user agent can use its value to determine whether the video is intended
for one particular type of device (such as a mobile phone). Like with the
type
attribute,
a user agent can inspect this attribute's value to determine whether it should download
the video. This is the same attribute that is found on the anchor element (
a
). It will be
We still haven't quite gotten to providing fallback content, because the last code snip-
pet still provides only one video format. Let's change that. The web browser will parse
the content inside the
video
element in sequential order, moving down the list of
source files until it finds one it can play, so under the WebM file in the previous ex-
ample, we'll add two more lines for the MPEG-4 and Ogg-formatted video:
<video width="320" height="240">
<source src="trailer.webm" type='video/webm; co-
decs="vp8, vorbis"' />
<source src="trailer.mp4" type='video/mp4; codec-
s="avc1.4D401E, mp4a.40.2"' />
<source src="trailer.ogv" type='video/ogg; codec-
s="theora, vorbis"' />
</video>
Note
There was a bug in iOS 3.
x
that caused the browser to stop at the first video
source instead of moving on down the list. This has been patched, but if it is critical to
support older iOS devices, move the MPEG-4 video to the top of the source list.
That's a lot of copies of the same video file! We're aiming for broad compatibility
here, but if you wanted to slim this down, you could probably get away with not includ-
ing the Ogg format. Older versions of Firefox could not handle WebM, so the inclusion
of Ogg will help Firefox user who have not updated recently. However, we can instead
address those users with additional types of fallback content, which we'll look at next.
Search WWH ::
Custom Search