HTML and CSS Reference
< video poster = ”message.png” >
< source src = ”multiformats/mbAux1.mp4” type = ”video/mp4” >
</ video >
Notice that the poster attribute is in the <video> tag even though all the i le information
is in the <source> tag. h ere is no conl ict between the video attributes and those in source.
h e preload attribute of the <video> tag would seem like a natural to include in all Web
pages that use video. As soon as the page loads, the video starts loading. h at may be impor-
tant for a page with a single video as the main feature of the page. However, if it's a minor part
of the page or if several videos are on a single page, preloading can gobble up resources. So,
while useful, the attribute needs to be employed judiciously. It uses the following format:
< video preload = ”auto” >
< source src = ”mbAux1small.webm” type = ”video/webm; codecs='vorbis,vp8'” >
</ video >
h e preload attribute has several values it can be assigned. h ey're identical to audio
none : Having none as a value may seem strange, but some browsers may be set to
automatically preload video i les. However, if the chance of using a particular video is
remote, the developer may decide not to use Internet resources and so assigns the none
value to the preload attribute.
metadata : All video i les have metadata like duration, width, height, or some other data
placed in the source i le. When the chance of using a video i le is low, loading the
metadata is reasonable and doesn't take up much Internet resources.
auto : If the preload attribute is present, it automatically preloads the audio i le
information. h e auto assignment simply acts as a reminder that the i le is going to
preload (same as not having any value assignment to a preload attribute).
h e more varied your audience and the more video in your Web site, the more you want to
provide the preload attribute with options.
A video loop is something that you must plan carefully lest you run of all your viewers. A
loop means that the same video is going to start from the beginning again as soon as it ends.
h e following is an example:
< video loop controls >
< source src = ”phantom.3gp” >
</ video >