controls

The controls attribute in HTML is a boolean that, when added to <video> or <audio> elements, ensures that the default playback controls are visible to the user.

control attribute

The controls attribute in HTML is a boolean used with <video> and <audio> elements. When added, it provides the default playback controls, including options like play, pause, volume, and progress.

Syntax

index.html

<tagname controls>

The controls attribute operates without requiring a value. By simply including the word controls in the opening tag of a <video> or <audio> element, the default playback controls are enabled by the browser, allowing users to interact with the media without the need for additional JavaScript or CSS.

Example

Example usage in a <video> element:

index.html

<video controls>
  <source src="video1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

And in an <audio> element:

index.html

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Values

The controls attribute is a boolean, meaning it doesn’t require any associated values.

Applies To

The controls attribute can be applied to various HTML elements, as listed below:

Example

index.html

<audio controls><source src="audio.mp3" type="audio/mpeg">
  Sorry your browser does not support the audio tag.
</audio>

Conclusion

The controls attribute in HTML offers an easy method to enable playback controls for <video>and <audio> elements. By adding this attribute, users can directly interact with media content without relying on extra JavaScript or CSS, enhancing the user experience on media-focused websites.

Media

The HTML media attribute specifies the target media or device type for which a linked resource, such as a stylesheet, is optimized.

default

The default attribute is a boolean used with the <track> element to indicate the default text track for audio or video content.