FranMich Logo

HTML/HTML5/XHTML - Lesson 9

All the hands-on labs are here for quick access.

Multimedia HTML5 makes multimedia like video and audio even easier to add to your web pages. In this lesson you will learn how to use the two new HTML5 elements: AUDIO and VIDEO to add multimedia to your web pages.
Before You Add Multimedia to Your Website The first thing you should remember about using multimedia is that it can be annoying to users. This article explains some of the most annoying multimedia features, and how you can implement your designs using multimedia without losing customers.
How to Add Sound Sound is something that a lot of websites can benefit from. And HTML5 makes it possible to embed sound files in your web page just like you would image files. This tutorial explains what you need to do.
Pros and Cons of Adding Sound to Web Pages Before you race out and add sound to your web pages, you should consider both the benefits and drawbacks. There are sites where music and sound are completely appropriate and even required. But sound, especially autoloading sound and music that can't be turned off. This article explains some of the reasons people don't always like sound on web pages.
Introduction to HTML5 Video HTML5 adds the VIDEO element to embed videos in your web pages. But older web browsers, especially Internet Explorer 8 and lower, don't support video embedded with the VIDEO element. This 11 page tutorial will take you through all the steps to get videos working on your web page, even in IE 6-8. It is tricky, however, so be sure to follow all the steps on every page.
Understanding HTML5 Video Formats One of the reasons that HTML5 video is challenging is because you need to create your video in at least 2–3 formats for it to display reliably in all browsers. This article discusses the different formats and what makes them different.
Pros and Cons of Flash Websites Flash is very popular both for multimedia and for building complete websites, but you should remember that, like any technology, there are benefits and drawbacks to using Flash. Learning to use Flash for websites is outside the scope of this class, but if you're considering using it, you should be aware that mobile devices on iOS don't support Flash, and there are other drawbacks as well.
Activity This is the homework for the “Multimedia” lesson of the HTML class. It includes a short quiz (answers below) and a project you can do to practice what you've learned in this lesson.
Multimedia Quiz  1. What are three things you should keep in mind before adding multimedia to your website?

 2.What element do you use to add sound to web pages in HTML5?

 3. What does the attribute controls="false" do and why should you avoid it?

 4. What are three types of sites where it's appropriate to add sound?

 5. What element other than VIDEO do you use to embed multiple versions of a video onto your site?

 6. What video format should you save your videos in for Firefox, Safari, and Internet Explorer 8?
Multimedia Project Record a sound file or find a public domain source on the web and add it to your web page using HTML5. Be sure to test it in multiple browsers and include at least two different source files so that multiple browsers can view it.

If you are sharing your work on the forum, include the URL of your web page with the sound file and indicate which file types your page includes.