Audio and Video

Embed native audio and video with <audio> and <video>, control playback with attributes, provide format fallbacks with <source>, and add captions with <track>.

Before HTML5, playing audio or video in a browser meant relying on third-party plugins like Flash. Modern HTML provides <audio> and <video> as native elements — no plugins required — with a shared set of attributes for controlling playback and a consistent way to offer multiple file formats and accessible captions.

The <video> Element

<video> embeds a video file with a built-in player. On its own it shows nothing but a black box with no way to interact with it — you need to add attributes and, usually, at least one <source> child to make it functional and visible.

Common attributes: controls (shows the native play/pause/volume UI), width and height (reserve layout space, same reasoning as images), poster (an image shown before playback starts), muted, loop, and autoplay.

The <audio> Element

<audio> works the same way as <video> but has no visual frame — just the playback controls when controls is present. It's used for podcasts, sound clips, background music players, and similar use cases where no picture is needed.

<audio> supports the same controls, autoplay, muted, and loop attributes as <video>, minus anything related to visual dimensions or a poster image.

autoplay, muted, and Why Sound Gets Blocked

The autoplay attribute tells the browser to start playback the instant the media is ready, without the user clicking play. This sounds convenient, but virtually every modern browser blocks autoplay of media with sound unless the user has already interacted with the page (or the site) in some way — because unsolicited sound blaring from an opened tab is one of the most-hated browsing experiences there is.

The one reliable way to get autoplay to actually work is to pair it with muted: autoplay muted loop is the standard pattern for background-video-style content (think a silent looping hero video on a landing page). If you need sound, you generally cannot force it — the user must opt in by clicking play or unmuting.

Multiple <source> Elements for Format Fallback

Not every browser supports every video or audio codec. Rather than picking one format and hoping for the best, you can list several <source> child elements inside <video> or <audio>, each pointing to a different encoded file of the same content. The browser walks through them in order and plays the first one it can decode, ignoring the rest.

The type attribute on each <source> tells the browser the file's MIME type up front, so it can skip formats it doesn't support without even downloading them. If none of the sources are supported, any text placed directly inside the <video>/<audio> tags (after the <source> elements) is shown as a fallback message.

Captions and Subtitles with <track>

The <track> element attaches a timed text file (usually in the WebVTT format, .vtt) to a <video>, most commonly used for captions or subtitles. It's a void element placed inside <video>, alongside any <source> tags.

Captions are essential accessibility infrastructure — they make video content usable for deaf and hard-of-hearing viewers, for viewers in sound-off environments (an office, a commute), and for viewers who speak a different language than the audio track. The kind attribute distinguishes purposes: captions (transcribing speech and relevant sound), subtitles (translating dialogue), descriptions, chapters, and metadata. The srclang and label attributes identify the language and give it a human-readable name in the player's track menu.

Video with Fallback Sources and Captions

<source> elements are tried in order; the first supported format wins poster shows before playback and while the video loads the fallback text only displays if no <source> can be played

<video controls width="640" height="360" poster="preview.jpg">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English">
  Your browser does not support embedded video.
</video>

Code Examples

controls shows the native play/pause/volume UI. Two <source> formats are offered so the browser can pick whichever it supports; the text at the end only shows if neither format works.

autoplay only reliably works when paired with muted. loop restarts playback automatically, and playsinline prevents the video from forcing fullscreen on mobile browsers — common for a decorative hero background video.

autoplay muted loop poster displays a static preview image before the user presses play, giving the player something meaningful to show instead of a blank or black frame while the video loads.

Two <track> elements offer English captions (transcribing spoken audio, marked default so they're on automatically) and Spanish subtitles as an alternative, both driven by separate WebVTT files.

<audio controls>
  <source src="lecture-01.mp3" type="audio/mpeg">
  <source src="lecture-01.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<video autoplay muted loop playsinline width="1280" height="720">
  <source src="hero-loop.mp4" type="video/mp4">
</video>

<video controls width="800" height="450" poster="thumbnail.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  <source src="tutorial.webm" type="video/webm">
</video>

<video controls width="720" height="405">
  <source src="interview.mp4" type="video/mp4">
  <track kind="captions" src="interview-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="interview-es.vtt" srclang="es" label="Español">
</video>

Where This Shows Up

Landing-page hero videos, embedded lecture recordings on e-learning platforms, and product demo clips on e-commerce sites all rely on this exact pattern: multiple <source> formats for compatibility, a poster for perceived performance, and (increasingly required by law in many regions) captions via <track> for accessibility compliance.

Autoplay with sound is blocked by most browsers by default; without muted, this video will typically just sit paused on the first frame instead of playing.

<video src="clip.mov" controls></video> <video controls width="640" height="360"> <source src="clip.mp4" type="video/mp4"> <source src="clip.webm" type="video/webm"> </video>.mov is not a reliably web-supported format, and relying on a single src with no fallback means playback fails entirely for browsers that can't decode it. Provide widely-supported formats (MP4, WebM) as multiple <source> options.

[Predict the Output] A developer deploys this <video> element to production and expects it to autoplay with sound as soon as the page loads. What will actually happen in most modern browsers? <video autoplay controls width="640" height="360"> <source src="ad.mp4" type="video/mp4"> </video> A. It will autoplay with sound exactly as intended, since autoplay is present B. It will fail to load entirely and show a broken video icon C. Most browsers will block the autoplay because it has sound and no muted attribute, so it will sit on its first frame until the user presses play D. It will autoplay but only in Chrome, since autoplay is a Chrome-only attribute

C. Most browsers will block the autoplay because it has sound and no muted attribute, so it will sit on its first frame until the user presses play — Browsers widely restrict autoplay for media with audio to prevent unwanted sound. Without the muted attribute, this video will typically remain paused on its first frame until the user manually starts it — autoplay muted loop is the reliable pattern for guaranteed autoplay.

Write a <video> element for a tutorial clip that: shows native controls, displays 'thumb.jpg' before playback, offers both an MP4 and a WebM source, and includes English captions from 'tutorial-en.vtt'.

You'll need controls, poster, two <source> tags with correct type values, and one <track kind="captions"> tag.