HTML controls Attribute

The controls attribute on a media player specifies that the element should display its media controls (start, stop, time, volume, etc.). Elements that accept this attribute include <audio>, and <video>.

Example

#

A controls attribute on an <audio> element.
Without the controls attribute the audio player won't be visible.

<audio controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
</audio>

For additional details see our HTML audio controls Reference.


Using controls

The controls attribute specifies that the media player should display its controls.

In reality, 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:

  • Play / pause
  • Volume
  • Seeking
  • Download

Syntax

<tagname controls>

Elements that accept controls

The following elements accept the controls attribute.

Elements Description
<audio> Creates an audio player -- see example above
<video> Creates a video player

<video> with controls

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.


Browser support

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

You may also like



Guides