HTML and CSS Reference
FIGURE 4.2 The default controls
in Firefox 3.6 (similar in all modern
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
NOTE Browsers have dif-
ferent levels of keyboard
accessibility. Firefox's native
controls don't appear when
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-
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.
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
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.
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