**`controls`** is a boolean attribute — its mere presence turns it on, regardless of any value (`controls`, `controls="controls"`, and `controls="true"` all behave identically; only its ABSENCE means off). Without it, a `<video>` or `<audio>` element has no visible playback UI at all, and would only be controllable via custom JavaScript and your own buttons. The native controls' exact appearance varies by browser and OS, since each renders its own built-in UI rather than a standardized one.
1Understanding controls
`controls` is a boolean attribute — its mere presence turns it on, regardless of any value (controls, controls="controls", and controls="true" all behave identically; only its ABSENCE means off). Without it, a <video> or <audio> element has no visible playback UI at all, and would only be controllable via custom JavaScript and your own buttons. The native controls' exact appearance varies by browser and OS, since each renders its own built-in UI rather than a standardized one.
If you need a custom-branded player UI instead of the browser's native controls, omit controls entirely and build your own buttons that call the media element's play()/pause() methods via JavaScript.
<audio controls>
<source src="/podcast.mp3" type="audio/mpeg">
</audio>2Practical Example
Here is a real-world application of controls showing how it is used in production HTML.
<!-- No controls: fully custom playback via JavaScript -->
<video id="player" src="/clip.mp4"></video>
<button onclick="document.getElementById('player').play()">Play</button>3Best Practices
Follow these guidelines when working with controls:
1. Include controls by default so users always have a way to pause/adjust volume
2. Only omit it if you're deliberately building fully custom playback controls with JavaScript
3. Remember native control appearance differs across browsers — don't assume pixel-perfect consistency
Tip: If you need a custom-branded player UI instead of the browser's native controls, omit controls entirely and build your own buttons that call the media element's play()/pause() methods via JavaScript.
<audio controls>
<source src="/podcast.mp3" type="audio/mpeg">
</audio>