HTML and CSS Reference
In-Depth Information
that nobody gets locked out of your content. Let's not repeat the
mistakes of the old “Best viewed in Netscape Navigator” badges
on websites.
Multiple <source> elements
To d To t h i s , y To u n e e d t To e n c To d e y To u r m u l t i m e d i a t w i c e : To n c e
as Theora and once as H.264 in the case of video, and in both
Vorbis and MP3 for audio.
Then, you tie these separate versions of the fi le to the media
element. Instead of using the single
src
attribute, you nest
separate
<source>
elements for each encoding with appropriate
type
attributes inside the
<audio>
or
<video>
element and let the
browser download the format that it can display.
Note that in this case we do not provide a
src
attribute in the
media element itself:
1
<video controls>
2
<source src=leverage-a-synergy.ogv type='video/ogg;
¬
codecs=”theora, vorbis”'>
3
<source src=leverage-a-synergy.mp4 type='video/mp4;
¬
codecs=”avc1.42E01E, mp4a.40.2”'>
4
<p>Your browser doesn't support video.
5
Please download the video in <a href=leverage-a-
¬
synergy.ogv>Ogg</a> or <a href=leverage-a-
¬
synergy.mp4>mp4</a> format.</p>
6
</video>
Line 1 tells the browser that a video is to be inserted and to give
it default controls. Line 2 offers an Ogg Theora video and uses
the
type
attribute to tell the browser what kind of container for-
mat is used (by giving the fi le's MIME type) and what codec was
used for the encoding of the video and the audio stream. We
could also offer a WebM video here as a high-quality royalty-
free option. Notice that we used quotation marks around these
parameters. If you miss out on the
type
attribute, the browser
downloads a small bit of each fi le before it fi gures out that it
is unsupported, which wastes bandwidth and could delay the
media playing.
NOTE
Stop press: iPad
bug: Since going to press
we've been told of a bug that
affects some iPads that means
they can only read the first
<source>
element. Therefore
your mp4 version should come
before your royalty-free version in
the source order.
