When the controls attribute is added to the video tag, all control components will be displayed on the page.

<video src="" controls />

Hide VDIEO's control blocking component

If some components do not need to be displayed, simply set the relevant properties in CSS to hide them

/*Full screen button*/
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
/*Play button*/
video::-webkit-media-controls-play-button {
  display: none;
}
/*Progress bar*/
video::-webkit-media-controls-timeline {
  display: none;
}
/*Current viewing time*/
video::-webkit-media-controls-current-time-display {
  display: none;
}
/*Remaining time*/
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
/*Volume button*/
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
/*Volume control bar*/
video::-webkit-media-controls-volume-slider {
  display: none;
}
/*All controls*/
video::-webkit-media-controls-enclosure {
  display: none;
}

Disabled download

<video src="" controlsList="nodownload" />
 
 
The value of ControlSlide is as follows (if multiple values are set, use spaces for spacing)
如:controlslist="nodownload nofullscreen noremoteplayback"
 
Nodownload: Cancel the download function of more control pop ups
 
Nofullscreen: Cancel full screen function
 
Noremoteplayback: Cancel remote video playback

Disabled the picture in picture

<video src="" disablePictureInPicture />