HTML5 provides built-in video playback controls, of which videocontrolslist is a very useful attribute. The videocontrolslist attribute can be used to tell the browser which default user interface controls should be displayed during video playback. Below we will introduce the detailed use of videocontrolslist from several aspects.
1. Enable videocontrolslist
The videocontrolslist attribute can be applied to the video element. To use it, simply add the controlslist attribute to the video tag in the HTML code and set its value to the displayed control list. By default, the value of the controlslist attribute of the video element is empty.
<video src="example.mp4" controls controlslist="nodownload"></video>
The code above shows an example of the controlslist attribute. The nodownload attribute value tells the browser not to display the "Download" button when displaying the control.
2. Control the display of videocontrolslist
Controlling the display of videocontrolslist is very simple. You only need to set the display attribute of the video-controls-list CSS pseudo class. The default value of this property is "block", in the example below, we set it to "none". This will hide the videocontrolslist completelyÿ