The HTML controls attribute is a boolean attribute used with the <audio> and <video> elements to display default playback controls.
Definition and Usage
➔ When the controls attribute is present in the <audio> or <video> tag, the user interface for playback is displayed. If the attribute is omitted, the controls are not displayed.
Syntax
//In HTML
<video controls width="250">
<source src="myvideo.mp4" type="video/mp4" id="sample">
Your browser does not support the video tag.
</video>
<audio controls="controls">
<source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
//In JavaScript
const element= document.getElementById('sample');
element.controls = "false";
element.controls = "true";
//OR
element.setAttribute('controls', 'true');
element.setAttribute("controls", "");
// Remove the controls attribute
element.setAttribute('controls', 'false');
element.removeAttribute("controls");
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML controls attribute example</title>
</head>
<body>
<h3>HTML controls attribute example</h3>
<p>The control attribute displays the default playback controls.</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video controls id="sample">
<source src="myvideo.mp4" type="video/mp4">
This browser does not support the video tag.
</video>
</body>
</html>
Click on the "Try it Now" button to see how it works.