Audio & Video Resources

Specs, embedding docs, and going-further pointers

Specifications & Documentation

Authoritative references for the HTML media elements, the JavaScript media API, and related standards.

  • MDN: <video> element Full attribute reference, browser compatibility table, and usage examples for the HTML video element.
  • MDN: <audio> element Complete guide to the audio element including the <source> fallback pattern and format support notes.
  • MDN: HTMLMediaElement API & media events The JavaScript interface shared by both elements: properties (currentTime, duration, paused), methods (play(), pause()), and the full event list.
  • MDN: WebVTT API The format used by <track> elements for captions, subtitles, and chapter markers. Covers cue syntax, timestamps, and styling with CSS.
  • MDN: Web Audio API High-level API for audio synthesis, processing, and analysis. Builds on (and can connect to) the basic <audio> element.

Embedding External Video

When hosting your own video files is impractical, third-party players offer iframe-based embedding with their own delivery infrastructure.

  • YouTube IFrame Player API Official reference for embedding YouTube videos and controlling playback programmatically via the JavaScript API. Covers the youtube-nocookie.com privacy-enhanced mode and available player parameters.
  • Vimeo Player SDK Vimeo's official embed documentation and JavaScript SDK for controlling playback, listening for events, and customising the player appearance.

Going Further

The following topics go beyond the scope of this introductory section but are important to know about as you advance.

  • Media Source Extensions (MSE) advanced MSE lets JavaScript feed raw media segments directly to a <video> element, enabling adaptive bitrate streaming without a plugin. The foundation of DASH and HLS in browsers.
  • HLS & DASH adaptive streaming (MDN guide) advanced HLS (HTTP Live Streaming, Apple) and DASH (Dynamic Adaptive Streaming over HTTP) break a stream into small segments at multiple quality levels. The player switches quality automatically based on network conditions.
  • hls.js advanced Open-source JavaScript library that plays HLS streams in any browser via MSE, without requiring native HLS support. Used by major streaming platforms.
  • dash.js advanced The reference DASH player maintained by the DASH Industry Forum. Drop it in to play adaptive MPEG-DASH streams in any MSE-capable browser.

Browser Support

  • Can I Use Up-to-date browser support tables for HTML, CSS, and JavaScript features — including codec support, MSE, the Web Audio API, and individual media element attributes.

Related Pages in This Course

Audio and video topics connect to several other areas covered in IWT.

  • Images: Optimization & Delivery (Tutorial 11) internal Covers using short looping video (WebM/MP4) instead of animated GIF — video files are dramatically smaller and respect user motion preferences.
  • Media: SVG internal The SVG section — scalable vector graphics for icons, illustrations, and animations alongside video content.
  • HTTP internal HTTP range requests power byte-range seeking in media files and are the transport layer for adaptive streaming segments.
  • Audio & Video Reference cheatsheet internal Quick lookup for element attributes, source/track syntax, container and codec choices, the HTMLMediaElement JS API, and the responsive YouTube embed pattern.