Photograph of DJs framed by lasers inside a Greek nightclub
Part of the HTML Reading List

HTML5 has dramatically changed web multimedia: for that reason, this reading list doesn’t cover embedding Flash content or using plugins.

Goals: Understand HTML5 codecs and browser limits in supporting them. Embed video, audio, and other multimedia content; use iframe elements to present the content of other sites in the context of your own.

Prerequisites: Basic HTML, HTML5 strongly recommended.

Total time: 3 hours

Core Material

  1. Embed a Google Map
  2. Embed YouTube Video
  3. Force YouTube videos into HD
  4. The object tag
  5. Create An Imagemap
  6. Codecs & Containers
  7. Format Conversion Tools
  8. HTML5 Audio
  9. Codec Support
  10. HTML5 Video
  11. Video Workflow
  12. Preflight Web Video
  13. Sources for Web Stock Video
  14. iframes
  15. Scaling iframe content

Applications

The following articles apply HTML5 video and audio with CSS and JavaScript; some familiarity with both is advisable before proceeding into this sub-section.

  1. Fullscreen Background Video
  2. Fullscreen YouTube Background Video

See also my article on fullscreen background video with text overlay.

Supplementary Material

Watch the Embedded Elements video from Treehouse (6 minutes); follow this by watching the Includes and iframes content (10 minutes). (You should have already watched the Images video when you went through the Images Reading List.) Note that the videos use the term “includes” in a broad and possibly misleading way; the presenter is not referring to server-side includes, which I will cover in the PHP Reading List.

At the end of the series, take the short quiz at the end of the section.

Optionally, and only if you have significant practical experience in HTML5, read Video Basics and HTML5 Video and Other Recommendations from the Web Platform Docs.

Recommended Reading

Read Video & Audio, pages 744 – 773, in Learning Web Design by Jennifer Niederst Robbins. Read Chapter 8, Flash, Video & Audio, HTML and CSS by Jon Duckett.

When You're Done

At this stage, you've covered all the basic HTML you need to make web pages. The very last section in this series will show you how to effectively brand your site with icons before moving on to CSS.

Photograph by Nikos Koutoulas, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.