HTML and CSS Reference
In-Depth Information
FIGURE 4.2
The default controls
in Firefox 3.6 (similar in all modern
browsers).
Notice that these controls appear when a user hovers over a
video or when she tabs to the video. It's also possible to tab
through the different controls. This native keyboard accessibility
is already an improvement on plugins, which can be tricky to tab
into from surrounding HTML content.
If the
<audio>
element has the controls attribute, you'll see them
on the page. Without the attribute, nothing is rendered visually
on the page at all, but is, of course, there in the DOM and fully
controllable via JavaScript and the new APIs.
NOTE
Browsers have dif-
ferent levels of keyboard
accessibility. Firefox's native
controls don't appear when
JavaScript is disabled (the con-
textual menu allows the user to
stop and start the movie, but
there is the issue of discover-
ability, and it doesn't seem pos-
sible to choose these options
without JS.) Opera's accessible
native controls are always pres-
ent when JavaScript is disabled,
regardless of whether the
con-
trols
attribute is specifi ed.
Chrome and Safari have issues
with keyboard accessibility. We
anticipate increased keyboard
accessibility as manufacturers
iron out teething problems.
poster
The
poster
attribute points to an image that the browser will use
while the video is downloading, or until the user tells the video
to play. (This attribute is not applicable to
<audio>
.) It removes
the need for additional tricks like displaying an image and then
removing it via JavaScript when the video is started.
If you don't use the
poster
attribute, the browser shows the fi rst
frame of the movie, which may not be the representative image
you want to show.
height, width
These attributes tell the browser the size in pixels of the video.
(They are not applicable to
<audio>
.) If you leave them out, the
browser uses the intrinsic width of the video resource, if that is
available. Otherwise it is the intrinsic width of the poster frame,
if that is available. Otherwise it is 300 pixels.
If you specify one value, but not the other, the browser adjusts
the size of the unspecifi ed dimension to preserve the video's
aspect ratio.
