HTML and CSS Reference
In-Depth Information
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.
Search WWH ::

Custom Search