Audio & Video

HTML5 media elements, codecs, and streaming

The Audio Element

Coming soon: Embedding and controlling audio on the web.

  • Basic audio element usage
  • Audio attributes (controls, autoplay, loop, muted)
  • Multiple source formats
  • Audio events
  • Controlling audio with JavaScript

The Video Element

Coming soon: Embedding and controlling video on the web.

  • Basic video element usage
  • Video attributes (controls, autoplay, loop, muted, poster)
  • Multiple source formats
  • Video events
  • Controlling video with JavaScript
  • Fullscreen API
  • Picture-in-Picture API

Formats and Codecs

Coming soon: Understanding media formats and browser support.

Video Codecs

  • H.264/AVC - Universal support
  • VP9 - Google's open codec
  • AV1 - Next-gen open codec
  • HEVC/H.265 - High efficiency

Audio Codecs

  • MP3 - Universal legacy support
  • AAC - Better quality than MP3
  • Opus - Best quality open codec
  • Vorbis - Open alternative to MP3

Container Formats

  • MP4 - Most common video container
  • WebM - Open format by Google
  • Ogg - Open container format

Custom Controls

Coming soon: Build your own media player UI.

  • Hiding native controls
  • Play/pause buttons
  • Progress bar and seeking
  • Volume controls
  • Time display
  • Playback speed
  • Styling considerations

Accessibility

Coming soon: Make media accessible to everyone.

  • Captions with WebVTT
  • Subtitles vs captions
  • Audio descriptions
  • Transcripts
  • Keyboard accessibility
  • Screen reader considerations

Advanced Topics

Coming soon: Beyond basic media playback.

  • Media Source Extensions (MSE)
  • Adaptive streaming (HLS, DASH)
  • Web Audio API basics
  • WebRTC introduction
  • MediaRecorder API
  • Media Capture API