HTML controls Attribute
Description
The HTML controls attribute is a boolean attribute used in the <video> and <audio> elements. When present, it specifies that the default set of playback controls should be displayed on the media element. These controls typically include elements such as play/pause buttons, volume control, and a progress bar, although the exact controls can vary depending on the browser and its version.
The controls attribute does not require a value to be effective. Simply including "controls" within the opening tag of a <video> or <audio> element is enough to enable the display of the browser's default media controls for that element. This allows users to interact with the media, controlling playback without the need for any additional JavaScript or CSS.
Example usage in a <video> element:
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
And in an <audio> element:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
In both examples, the media elements will be rendered with a set of controls that allow the user to play, pause, and seek through the media, adjust the volume, and possibly access other features such as downloading the media or entering fullscreen mode, depending on the browser's implementation.
Syntax
<tagname controls>Values
The controls attribute is a boolean attribute, therefore no values are associated with this attribute.
Applies To
The controls attribute can be used on the following html elements.
Example
<audio controls><source src="audio/chime.mp3" type="audio/mpeg">Sorry your browser does not support the audio tag.</audio>Browser Support
The following table will show you the current browser support for the HTML controls Attribute.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 12 | 3 | 3.5 | 10.5 | 3.1 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 4 | 11 | 3 | 1 | 3 |
Last updated by CSSPortal on: 29th March 2024