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