HTML and CSS Reference
Audio and Video
In this chapter, I will demonstrate the new audio and video elements introduced with HTML5. The two elements
are identical in terms of their attributes and the methods and events that they support. I will spend most of
the chapter discussing and demonstrating the audio element but just keep this in the back of your mind that
everything I'm showing you applies to video as well. There are some exercises at the end of the chapter that will
apply these same techniques to the video element so you can see this for yourself.
I will demonstrate how to add audio and video elements using the native controls provided by the browser.
This approach makes embedding audio and video in your web site a trivial matter of adding some simple
markup. If you want to write your own controls, however, this chapter will also demonstrate how to do that and to
Because each browser supports different media formats, to make your site cross-browser compatible,
you'll need to encode multiple versions of your media files. The audio and video elements can support multiple
sources so each browser can chose the appropriate version to use. I'll also show you how you can use a couple of
free utilities that will convert your audio and video files to the necessary formats.
■ The video element supports three additional attributes ( width , height , and poster ) that the audio
element doesn't. I will explain these later in the chapter.
Using the Audio Element
I'll start with a pretty simple exercise of adding an audio element to a web page. Then you'll support multiple
formats and try your site on various bowsers.
Creating the Sample Project
In this chapter, you'll create a web site project that you'll use to try out the audio and video HTML5 elements.
You'll create an empty web site now, and then progressively add features to it throughout the chapter.
eXerCISe 8-1. CreatING aN eMptY prOJeCt
Start Visual Studio 2012 and select the New Project link. Select the MVC4 project
template and enter Chapter 8 for the name, as shown in Figure 8-1 .