The controlsList attribute in <video> Tags are used to specify which controls should be displayed in the video player’s control interface. This attribute provides fine-grained control over the visibility and behavior of various controls, such as play, pause, volume, and fullscreen, allowing developers to customize the video playback experience to suit their specific requirements.
Syntax
<video controls controlsList="controls_list_values">
<source src="video.mp4" type="video/mp4">
<!-- Your browser does not support the video tag.-->
</video>
Where,
-
controlsenables the default browser controls for the video player. -
controls_list_valuesis a space-separated list of values indicating which controls to display. Possible values include"nodownload","nofullscreen","noremoteplayback", and"nodownload noremoteplayback", among others.
Key Point of controlsList Attribute
| Key Point | Description |
|---|---|
| Customization |
The controlsList attribute allows developers to customize the visibility and behaviour of video player controls to suit their specific requirements.
|
| Available Controls |
Supported control options include "nodownload", "nofullscreen", "noremoteplayback", "nodownload noremoteplayback", and others, depending on the browser.
|
Features
-
Control Options: Choose from available control options such as
"nodownload","nofullscreen","noremoteplayback", and others, depending on the desired customization. -
Multiple Values: Combine multiple control options by separating them with spaces within the
controlsListattribute, such as"nodownload noremoteplayback". - Browser Compatibility: Be aware that the availability and behavior of control options may vary between browsers and versions, so it’s essential to test implementations across different environments.
- Accessibility Considerations: Ensure that any customization of video player controls maintains accessibility standards, providing an inclusive user experience for all users, including those with disabilities.