HTML and CSS Reference
In-Depth Information
n
Note
It's best to test the media support mentioned in Table 3-2 in the latest versions of these browsers. The
specification is evolving, and all the browser companies are actively working to improve and standardize their
support for media formats.
Implementing a Fallback Mechanism
From the discussion in the preceding section, you may have realized that relying on browsers to support
media files of a specific MIME type isn't practical when you're building Internet web applications.
Additionally, when your target browser is unknown, you can't guarantee that it supports HTML5
<audio>
and
<video>
tags. Some form of fallback mechanism is necessary to provide alternatives to the user if the
target browser doesn't support HTML5 audio and video playback.
You need to provide fallback schemes for two scenarios:
• The target browser supports HTML5
<audio>
and
<video>
tags but doesn't support a
particular MIME type.
• The target browser doesn't support HTML5
<audio>
and
<video>
tags.
To handle these scenarios, you can use the following fallback mechanisms, respectively:
• Create media iles in multiple ile formats (MIME types).
• Use Flash or Silverlight as an alternate playback mode.
The following sections detail how to implement these techniques.
Supporting Multiple Media Formats
The
<audio>
and
<video>
elements allow you to specify multiple media sources. Until now, you've used the
src
attribute of these tags to specify a media file, but
<audio>
and
<video>
can also use nested
<source>
elements to specify multiple source files. At runtime, depending on the supported media type, a browser
picks up an appropriate version of the file. Listing 3-6 shows a
<video>
element that lists three sources.
Listing 3-6.
Using the
<source>
Element
<video controls>
<source src="media/video1.mp4" type="video/mp4" />
<source src="media/video1.ogv" type="video/ogg" />
<source src="media/video1.webm" type="video/webm" />
</video
As shown in Listing 3-6, each
<source>
element sets
src
and
type
attributes. The
src
attribute points to
a video file, and the
type
attribute indicates the file's MIME type.
The downside of using
<source>
is that you need to maintain multiple file formats for each audio or
video file under consideration. This may require additional media-converter software, which increases the
overall cost of the project.
