Language References
HTML 5
Specifies whether controls for a media element’s player are displayed.
| Inline |
<element controls...> |
| Script |
object.controls = true | false ] |
The property is read/write with a default value of false.
The controls attribute is a boolean attribute, meaning its presence on an element represents true, and its absence represents false.
When present, the user agent ( or browser ) will expose a media element user interface that will allow users to control operation of the media source.
Different interface options are presented for the different media elements ( audio and video ), but generally include controls to start and stop playback, adjust or mute volume, adjust playback speed, and download the media content.
For video sources, the basic user interface adds controls for viewing in fullscreen or picture-in-picture mode.
Some browsers, specifically Microsoft Edge and Opera (as of this writing), include an enhanced mode feature that can sharpen and slightly improve overall quality of lower resolution videos.
In addition, most browsers provide other features in their context menus ( when users right-click on the media player ). These include loop, save as, open in new tab, show/hide controls, take snapshot, etc.
Example of using the controls attribute with the <audio> element.
<audio controls>
<source src="happy-day.mp3" type="audio/mpeg">
Sorry, your browser does not support the audio element.
</audio>
which would render on a Web page as follows:
Example of using the controls attribute with the <video> element.
<video autoplay controls width=640 height=360>
<source src="praise.mp4" type="video/mp4">
Sorry, your browser does not support the video element.
</video>
which would render on a Web page as follows:
AUDIO VIDEO