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

  1. nodownload关键字暗示的下载管制应应用用户代理本人的一套媒体元素控件时被暗藏。
  2. nofullscreen关键字暗示在应用用户代理本人的媒体元素控件集时，应暗藏全屏模式控件。
  3. noremoteplayback关键字暗示当应用用户代理本人的媒体元素控件集时，应暗藏近程播放控件。

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'; // 暗藏下载按钮


去掉右侧三个点后的款式