Audio & Video Tutorials

From embedding a basic clip to scripting a custom player

These tutorials follow a progressive path from the fundamentals of web media through scripting and embedding third-party content. Work through them in order or jump to the topic you need.

Foundations

  1. Media on the web — How browsers handle media, the role of containers and codecs, and when to use native elements vs. embeds.
  2. The audio element — The <audio> element, its attributes (controls, autoplay, loop, muted), and multiple <source> fallbacks.
  3. The video element — The <video> element, poster, responsive sizing, and the Picture-in-Picture API.

Formats & text tracks

  1. Formats & codecs — MP4/H.264, WebM/VP9, AV1, Opus, and AAC — browser support, trade-offs, and choosing the right format.
  2. Captions & tracks — WebVTT files, the <track> element, and kind values: subtitles, captions, chapters, and metadata.

Scripting & embedding

  1. Controlling media with JavaScript — The HTMLMediaElement API: play(), pause(), currentTime, volume, events, and building custom controls.
  2. Embedding external video — <iframe> embeds from YouTube, Vimeo, and others — responsive aspect-ratio wrappers and privacy considerations.
  3. Audio processing with the Web Audio API — The audio graph, AudioContext, gain nodes, analysers, and real-time visualization.