HTML and CSS Reference
In-Depth Information
h e type attribute is part of the <source> tag. As shown at the beginning of the chapter,
the src attribute is used to select a video i le to play. If the browser can't play the assigned
i le type, it drops down to the next i le in the source list. To speed up that process, the type
attribute lets the browser know what kind of i le is waiting to be played and contains a MIME
parameter that tells it which codec is in use. h is saves the browser from attempting to load
the i le and failing. Instead, it determines from the type information whether the video i le
is compatible.
< source src = ”fileName.ext” type = ”video/type; codecs='c1, c2'” >
h e type assignment can be made with or without the codec. If you don't know the codec, you
can leave it blank and rely on the type to let the browser know whether it can play the i le. If
you know the codec or multiple codecs, you can place more than one codec in the codecs
assignment list. Where you're not sure you're better of leaving the codecs assignment blank.
h e following ( TypeVideoSource.html in this chapter's folder at
smashinghtml5 ) shows the type assignments for the four major types of video i les you can
use on the Web.
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Selective Video </ title >
</ head >
< body >
< video controls preload = ”auto” >
< source src = ”mbAux1.3gp” type = ”video/3gpp; codecs='mp4v.20.8'” >
< source src = ”mbAux1small.mp4” type = ”video/mp4; codecs='mp4v.20.8'” >
< source src = ”mbAux1small.ogv” type = ”video/ogg; codecs='theora, vorbis'” >
< source src = ”mbAux1small.webm” type = ”video/webm; codecs='vorbis,vp8'” >
</ video >
</ body >
</ html >
To determine the type and codec of a i le, you can i nd several dif erent programs on the Web.
One available at no cost with versions for Windows, Macintosh, and several dif erent Linux
operating systems is MediaInfo available at .
h e poster attribute is used with large videos and slow Internet connections. It's simple to
use, and if you know that it'll take a while for your video to come to the screen and begin
playing, the poster gives the user something to look at while waiting. h e format is simple as
shown in the following snippet:
Search WWH ::

Custom Search