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
- Embed a Google Map
- Embed YouTube Video
- Force YouTube videos into HD
- The object tag
- Create An Imagemap
- Codecs & Containers
- Format Conversion Tools
- HTML5 Audio
- Codec Support
- HTML5 Video
- Video Workflow
- Preflight Web Video
- Sources for Web Stock Video
- Scaling iframe content
See also my article on fullscreen background video with text overlay.
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.
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.