HTML and CSS Reference
In-Depth Information
Adding a Media Element to a Web Page
The HTML5 media elements share a common syntax and subgroup of attributes. The only dif-
ference between the two elements is the content they manage, and a small group of additional
attributes for the
video
element.
Minimal Element Syntax
The simplest syntax to add a media element to the web page is demonstrated in
Example 1-1
.
In the HTML, an
audio
element is used to embed an audio file encoded as Ogg Vorbis into
the web page. The URL for the audio file is given in the
audio
element's
src
attribute. The
element's style and behavior will be the default defined in the HTML5 specification and im-
plemented by the browser.
Example1-1.HTML5 web page with embedded audio file using an audio element
<!DOCTYPE html>
<head>
<title>Audio</title>
<meta charset="utf-8" />
</head>
<body>
<audio src="audiofile.ogg">
</audio>
</body>
The page validates as proper HTML5, and Firefox, Chrome, and Opera all support the file
type. When you load the page in these browsers, you don't get an error. However, when you
look at the page, you won't see anything.
Compare
Example 1-1
with the following:
<!DOCTYPE html>
<head>
<title>Video</title>
<meta charset="utf-8" />
</head>
<body>
<video src="videofile.ogv">
</video>
</body>
Unlike the audio element, the video element has a play area that should show as long as there's
no error loading the video, and the video element isn't deliberately hidden. If you want to ac-
