乐趣区

关于视频:CSS控制video标签的控制栏组件-隐藏video播放器右下角三个点

jiezi

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


去掉右侧三个点后的款式

退出移动版