HTML and CSS Reference
In-Depth Information
If you'd like to dive much deeper into how text tracks work (or soon will), consult the
spec-in-progress at
whatwg.org/specs/web-apps/current-work/multipage/the-
video-element.html#timed-text-tracks
Embedding Plug-ins and Other Content
Images have been web-native since the first graphical web browser in the early 1990s, and the new
audio
and
video
elements in HTML5 are helping to make sound and moving pictures just as web-native as static
pictures. At long last, web users can enjoy musical interludes and funny cat antics without requiring third-
party plug-ins. And yet, HTML still can't do everything on its own. Some user experiences simply can't be
produced with technology native to the browser environment, and browsers still often require some outside
assistance from plug-ins. Though HTML doesn't quite give us unlimited power, it does give us
mechanisms to embed external content, for those challenges a browser just can't face on its own.
object
The
object
element embeds a file or type of media that exists external to the HTML document. The
external content could be an image, a video, an audio file, or even an HTML page—but other elements
exist for embedding these types of content that a browser can handle natively (
img
,
video
,
audio
, and
iframe
, respectively). The
object
element is most often used to embed content that requires a separate
plug-in application to render it, such as Flash movies or Java applets.
The
object
element requires an end tag and may contain one or more
param
elements, followed by any
other flow content. If the embedded content fails to render—if the browser lacks the requisite plug-in, for
instance—the nested content is displayed as a fallback.
Earlier in this chapter, you saw some examples of the
object
element used to embed Flash-based media
players inside the
audio
and
video
elements, providing a fallback player for browsers that don't support
those new elements. Listing 5-8 shows an inversion of that; in this example, the Flash player comes first
and a nested
audio
element provides a fallback for browsers that don't have the Flash plug-in installed but
do support native audio (such as every Apple iPad and iPhone).
Listing 5-8.
An embedded Flash object with a nested
audio
element as fallback
<object data="flash/audio-player.swf?soundFile=audio/Townsville.mp3"
width="250" height="25" type="application/x-shockwave-flash">
<param name="movie" value="flash/audio-player.swf?soundFile=audio/Townsville.mp3">
<param name="allowscriptaccess" value="always">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<audio controls>
<source src="audio/Townsville.mp3" type="audio/mpeg;codec=mpeg">
<source src="audio/Townsville.ogg" type="audio/ogg;codec=vorbis">
<p>Download this tune in <a href="audio/Townsville.mp3">MP3</a>
or <a href="audio/Townsville.ogg">Ogg Vorbis</a> format.</p>
