What is the controls attribute?
Understanding the controls Attribute
In HTML, the controls attribute is used with <video> and <audio> elements. It tells the browser to display built-in playback controls, such as play, pause, volume, and seek bar, so users can interact with the media.
- 1
It works with both
<video>and<audio>elements. - 2
When present, it shows the browser’s default player interface (play/pause button, timeline, volume, etc.).
- 3
It is a Boolean attribute — meaning you don’t need to assign it a value (just writing
controlsis enough). - 4
Without
controls, the media can only be controlled through JavaScript or autoplay.
In short: The controls attribute makes media interactive by showing play, pause, volume, and other basic controls to the user.
Scenario Questions
0-2 years experience
- 1How would you add playback controls to a video element in plain HTML?
- 2What happens to the user interface if you omit the controls attribute on an <audio> tag?
2-5 years experience
- 1Our design team wants a custom‑styled play button for a video that also needs to autoplay. Why might relying on the native controls attribute cause problems, and how would you integrate custom controls while keeping a fallback?
- 2During QA we noticed that on iOS the video element doesn't show the expected fullscreen button even though we have the controls attribute. How would you investigate and resolve this issue?
5-8 years experience
- 1We serve thousands of concurrent video players on a streaming platform. Discuss the trade‑offs between using the native controls attribute versus building a full JavaScript control layer in terms of performance, accessibility, and maintainability.
- 2We need to ensure keyboard navigation and screen‑reader support for video playback across browsers. How would you guarantee the native controls meet accessibility requirements, and what additional ARIA attributes might you add?
8+ years experience
- 1The company is migrating legacy pages that use custom Flash controls to HTML5. Outline a phased rollout plan that replaces Flash with <video> elements using the controls attribute, while minimizing user disruption and preserving SEO.
- 2Multiple product teams have implemented media controls inconsistently. Propose an organization‑wide guideline or component library strategy that standardizes the use of the controls attribute and any custom overlays, addressing cross‑browser quirks and long‑term maintenance.
Follow-up Questions
- How would you verify that the controls appear correctly on mobile versus desktop browsers?
- What accessibility steps would you take beyond just adding the controls attribute?
- If you needed a custom look, what trade‑offs would you consider when replacing the native controls?