The controls attribute on a media player specifies that the element should display its media controls (play, stop, volume, etc.).
Elements that accept this attribute are <audio>, and <video>.
An <audio> element with a controls attribute.
Without this attribute the audio player would not be visible.
<audio controls>
<source src="/media/epic.mp3" type="audio/mpeg">
</audio>
For additional details see our HTML audio controls Reference.
The controls attribute specifies that the media player should display its controls.
In fact, without the controls attribute users cannot interact with the player.
Media players have a DOM API, so JavaScript will still be able to interact with the player.
The controls contain the following button functions:
<tagname controls>
The following elements accept the controls attribute.
| Elements | Description | |
|---|---|---|
| <audio> | Creates an audio player -- see example above | |
| <video> | Creates a video player |
A <video> tag with a controls attribute.
The video controls are visible.
<video width="320" height="240" controls>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
</video>
For additional details see our HTML video controls Reference.
Here is when controls support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
