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;
}

观看的当前时间

/* 观看的当前时间 */
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::-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;
}