当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-31 01:20:36 CSS

CSS控制video标签的控制条组件隐藏视频播放器右下角的三个点、进度条、全屏按钮、播放速度等。csshiddenbutton//全屏按钮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{显示:无;}//剩余时间video::-webkit-media-controls-time-remaining-display{display:none;}//音量键视频::-webkit-media-controls-mute-button{display:none;}video::-webkit-media-controls-toggle-closed-captions-button{显示:无;}//音量控制条video::-webkit-media-controls-volume-slider{display:none;}//所有控件video::-webkit-media-controls-enclosure{display:none;}controlslist隐藏按钮controlsList属性返回DOMTokenList帮助用户在显示自己的控件集时选择要显示在媒体元素上的控件,一个或多个可以设置以下三个可能值中的一个:nodownload、nofullscreen和noremoteplaybackMDN中的controlslist属性指定在使用用户代理自己的媒体元素控件集时应隐藏nodownload关键字隐含的下载控件。nofullscreen关键字意味着在使用用户代理自己的媒体元素控件集时应隐藏全屏模式控件。noremoteplayback关键字意味着在使用用户代理自己的媒体元素控件集时应隐藏远程播放控件。noplaybackrate播放速度选项MDNHTMLMediaElement.controlsList//nodownload:不下载//nofullscreen:不全屏//noremoteplayback:不远程播放//disablePictureInPicture:不画中画如图隐藏播放器右下角的三个点。可能需要隐藏右下角的三个点,里面有下载和画中画!需要隐藏下载和画中画,才能完全隐藏这三个点。设置controlslist="nodownload"然后设置disablePictureInPicture="true"或者直接用js获取dom节点并设置相应的属性即可constel=document.querySelector('video');el['disablePictureInPicture']=true;//将disablePictureInPicture的属性更改为true以禁用画中画el['controlslist']='nodownloadnoremoteplayback';//隐藏下载按钮并去掉右边的三个点更新最新版本的谷歌浏览器播放器组件有播放速度选项