HTML Audio & Video
HTML DOM Audio controls Property
The controls property sets or returns whether a media element displays the browser's built-in playback controls, such as play/pause, volume and the seek bar. It reflects the controls HTML attribute and is a boolean.
Definition and Usage
When controls is true the browser renders its native player UI over the media. When it is false you must supply your own custom controls in HTML and wire them to the media API with JavaScript.
Syntax
// Get the value
let shown = mediaElement.controls;
// Set the value
mediaElement.controls = false;The property returns true when the controls attribute is present, and setting it adds or removes that attribute.
Example
<video id="myVideo" width="320">
<source src="movie.mp4" type="video/mp4">
</video>
<button onclick="toggleUI()">Toggle controls</button>
<script>
const video = document.getElementById("myVideo");
function toggleUI() {
video.controls = !video.controls;
}
</script>Toggling the property lets you hide the default controls while you build a bespoke interface, then bring them back for debugging or accessibility.
If you hide the controls, make sure your custom UI is keyboard-accessible and exposes at least play/pause and volume, otherwise you harm accessibility.