HTML and CSS Reference
In-Depth Information
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 first
frame of the movie, which may not be the representative image
you want to show.
The behavior varies somewhat on mobile devices. Mobile Safari
does grab the first frame if no
poster
is specified; Opera Mobile
conserves bandwidth and leaves a blank container.
muted
The
muted
attribute, a recent addition to the spec (read: “as yet,
very little support”), gives a way to have the multimedia element
muted by default, requiring user action to unmute it. This video
(an advertisement) autoplays, but to avoid annoying users, it does
so without sound, and allows the user to turn the sound on:
<video src=”adverts.cgi?kind=video” controls autoplay loop
¬ muted></video>
height, width
The
height
and
width
attributes tell the browser the size of
the video in pixels. (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 uses the intrinsic width
of the poster frame, if that is available. If neither is available, the
browser defaults to 300 pixels.
If you specify one value but not the other, the browser adjusts
the size of the unspecified dimension to preserve the video's
aspect ratio.
If you set both
width
and
height
to an aspect ratio that doesn't
match that of the video, the video is not stretched to those
dimensions but is rendered letterboxed inside the video element
of your specified size while retaining the aspect ratio.