HTML Controls Attribute

Definition

The controls attribute specifies whether to display the default browser video or audio player enabling the user to stop or start the playback, change the volume, and position seek.

Applicable Elements

The controls attribute can be used with the following elements:

• <audio>
• <video>

HTML <audio> controls Attribute

The <audio> tag is used to embed a sound file in your HTML document. It can contain multiple audio sources, with the browser choosing the most suitable one.

The controls attribute, when used with the <audio> element, specifies whether to display the default browser audio player enabling the user to stop or start the playback, change the volume, and position seek.

Syntax

<video controls></video>

Usage

• The controls attribute is a boolean that is either present or not.
• The default browser controls for the video player include:
  • Play
  • Pause
  • Seeking
  • Volume
  • Track

Values

Values can include:

• controls

Examples

The following example shows a video player with controls:

<figure>
  <figcaption>Listen to the Dog Bark:</figcaption>
  <audio controls
      src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg">
          Your browser does not support the
          <code>audio</code> element.
  </audio>
</figure>

HTML <video> controls Attribute

The <video> tag is used to embed a video player in your HTML document. It can contain multiple video sources, with the browser choosing the most suitable one.

The controls attribute, when used with the <video> element, specifies whether to display the default browser video player enabling the user to stop or start the playback, change the volume, and position seek.

Syntax

<video controls></video>

Usage

• The controls attribute is a boolean that is either present or not.
• The default browser controls for the video player include:
  • Play
  • Pause
  • Seeking
  • Volume
  • Fullscreen
  • Captions
  • Subtitles

Values

Values can include:

• controls

Examples

The following example shows a video player with controls:

<video controls width="250">
    <source src="https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_1920_3_7MB.webm"
            type="video/webm">
    <source src="https://res.cloudinary.com/thewebmaster/video/upload/v1614789951/image/file_example_WEBM_1920_3_7MB.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

Specification

The controls HTML specification for each of the following elements is below:

• <audio>, <video>
  • HTML Living Standard Specification

Browser Support

The controls has the following browser support:

Desktop

Mobile