HTML and CSS Reference
In-Depth Information
inTeGraT
ra
T
ra
inG Video wiTHouT a PLuG-in
If you worked your way through the section on the
<audio>
tag in the previous lesson, you won't
find too many surprises when it comes to the
<video>
tag, new in HTML5. In fact, except for a
couple of attributes, the syntax is exactly the same. Here's how you insert a video without a plug-in
through the
<video>
tag:
<video src=”assets/vesta.mp4” controls=”controls”></video>
Again, the
src
attribute identifies the video file to play, and the
controls
attribute makes the play,
pause, seek bar, and volume controls available as shown in Figure 25-4. Additional attributes in
common with the
<audio>
tag include
autoplay
,
loop
, and
preload
.
FiGure 25-4
Several attributes are unique to the
<video>
tag. Because the dimensions of a movie are often criti-
cal to its placement in the web page, both
width
and
height
attributes are supported.
It's important to take note of the video's dimensions during the encoding process
so you can include them in your code. Not all browsers automatically detect the
video size.
The
poster
attribute is another one found only in the
<video>
tag. If you set the poster value to the
path of a static image in a web-compatible format — such as GIF, JPEG, or PNG — the image is dis-
played before the user clicks the play button, as shown in Figure 25-5. Naturally, you would need to
make sure you have omitted the
autoplay
attribute.
