CSS 控制 video 标签的控制栏组件的显隐

隐藏下载功能

<video src="" controlsList="nodownload" />


controlslist 取值如下(设定多个值则使用空格进行间隔)
如：controlslist="nodownload nofullscreen noremoteplayback"

nodownload：取消更多控件弹窗的下载功能

nofullscreen：取消全屏功能

noremoteplayback：取消远程播放视频

隐藏画中画功能

<video src="" disablePictureInPicture />

控制组件的显隐

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要展示，只需在 css 中设置相关属性把它隐藏掉即可

<video src="" controls />

全屏按钮

/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

播放按钮

/* 播放按钮 */
video::-webkit-media-controls-play-button {
  display: none;
}

进度条

/* 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}

观看的当前时间