Learning Web Audio and Video

Course details

Need to share video or audio on your sites, but dropping it on YouTube or a podcasting engine isn't an option? Native web technologies—HTML, CSS, and JavaScript—provide direct support for audio and video, letting you incorporate media and fully customize the playback experience. This introductory course with instructor Joseph Labrecque helps you build interactive audio and video into your websites and applications. First review the basics of HTML5 media elements and their attributes. Then discover how to embed media, support fallbacks, and adjust size, volume, and other important settings. Next, learn how to customize interfaces to standardize the look and functionality of your player across different browsers. Plus, find out how to make the user experience fully interactive with the HTML5 Media API.

Learning objectives
Linking to media
Embedding media
Modifying your document for audio and video
Specifying audio sources
Specifying video height and width
Ensuring accessibility
Creating playback controls
Styling playback controls
Working with the HTML5 Media API

Concepts

0. Introduction

01 - Build interactive audio and video into your websites and applications
02 - What you should know
03 - Use the exercise files
04 - What's new in this update

1. Get Started with Web-Based Media

05 - Set up your environment
06 - Create a new document
07 - Link to media content
08 - Use embedded media
09 - Challenge - Remove the iframe border
10 - Solution - Remove the iframe border

2. Work with Audio Elements

11 - Modify your document for audio
12 - Specify an audio source
13 - Specify multiple audio sources
14 - Include fallback content
15 - Additional audio attributes
16 - Challenge - Increase audio accessibility with tags
17 - Solution - Increase audio accessibility with tags

3. Work with Video Elements

18 - Modify your document for video
19 - Specify height and width
20 - Use a poster image
21 - Media accessibility
22 - Challenge - Fill the background with looping video
23 - Solution - Fill the background with looping video

4. Create Media Playback Controls

24 - Disable default media controls
25 - Add playback buttons
26 - Include text elements
27 - Create a progress bar
28 - Challenge - Overlay the media controls
29 - Solution - Overlay the media controls

5. Style Media Playback Controls

30 - Define CSS styles in a document
31 - Design your buttons
32 - Style your text
33 - Design your progress bar
34 - Challenge - Use web fonts
35 - Solution - Use web fonts

6. Work with the Media API

36 - Overview of media API
37 - Listen for Media events
38 - Program button controls
39 - Dynamic time display
40 - Wire up the progress bar
41 - Challenge - Show and hide the controls
42 - Solution - Show and hide the controls

Conclusion

43 - Further information

Learning Web Audio and Video

Authors

Joseph Labrecque