Code by Chapter
The code by chapter is listed below, click on [view] to expand the section to view the links to the relevant code.
A chapter may also contain a link to further chapter information and errata.
You can also download the code for each of the chapters for the examples. The downloaded code does not include the media files.
-
An Introduction to HTML5[view]
-
HTML5 Multimedia Elements[view]
-
Using Audio[view]
- Information and Errata
- Code
- Audio file with controls
- Audio file with controls & autoplay
- Audio file with controls, autoplay & loop
- Audio file with controls, autoplay & muted
- Audio file with controls, autoplay & preload none
- Audio file with controls, autoplay & preload metadata
- Audio file with controls, Ogg & MP3
- Audio file with controls, Ogg, MP3 & WAV
- Audio file with controls, autoplay, Ogg, MP3 & WAV
- Audio file with controls, Ogg, MP3, WAV & Flash (object)
- Audio file with controls, Ogg, MP3, WAV & Flash (embed)
- Audio file with controls, Ogg, MP3, WAV & Flash (Google player)
- Audio file with controls, Ogg, MP3, WAV, Flash & link
- Audio file with controls, Ogg, MP3, WAV & link
- Audio file with controls & AAC
- Audio file with controls & MP4
-
Using Video[view]
- Information and Errata
- Code
- Video with controls
- Video with controls & autoplay
- Video with controls, autoplay & loop
- Video with controls, autoplay & muted
- Video with controls & preload none
- Video with controls & preload metadata
- Video with specified width & height
- Video with no controls
- Video with MP4 & WebM
- Video with MP4, WebM & Ogg
- Video with MP4, WebM, Ogg, controls, autoplay & loop
- Video with MP4, WebM, Ogg & autoplay (no controls)
- Video with MP4, WebM, Ogg & poster image
- Video with MP4, WebM & link
- Video with MP4, WebM, Ogg & image link
- Video with MP4, WebM, Ogg & Flash (object)
- Video with MP4, WebM, Ogg & Flash (embed)
- Video with MP4, WebM, Ogg, Flash & link
- Video with MP4, WebM, Ogg, Flash & image link
- Video with Media Query
- Video with Media Query for Android
-
JavaScript API and Custom Controls[view]
- Code
- Video Custom Controls with play/pause
- Video Custom Controls with play/pause via events
- Video Custom Controls with play/pause & volume
- Video Custom Controls with play/pause, volume, rwd/ffwd & display
- Basic looking simple video player
- Styled simple video player
- Styled simple video player with playlist
-
Styling Media Elements with CSS[view]
- Code
- Video centered with a large white border
- Title div on top with z-index
- Video with a white background
- Video with opacity
- Video with gradient
- Video with rounded corners
- Video with shadow
- Video with rounded corners and shadow
- Audio with rounded corners and shadow
- Sizing video with object fit
- Sizing video with object position
- Webkit: video reflect below
- Webkit: video reflect right
- Webkit: video mask oval
- Webkit: video mask triangle
-
Transitions, Transforms, and Animation[view]
- Information and Errata
- Code
- Image size change (no transition)
- Image size transition
- Video size transition
- Video shadow transition
- Video opacity transition
- Video scale transform
- Video scale transform and transition
- Video rotate transform
- Video skew transform
- Video translate transform
- Video rotate3d transform (around y axis)
- Video rotate3d transform (around x and y axis)
- Sintel video with animated video cover (3D in Safari)
- Spinning video (3D rotation in Safari)
-
Multimedia and Accessibility[view]