CSS控制video标签的控制栏组件 隐藏video播放器右下角三个点

video标签默认是不显示控制条的，在video标签添加controls可显示视频播放器的控制条,包含视频的播放控制按钮、进度条、全屏按钮、播发速度等。
<video controls></video>

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

controlslist隐藏按钮

controlsList属性返回DOMTokenList，帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件,可以设置以下三个可能值中的一个或多个：nodownload，nofullscreen和noremoteplayback

MDN中controlslist属性说明

1. nodownload关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。
2. nofullscreen关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。
3. noremoteplayback关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。
4. noplaybackrate播放速度选项

MDN HTMLMediaElement.controlsList

// nodownload: 不要下载
// nofullscreen: 不要全屏
// noremoteplayback: 不要远程回放

// disablePictureInPicture: 不要画中画 

<video controls 
       disablePictureInPicture="true"
       controlslist="nodownload nofullscreen noremoteplayback"
</video>

隐藏播放器右下角三个点

如图 可能需要隐藏右下角的三个点，里面包含下载和画中画!需要将下载和画中画隐藏后才回完全隐藏这三个点。只需要将controlslist="nodownload"，然后设置disablePictureInPicture="true"就可以了

或者直接使用js获取dom节点后设置对应属性

const el = document.querySelector('video');
el['disablePictureInPicture'] = true; // disablePictureInPicture的属性改为true 禁用画中画
el['controlslist'] = 'nodownload noremoteplayback'; // 隐藏下载按钮

去掉右侧三个点后的样式

更新

最新版的谷歌浏览器播放器组件还有播放速度选项