HTML controls Attribute
The HTML controls attribute is a Boolean attribute that tells the browser to display its built-in playback controls for an <audio> or <video> element. These controls typically allow users to play, pause, seek, and adjust the volume of the media.
Syntax
The controls attribute is added to an <audio> or <video> element when the browser's built-in playback controls should be displayed.
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>Because controls is a Boolean attribute, no value is required.
Attribute Value
The controls attribute does not require a value. Its presence enables the browser's native media controls.
| Value | Description |
|---|---|
| Boolean attribute | When present, displays the browser's built-in playback controls for the media element. |
Elements That Use the controls Attribute
The controls attribute applies to the <audio> and <video> elements.
Audio Controls
Adding controls to an <audio> element gives users access to the browser's native audio player controls.
<audio src="music.mp3" controls></audio>The exact controls vary by browser and device, but typically include play and pause, a playback position control, and volume controls.
Video Controls
The controls attribute can also display the browser's native interface for a <video> element.
<video src="example.mp4" controls></video>Video controls typically provide play and pause, seeking, volume adjustment, and other features supported by the browser.
Boolean Attribute
The controls attribute is a Boolean attribute. If it is present, the controls are enabled regardless of the value assigned to it.
<video controls></video>
<video controls=""></video>
<video controls="controls"></video>Each of these forms enables the controls. Writing controls="false" does not disable them because the attribute is still present.
<!-- This still enables the controls -->
<video controls="false"></video>
<!-- Remove the attribute to disable the native controls -->
<video></video>Media Without controls
If the controls attribute is omitted, the browser does not display its default playback controls.
<video src="example.mp4"></video>Authors can provide custom controls instead by using HTML controls together with JavaScript and the media APIs. If native controls are removed, users should still be provided with accessible ways to operate the media.
Accessibility
Users need a way to control audio and video playback. Using the native controls attribute is a straightforward way to provide playback controls without creating a custom interface.
If custom controls are used instead, make sure essential functions such as starting, pausing, seeking, and adjusting audio are accessible to keyboard and assistive technology users.
Common Mistakes
Do not use controls="false" when you want to hide the controls. Because controls is Boolean, the attribute must be removed to disable the browser's native controls.
Do not assume the controls will look identical in every browser. The browser provides and styles its own native media interface.
If you omit the native controls, make sure another accessible method is available for users to control the media.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The controls attribute is widely supported on both <audio> and <video> elements. The appearance and available controls can vary between browsers and devices.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the controls Attribute
The example uses the controls attribute on a video element so the browser displays its built-in playback controls.
Summary
The HTML controls attribute is a Boolean attribute used with the <audio> and <video> elements. When present, it tells the browser to provide its native playback controls. To hide those controls, remove the attribute rather than assigning it a value such as false.