HTML controls Attribute

Introduction

The controls attribute is a valuable feature in HTML that lets developers enhance the user interface of multimedia elements such as <video> and <audio>. By adding controls, you give users built-in playback controls so they can play, pause, seek, and adjust volume without writing custom JavaScript UI code.

What You’ll Learn

Purpose of controls

The primary purpose of the controls attribute is to show or hide the browser’s default user interface for multimedia elements. When the attribute is present, users can play, pause, scrub the timeline, adjust volume, and perform other playback actions directly from the embedded media player.

📝 Syntax

Add the boolean controls attribute to a media element:

<video controls width="640" height="360">

  <source src="clip.mp4" type="video/mp4">

</video>



<audio controls src="song.mp3"></audio>

Syntax Rules

• Boolean attribute: if present, default controls are shown.
• Modern HTML uses the bare attribute name: controls (not controls="controls").
• Omit the attribute entirely to hide the default UI.
• JavaScript uses element.controls (boolean property).

💎 Values

The controls attribute is a boolean attribute. It does not use meaningful string values like "true" or "false" in HTML markup:

• Attribute present — Default playback controls are shown. Examples: controls or controls="".
• Attribute absent — No default controls. Users cannot interact unless you provide custom UI or script-driven playback.

<!-- Shows controls -->

<video controls src="clip.mp4"></video>



<!-- Hides controls (no attribute) -->

<video src="clip.mp4"></video>



<!-- JavaScript toggle -->

<script>

  videoElement.controls = false;

</script>

Applicable Elements

Default controls vs custom player

Examples Gallery

Video with controls, JavaScript toggle, and audio with controls.

<video controls width="400" height="300">

  <source src="example.mp4" type="video/mp4">

  Your browser does not support the video tag.

</video>

<button type="button" id="toggleBtn">Show Controls</button>

<video id="dynamicVideo" width="320" height="240" src="example.mp4"></video>



<script>

  var video = document.getElementById("dynamicVideo");

  var btn = document.getElementById("toggleBtn");



  btn.addEventListener("click", function () {

    video.controls = !video.controls;

    btn.textContent = video.controls ? "Hide Controls" : "Show Controls";

  });

</script>

<audio controls>

  <source src="song.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

♿ Accessibility

• Always offer control — If media can play, users need a way to pause, mute, or stop it. Default controls is the simplest path.
• Keyboard access — Browser-native controls support keyboard interaction; custom players must replicate that behavior.
• Captions and transcripts — Use <track kind="captions"> for video accessibility; controls alone are not enough for deaf users.
• Autoplay caution — Pair autoplay with controls so users can stop unexpected playback.
• Visible focus — Do not hide native controls with CSS in ways that remove focus indicators users rely on.

💡 Best Practices

• Use the controls attribute when you want a standard set of playback controls for multimedia elements.
• Consider omitting default controls only if you plan to implement a custom multimedia player with JavaScript.
• Always ensure your multimedia files are in widely supported formats for a consistent user experience across browsers.