HTML Media: Adding Audio and Video to Your Pages

For years, putting sound or video on a web page meant wrestling with browser plugins like Flash — clunky, insecure, and a nightmare on phones. HTML put an end to all that. Today you embed a video or a sound clip with a single element, no plugin required, and it just plays. In this article you’ll learn the <audio> and <video> elements properly: how to point them at your media, how to offer more than one file format, and how to handle the awkward bits like autoplay restrictions, captions, and load performance.

This builds on what you already know about HTML elements and attributes, so if any of the attribute syntax looks unfamiliar, it’s worth a quick look back at HTML attributes first. Media elements lean heavily on attributes to do their work.

The <video> element

The simplest possible video looks like this:

<video src="trailer.mp4" controls></video>

That’s a complete, working video player. The src attribute points to the file, and controls tells the browser to draw the play button, the scrubber, the volume slider, and the fullscreen button. Without controls, the video would still load — but the visitor would have no way to play, pause, or seek it, which is almost never what you want.

You’ll usually want to set a size too, so the page doesn’t jump around while the video loads:

<video src="trailer.mp4" controls width="640" height="360"></video>

Set width and height to the video’s real aspect ratio. The browser reserves that space immediately, so your layout stays put instead of shifting when the file arrives.

Multiple formats with <source>

Here’s the catch with that single-src approach: not every browser can play every video format. Most modern browsers handle MP4 (H.264) fine, but to be safe — and to support a wider range of devices — you offer the same video in more than one format and let the browser pick the first one it understands.

You do that by dropping the src from the <video> tag and listing several <source> children instead:

<video controls width="640" height="360">
  <source src="trailer.webm" type="video/webm" />
  <source src="trailer.mp4" type="video/mp4" />
  Sorry, your browser can't play this video.
</video>

The browser reads the <source> tags top to bottom and uses the first format it supports, ignoring the rest. The type attribute tells it the format up front, so it doesn’t even have to download a file to find out it can’t play it. Put your most modern, best-compressed format first (WebM here), with the widely supported MP4 as a reliable fallback.

That plain text after the sources — “Sorry, your browser can’t play this video.” — is the fallback content. It only shows up if the browser supports neither the <video> element nor any of the formats you offered. On any current browser, nobody ever sees it.

The <audio> element

Audio works almost identically — same idea, same attributes, just no picture:

<audio controls>
  <source src="podcast.ogg" type="audio/ogg" />
  <source src="podcast.mp3" type="audio/mpeg" />
  Your browser doesn't support audio playback.
</audio>

By default an <audio> element renders as a slim playback bar with a play button, a progress track, and a volume control. MP3 is the safe, universal format; OGG is a smaller, open alternative you can offer first. Everything you learn about <video> attributes below applies to <audio> too, apart from the visual-only ones like poster and width/height.

The attributes that control playback

A handful of attributes shape how your media behaves. You can mix and match them on either element:

• controls — show the browser’s built-in playback UI. You almost always want this.
• autoplay — start playing as soon as the media is ready. Use with extreme care (more on this below).
• muted — start with the sound off. Often paired with autoplay.
• loop — restart automatically when it reaches the end.
• preload — hint to the browser how much to download ahead of time: none (wait until the user hits play), metadata (just grab the duration and dimensions), or auto (the browser decides, possibly the whole file).
• poster (video only) — an image to show before the video plays, instead of a blank or frozen first frame.

Here’s a video using several of them together:

<video
  controls
  poster="cover.jpg"
  preload="metadata"
  width="640"
  height="360"
>
  <source src="demo.webm" type="video/webm" />
  <source src="demo.mp4" type="video/mp4" />
</video>

The poster gives the player a clean thumbnail before playback, and preload="metadata" keeps the initial download light — the browser only fetches enough to know the duration, then waits for the user to actually press play before downloading the rest.

Captions and subtitles with <track>

Video that carries spoken words should come with captions — for viewers who are deaf or hard of hearing, for anyone watching with the sound off, and frankly for everyone in a noisy room. You add captions with a <track> element inside the <video>:

<video controls width="640" height="360">
  <source src="lecture.mp4" type="video/mp4" />
  <track
    src="lecture-en.vtt"
    kind="captions"
    srclang="en"
    label="English"
    default
  />
</video>

The captions live in a separate WebVTT file (a .vtt text file) that lists each line of text alongside the timestamps it should appear at. On the <track> element:

• kind="captions" says these are captions (as opposed to subtitles, descriptions, or chapters).
• srclang="en" declares the language.
• label="English" is the name the user sees in the track menu.
• default marks this track to be shown automatically.

You can include several <track> elements for different languages, and the browser will offer them in its captions menu.

Putting it together: a complete media block

Here’s everything in one realistic example — a video with two formats, a poster, lightweight preloading, captions, and a graceful fallback:

<figure>
  <video
    controls
    poster="product-tour.jpg"
    preload="metadata"
    width="800"
    height="450"
  >
    <source src="product-tour.webm" type="video/webm" />
    <source src="product-tour.mp4" type="video/mp4" />
    <track
      src="product-tour-en.vtt"
      kind="captions"
      srclang="en"
      label="English"
      default
    />
    <p>
      Your browser can't play this video.
      <a href="product-tour.mp4">Download it instead</a>.
    </p>
  </video>
  <figcaption>A quick tour of the ACY Partner Indonesia dashboard.</figcaption>
</figure>

Wrapping the media in <figure> with a <figcaption> is a clean, semantic way to caption it — the same pattern you’d use for an image. And notice the fallback here isn’t just plain text: it offers a download link, so even a visitor on something exotic isn’t left stranded.

Best practices and when to use what

A few habits that separate a media block that works from one that works well:

• Always include controls unless you have a very specific reason not to (like a muted background video). Taking away the controls takes away the user’s agency.
• Offer at least two formats with <source> — a modern one first (WebM), a universal one second (MP4 / MP3). It costs you nothing and widens your reach.
• Compress your files. Video especially can be enormous. A bloated, uncompressed video is the fastest way to make a page feel slow and burn through a visitor’s mobile data. Export at a sensible resolution and bitrate before you upload.
• Use preload="metadata" or preload="none" for media that isn’t the main event, so you’re not downloading megabytes the visitor may never watch.
• Set width and height to prevent layout shift, then scale responsively with CSS.
• Add captions for anything with speech.
• Never autoplay sound. Mute it if you must autoplay, or wait for a click.

When should you reach for these elements? Use <audio> for podcasts, music samples, pronunciation clips, sound effects — anything the user listens to. Use <video> for tutorials, product demos, background ambience, anything they watch. For video hosted elsewhere — a YouTube or Vimeo clip — you don’t use <video> at all; you embed the provider’s player with an <iframe> instead, which is a topic of its own.

Wrapping up

Native media in HTML is genuinely pleasant to work with once you know the pieces:

• <video> and <audio> embed media with no plugins — add controls and you have a working player.
• Use <source> children to offer multiple formats so different browsers can each pick one they support; the browser takes the first match.
• Key attributes — autoplay, muted, loop, preload, and poster (video only) — shape how playback behaves and how much loads up front.
• Autoplay with sound is blocked; the working pattern is autoplay muted.
• Add <track> captions for any media with speech — it’s the responsible default, not an afterthought.
• Mind performance: compress your files and preload conservatively.

With audio and video in your toolkit, your pages can do far more than text and images. Next up in the HTML journey, you’ll look at embedding content from other sites — maps, hosted videos, widgets — with the <iframe> element, which picks up right where this leaves off.