HTML5 Digital Classroom

Lesson 9: Working with Video and Audio Elements

Adding video and sound to a web page makes a website more engaging. Media provides a way to grab the attention of your visitors, and it also provides a way to reach audiences that would otherwise bypass long lengths of text. HTML5 directly addresses the need to deliver video and audio.

What you’ll learn in this lesson:

• • Adding video with the <video> element
• • Adding audio with the <audio> element
• • Providing fallbacks for browsers
• • Controlling a video with JavaScript

Starting up

You will work with several files from the HTML5_09lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

To accurately preview the HTML5 content you will create in this lesson, you need a browser that supports HTML5 tags. See “Using web browsers that support HTML5 tags” in the Starting Up section of this book to determine whether you are using such a browser, or for instructions on downloading one.

Adding video

Before the advent of HTML5, you needed third party plug-ins, such as Flash, QuickTime, or Silverlight, to show video. HTML5 has replaced this need by specifying an HTML video element that runs natively in the browser and integrates with JavaScript.

In this section, you will learn to add video ...