HTML and CSS Reference
Firefox shows the controls on the <video>
element only when the user mouses over and at
initial page load, but other browsers have them
visible until the video starts playing.
Both elements in the previous example have been set to 320 x 240 pix-
els with CSS , although in the case of the <audio> element you can see
this doesn't achieve much. The <video> element is showing the first
frame of the video. Note that the video is 320 x 180 pixels, but instead
of stretching the video and changing the aspect ratio, the video is made
as wide as possible and centered vertically.
Now you know why HTML5 has <audio> and <video> elements
and what the basic code looks like. In the following
sections, you'll learn about the <audio> and <video>
elements in more detail, starting with the <audio> element.
The <audio> element
Audio on the web gained something of a bad rap in the
1990s as thousands of people happily attached back-
ground music to their GeoCities pages, but there are
plenty of legitimate uses for audio in a web page.
Sometimes, websites are entirely about sound—band
home pages should have samples of the band's work;
dictionaries should allow you to listen to pronuncia-
tion; games need sound effects. As you've learned, until
the <audio> element, the only available option was a
browser plug-in. In this section, you'll learn about the
<audio> element, its supported attributes, file formats,
and how to convert between them.