O'Reilly logo

HTML5 Digital Classroom by AGI Creative Team, Jeremy Osborn

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Lesson 9: Working with Video and Audio Elements

html5_04_opener.psd

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required