HTML and CSS Reference
In-Depth Information
FIGURE 4.1
HTML5 video in a
modern browser and fallback
content in a legacy browser.
However, this example won't actually do anything just yet. All you
can see here is the first frame of the movie. That's because you
haven't told the video to play, and you haven't told the browser to
provide any controls for playing or pausing the video.
autoplay
Yo u c a n t e l l t h e b r o w s e r t o p l a y t h e v i d e o o r a u d i o a u t o m a t i c a l l y,
but you almost certainly shouldn't, as many users (and particu-
larly those using assistive technology, such as a screen reader)
will fi nd it highly intrusive. Users on mobile devices probably
won't want you using their bandwidth without them explicitly
asking for the video. Nevertheless, here's how you do it:
<video src=leverage-a-synergy.ogv autoplay>
</video>
controls
Providing controls is approximately 764 percent better than
autoplaying your video. See
Figure 4.2
. You can use some sim-
ple JavaScript to write your own (more on that later) or you can
tell the browser to provide them automatically:
<video src=leverage-a-synergy.ogv controls>
</video>
Naturally, these differ between browsers, in the same way
that form controls do, for example, but you'll fi nd nothing
too surprising. There's a play/ pause toggle, a seek bar, and
volume control.
