Java Reference
In-Depth Information
<a href="bbb.mp4">Download this video.</a>
</video>
Note
It's beyond the scope of this topic to provide an in‐depth discussion
on the various codecs used and the browsers that support them. So for the
sake of simplicity, this chapter omits the
type
attribute altogether—along with
the text‐based fallback.
By default, videos do not display controls, but you can easily add the default controls by adding the
controls
attribute to the
<video/>
element:
<video controls>
You don't have to set
controls
to any value; its presence is enough to turn on the browser's default
controls for the video.
You can also tell the browser to preload the video with the
preload
attribute:
<video controls preload>
This tells the browser to immediately start loading the video. Like the
controls
attribute, you don't
have to set a value for
preload
.
By default, the browser uses the first frame of the video as the
poster
of the video, the initial visual
representation of the video. You can use the
poster
attribute to display a custom image for the
video's poster:
<video controls preload poster="bbb.jpg">
The
poster
attribute, as you might imagine, is specifically for
<video/>
elements, but you can add
a few other attributes to the
<video/>
and
<audio/>
elements. Probably the most important, from a
JavaScript perspective, is the
id
attribute. It is, after all, how you find specific media in the page so
that you can script them.
sCripting media
In the DOM,
<video/>
and
<audio/>
elements are
HTMLMediaElement
objects, and the HTML5
specification defines an API for working with these objects. But naturally, before you can use any of
the methods, properties, or events of a media object, you need to first obtain one. You can retrieve
an existing
<video/>
or
<audio/>
element in the page using any of the various methods for finding
elements. For the sake of simplicity, assume there's a
<video id="bbbVideo">
tag in the page. You
could get it with the following code:
var video = document.getElementById("bbbVideo");
