Design the Web: HTML Background Video

Learn how to use native web technologies—HTML, CSS, and JavaScript—to build interactive audio and video into your websites and applications.

Introduction

• Build interactive audio and video into your websites and applications
• What you should know
• Use the exercise files
• What's new in this update

1. Get Started with Web-Based Media

• Set up your environment
• Create a new document
• Link to media content
• Use embedded media
• Challenge: Remove the iframe border
• Solution: Remove the iframe border

2. Work with Audio Elements

• Modify your document for audio
• Specify an audio source
• Specify multiple audio sources
• Include fallback content
• Additional audio attributes
• Challenge: Increase audio accessibility with tags
• Solution: Increase audio accessibility with tags

3. Work with Video Elements

• Modify your document for video
• Specify height and width
• Use a poster image
• Media accessibility
• Challenge: Fill the background with looping video
• Solution: Fill the background with looping video

4. Create Media Playback Controls

• Disable default media controls
• Add playback buttons
• Include text elements
• Create a progress bar
• Challenge: Overlay the media controls
• Solution: Overlay the media controls

5. Style Media Playback Controls

• Define CSS styles in a document
• Design your buttons
• Style your text
• Design your progress bar
• Challenge: Use web fonts
• Solution: Use web fonts

6. Work with the Media API

• Overview of media API
• Listen for Media events
• Program button controls
• Dynamic time display
• Wire up the progress bar
• Challenge: Show and hide the controls
• Solution: Show and hide the controls

Conclusion

• Further information