Learning Web Audio and Video

Learning Web Audio and Video

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.

Topics include:

  • 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


  • 英文名称:Learning Web Audio and Video
  • 时长:1小时29分
  • 字幕:英语


  1. Build interactive audio and video into your websites and applications
  2. What you should know
  3. Use the exercise files
  4. What's new in this update
  5. Set up your environment
  6. Create a new document
  7. Link to media content
  8. Use embedded media
  9. Challenge: Remove the iframe border
  10. Solution: Remove the iframe border
  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
  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
  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
  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
  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
  43. Further information