Audio & Video Reference - Introduction to Web Technologies

`<audio>` / `<video>` Attributes

Both elements share most attributes; a few are specific to <video>.

Attribute	Applies to	Meaning
`controls`	both	Shows the browser's built-in playback controls (play/pause, volume, seek bar).
`autoplay`	both	Starts playback as soon as the browser allows it. Browsers block autoplay unless `muted` is also set.
`muted`	both	Starts the media with audio silenced. Required for autoplay to work without a user gesture in most browsers.
`loop`	both	Restarts playback automatically when the media ends.
`preload`	both	Hints to the browser how much data to fetch before the user plays: `none` (don't preload), `metadata` (fetch duration/dimensions only), `auto` (browser decides, may buffer the whole file).
`poster`	`<video>` only	URL of an image to display before the video plays or while it is loading. Acts as a visual placeholder.
`width` / `height`	`<video>` only	Intrinsic display dimensions in CSS pixels. Set to prevent layout shift while video loads; use CSS for responsive sizing.
`playsinline`	`<video>` only	Prevents iOS Safari from automatically going fullscreen on play. Required for in-page video on iPhone.

See tutorials: Audio element · Video element

`<source>` & `<track>`

Place <source> and <track> elements as children of <audio> or <video>. The browser tries each <source> in order and uses the first one it can play.

Element & attribute	Meaning
`<source src="…" type="…">`	Provides an alternate media file. Set `type` (e.g. `video/webm; codecs="vp9"`) so the browser can skip sources it cannot decode without fetching them.
`<track kind src srclang label default>`	Attaches a timed text track (WebVTT file). Only one `default` track per `kind` is shown automatically.
`kind="captions"`	Dialogue plus relevant non-speech sounds; for deaf/hard-of-hearing viewers. Overlaid on the video.
`kind="subtitles"`	Translated dialogue for viewers who don't speak the audio language.
`kind="descriptions"`	Audio descriptions of visual content, for blind viewers.
`kind="chapters"`	Named time ranges for navigation within long-form content.

See tutorial: Captions & tracks

Containers & Codecs

A container format (the file extension) wraps one or more streams. A codec compresses each stream. Browser support is what determines which combination to serve.

Container	Video codec(s)	Audio codec(s)	Notes
`.mp4`	H.264 (AVC), H.265 (HEVC)	AAC, MP3	Universal support. H.264 + AAC is the safest single-file choice for broad compatibility.
`.webm`	VP9, AV1	Opus, Vorbis	Open, royalty-free. AV1 gives better quality at smaller file sizes; VP9 has wider device support today.
`.ogg`	Theora	Vorbis, Opus	Legacy open-source format. Largely superseded by WebM for video; `.ogg` audio (`type="audio/ogg"`) still occasionally used.

Best practice: serve WebM (VP9/Opus) first for modern browsers, then MP4 (H.264/AAC) as the universal fallback via a second <source>.

See tutorial: Formats & codecs

JS Media API (HTMLMediaElement)

Every <audio> and <video> element is an HTMLMediaElement and exposes the same properties, methods, and events via JavaScript.

Properties

currentTime: Read/write. Current playback position in seconds. Set it to seek to a specific time.
duration: Read-only. Total length of the media in seconds. Available after loadedmetadata fires.
paused: Read-only. true when playback is paused (or has not started).
ended: Read-only. true after the media has played to its end and loop is not set.
volume: Read/write. A number from 0.0 (silent) to 1.0 (full volume).
muted: Read/write. When true, audio output is silenced regardless of volume.
playbackRate: Read/write. Speed multiplier. 1.0 = normal; 0.5 = half speed; 2.0 = double speed.
readyState: Integer 0–4 indicating how much data is available. 4 = HAVE_ENOUGH_DATA — the browser believes it can play without stalling.

Methods

play(): Starts or resumes playback. Returns a Promise that resolves when playback begins, or rejects if blocked (e.g. autoplay policy). Always handle the rejection: video.play().catch(err => {}).
pause(): Pauses playback. Synchronous; no return value.
load(): Resets the element and re-fetches the media source. Call after changing <source> children dynamically.

Events

loadedmetadata: Fires when the browser knows the media's duration and dimensions. Safe to read duration after this.
play: Fires when playback is requested (before the first frame is rendered).
pause: Fires when playback is paused.
timeupdate: Fires repeatedly as currentTime advances (typically 4–66 times per second). Use for progress-bar updates.
ended: Fires when the media has played to its end.
volumechange: Fires when volume or muted changes.
seeking / seeked: seeking fires when the user or script changes currentTime; seeked fires when the browser has repositioned to the new time.
waiting: Fires when playback stalls because the browser is waiting to download more data (buffering).

See tutorial: Controlling with JavaScript (Tutorial 06)

Responsive YouTube Embed

Use an aspect-ratio wrapper to keep a 16:9 iframe responsive at any width. Prefer youtube-nocookie.com to reduce third-party tracking.

/* CSS: 16:9 responsive wrapper */
.embed-16x9 {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
}

.embed-16x9 iframe {
  position: absolute;
  inset: 0;          /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  border: none;
}

<!-- HTML: privacy-enhanced YouTube embed -->
<div class="embed-16x9">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="Descriptive title of the video"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
    loading="lazy">
  </iframe>
</div>

Key points: always set a descriptive title on the iframe for screen-reader users; loading="lazy" defers the network request until the embed is near the viewport; youtube-nocookie.com does not set cookies unless the viewer plays the video.

See tutorial: Embedding external video

<audio> / <video> Attributes

<source> & <track>