1600+ Coursera Courses That Are Still Completely Free

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Provider Logo

Learning Web Audio and Video

via LinkedIn Learning

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.

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

Taught by

Joseph Labrecque

Related Courses

Reviews

0.0 rating, based on 0 reviews

Start your review of Learning Web Audio and Video

Never stop learning Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free