HTML and CSS Reference
In-Depth Information
Chapter 8
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
wire up all the events with JavaScript.
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.
Note
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
1.
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
.