HTML and CSS Reference
In-Depth Information
controls
Providing controls is approximately 764 percent better than
autoplaying your video. See
Figure 4.2
. You can use some
simple JavaScript to write your own (more on that later) or you
can tell the browser to provide them automatically:
<video src=leverage-a-synergy.webm controls>
</video>
Naturally, these differ between browsers, as the spec doesn't
prescribe what the controls should look like or do, but most
browsers don't reinvent the wheel and instead have stuck to
what has become the general norm for such controls—there's
a play/pause toggle, a seek bar, and volume control.
Browsers have chosen to visually hide the controls, and only
make them appear when the user hovers or sets focus on the
controls via the keyboard. It's also possible to move through the
different controls using only the keyboard. 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, you can hear the audio but
nothing is rendered visually on the page at all; it is, of course,
there in the DOM and fully controllable via JavaScript and the
new APIs.
NoTE
Browsers have
different levels of key-
board accessibility. Firefox's
native controls are right and left
arrows to skip forward/back (up
and down arrows after tabbing
into the video), but there is no
focus highlight to show where
you are, and so no visual clue.
The controls don't appear if the
user has JavaScript disabled in
the browser; so although the
contextual menu allows the user
to stop and start the movie,
there is the problem of
discoverability.
Opera's accessible native con-
trols are always present when
JavaScript is disabled, regard-
less of whether the
controls
attribute is specified.
IE9 has good keyboard accessi-
bility. Chrome and Safari appear
to lack keyboard accessibility. We
anticipate increased keyboard
accessibility as manufacturers
iron out teething problems.
FIguRE 4.2
The default
controls in Firefox. (These are
similar in all modern browsers.)
