Learning Web Audio and Video
Overview
Learn how to use native web technologies—HTML, CSS, and JavaScript—to build interactive audio and video into your websites and applications.
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.
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.
Syllabus
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
- 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
- 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
- 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
- Disable default media controls
- Add playback buttons
- Include text elements
- Create a progress bar
- Challenge: Overlay the media controls
- Solution: Overlay the media 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
- 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
- Further information
Taught by
Joseph Labrecque
Never Stop Learning!
