HTML and CSS Reference
In-Depth Information
<
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.
PRELOAD
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
preload values.
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).
227
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.
LOOP
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
>