HTML and CSS Reference
In-Depth Information
Video with Controls, Loop, and Autoplay
Whileavideodisplayedwithoutcontrolsmightsuityourneeds,mostusersexpecttoseesome
way to control a video. Also, as the developer, you might want a video to play automatically
orloopbacktothebeginningwhenitfinishes.Allofthesethings(ifsupportedinthebrowser)
are very easy to accomplish in HTML5.
Adding controls, looping, and autoplay to an HTML5 video embed is simple. All you need to
do is specify the options
controls
,
loop
, and/or
autoplay
in the
<video>
tag, like this:
<video
<video autoplay loop controls id=
"thevideo"
width=
"320"
height=
"240"
>
<source
<source src=
"muirbeach.webm"
type=
'video/webm; codecs="vp8, vorbis"'
>
<source
<source src=
"muirbeach.mp4"
type=
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
>
<source
<source src=
"muirbeach.ogg"
type=
'video/ogg; codecs="theora, vorbis"'
>
</video>
</video>
NOTE
As of this writing,
loop
does not work in Firefox; however, support is expected in version 4.0.
The code to embed our Muir Beach video with
controls
,
loop
, and
autoplay
is in
CH6EX2.html
inthecodedistribution.
Figure 6-2
showswhatavideowithcontrolslookslike
in Google Chrome.
