HTML controls Attribute

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">

For additional details see our HTML audio controls Reference.

Using controls

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:

  • Play / pause
  • Volume
  • Seeking
  • Download


<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">

For additional details see our HTML video controls Reference.

Browser support

Here is when controls support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023

Quick question: what's your favorite/least favorite part of Dofactory?