HTML controls Attribute
The HTML controls attribute is a boolean attribute and specifies that the audio/video controls must be displayed. It is new in HTML5.
You can use the controls attribute on the following elements: <audio> and <video>.
For the <audio> tag, the controls attribute typically provides:
- Play
- Pause
- Seeking
- Volume
For the <video> tag, the controls attribute typically provides:
- Play
- Pause
- Seeking
- Volume
- Fullscreen toggle
- Captions/Subtitles
- Track
Note: The exact controls displayed depend on the browser implementation and media format support.
Syntax
Syntax of HTML controls Attribute
<audio controls></audio>Example of the HTML controls attribute used on the <audio> element:
Example of the HTML "controls " attribute used on the <audio> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls src="https://www.w3docs.com/build/audios/audio.mp3">
Your browser does not support the audio element.
</audio>
<p>Click the play button</p>
</body>
</html>Example of the HTML controls attribute used on the <video> element:
Example of the HTML "controls " attribute used on the <video> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="https://www.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<p>Some information about video</p>
</body>
</html>Note: When using autoplay alongside controls, it is recommended to also include the muted attribute to comply with modern browser autoplay policies.
Practice
What is the HTML 'controls' attribute used for?