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 includes:
- Play
- Pause
- Seeking
- Volume
For the <video> tag, the controls attribute includes:
- Play
- Pause
- Seeking
- Volume
- Fullscreen toggle
- Captions/Subtitles
- Track
Syntax
<tag controls></tag>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="/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:
<!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="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Some information about video</p>
</body>
</html>Practice Your Knowledge
What is the HTML 'controls' attribute used for?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.