HTML controls Attribute

The HTML controls attribute is a boolean attribute that tells the browser to show its built-in playback controls for an <audio> or <video> element. It was introduced in HTML5.

Why the controls attribute matters

By default, <audio> and <video> elements render no visible interface. An <audio> element without controls is completely invisible on the page, and a <video> element without it shows only the first frame (or a black box) with no way to start playback.

Adding controls gives users a way to play, pause, scrub, and adjust the volume — and lets keyboard and screen-reader users operate the media. Unless you are building a custom JavaScript player and providing your own accessible controls, you almost always want to include controls. Omitting it without a replacement is both a usability and an accessibility problem.

What controls are shown

For the <audio> element, the browser's controls typically provide:

Play / Pause
Seek bar (scrubbing)
Current time / duration
Volume / mute

For the <video> element, they typically provide:

Play / Pause
Seek bar (scrubbing)
Current time / duration
Volume / mute
Fullscreen toggle
Captions / subtitles (when a <track> of kind="captions" or kind="subtitles" is present)
Picture-in-Picture / download / "play on another device" (browser-dependent)

The exact set of controls — and how they look — is not standardized. Chrome, Firefox, Safari, Edge, and mobile browsers each render their own native UI, and some controls (such as captions or download) only appear when they are relevant. Treat the appearance as a browser detail you don't fully control.

Syntax

controls is boolean: its mere presence enables the controls. The value does not matter, so controls, controls="", and controls="controls" are all equivalent. To omit it, leave the attribute off entirely.

<audio controls></audio>

Example: controls on the `<audio>` element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button to hear the clip.</p>
  </body>
</html>

Try it Yourself »

The text inside the element ("Your browser does not support…") is fallback content for very old browsers. Replace the src with your own audio file path or any reachable HTTPS audio URL.

Example: controls on the `<video>` element

Here multiple <source> elements let the browser pick the first format it can play. Swap in your own files or a stable HTTPS URL.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
      Your browser does not support the video element.
    </video>
    <p>Some information about the video.</p>
  </body>
</html>

Try it Yourself »

Removing specific controls with controlslist

When you want most of the native controls but need to hide one or two, Chromium-based browsers (Chrome, Edge, Opera) support the related controlslist attribute. It takes a space-separated list of tokens that disable individual controls:

nodownload — hide the download button
nofullscreen — hide the fullscreen button (video)
noremoteplayback — hide the "play on another device" / casting button

<video controls controlslist="nodownload nofullscreen noremoteplayback">
  <source src="movie.mp4" type="video/mp4">
</video>

controlslist is not part of a finalized standard and is currently a Chromium feature, so Firefox and Safari ignore it. It only hides UI affordances — it is not a security or DRM mechanism, and a determined user can still access the media.

controls with autoplay and muted

If you combine controls with autoplay, most browsers will block sound-on autoplay. Add the muted attribute so the media is allowed to start, and the user can unmute it through the controls:

<video controls autoplay muted>
  <source src="movie.mp4" type="video/mp4">
</video>

Practice

What is the HTML 'controls' attribute used for?

It is used for controlling the behavior of an HTML table.It is used for offering additional controls in a text element.It is used for adding default multimedia controls to an audio or video element.It is used for manipulating images in an HTML document.