Modern HTML - Head First HTML and CSS - page 584

Closely inspecting the video attributes…

Let's look more closely at some of the more important
video attributes:

con tro ls

T he con trol s attr ibute is a
B ool ean attrib ute. It's e ither

src is what video
file is used here.

t here or it 's no t. If i t is th ere, then
the b rows er wi ll add its b uilt- in
contr ols to the vide o dis play. The
contr ols v ary b y bro wser , so c heck
out e ach b row ser to see what they
look like. Here 's wh at th ey lo ok
like i n Sa fari.

preload

The attribute preload is typically used for
ine-grained control over how video loads
for optimization purposes. Most of the time,
the browser chooses how much video to load,
based on things like whether autoplay is set
and the user's bandwidth. You can override
this by setting preload to “none” (none
of the video is downloaded until the user
“plays” it), “metadata” (the video metadata is
downloaded, but no video content), or “auto”
to let the browser make the decision.

height

width

Th e vide o pla yer

poster

The browser will typically display one frame of
the v ideo as a “poster” image to r epresent the
video . If you remove the autoplay attribute,
you'l l see this image displayed bef ore you click
play. It's up to the browser to pick which frame
to sh ow; often, the browser will ju st show the
irst f rame of the video…which is often black. If
you w ant to show a speciic image , then it's up
to yo u to create an image to displ ay, and specify
it by using the poster attribute.