HTML and CSS Reference
In-Depth Information
n
Note
When you play an audio or video file with multiple
<source>
elements, it isn't apparent which of the file
formats the browser is using. A quick and easy way to find out is to right-click the
<audio>
or
<video>
element in
the browser and select Save As from the shortcut menu. The Save As dialog displays the source file name of the
<source>
element that is being played.
Flash or Silverlight Fallback
The fallback mechanism using the
<source>
element works well if you're sure the target browser supports
HTML5. However, it's possible that the target browser doesn't understand HTML5
<audio>
and
<video>
elements. In such cases, you can use a Flash- or Silverlight-based fallback system. Listing 3-7 shows how
an example using Flash.
Listing 3-7.
Using a Flash-Based Fallback System
<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" />
<object id="lash1" data="Media/Video1.swf" type="application/x-shockwave-lash">
<param name="movie" value="Media/Video1.swf">
</object>
</video>
The
<video>
element now has an
<object>
tag nested inside it. This way, if a browser doesn't
understand the
<video>
tag, it skips to the
<object>
tag and plays the Flash video file.
If you decide to provide a Silverlight fallback, you need to embed Silverlight media using the
<object>
tag. Listing 3-8 shows how this can be done.
Listing 3-8.
Using a Sliverlight-Based Fallback System
<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" />
<object data="data:application/x-silverlight-2"
type="application/x-silverlight-2" width="300" height="300">
<param name="source" value="silverlightvideos/CleanTemplate.xap"/>
...
</object>
</video>
In Listing 3-8, the Silverlight media is embedded using the
<object>
tag inside the
<video>
element. If
a browser encounters the
<video>
tag but doesn't support it, the browser skips to the
<object>
tag and
plays the Silverlight video.
If you don't want to provide Flash, Silverlight, or another fallback, then instead of an
<object>
tag you
can simply include some HTML markup that informs the end user what went wrong.
