当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。

<video src="" controls />

隐藏VDIEO的控制拦组件

若有些组件不需要展示，只需在 css 中设置相关属性把它隐藏掉即可...

/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}
/* 播放按钮 */
video::-webkit-media-controls-play-button {
  display: none;
}
/* 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}
/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display {
  display: none;
}
/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {
  display: none;
}
/* 音量按钮 */
video::-webkit-media-controls-mute-button {
  display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}
/* 音量的控制条 */
video::-webkit-media-controls-volume-slider {
  display: none;
}
/* 所有控件 */
video::-webkit-media-controls-enclosure {
  display: none;
}

取消下载功能

<video src="" controlsList="nodownload" />
 
 
controlslist 取值如下(设定多个值则使用空格进行间隔)
如：controlslist="nodownload nofullscreen noremoteplayback"
 
nodownload：取消更多控件弹窗的下载功能
 
nofullscreen：取消全屏功能
 
noremoteplayback：取消远程播放视频

取消画中画功能

<video src="" disablePictureInPicture />