CSS video隐藏按钮

//全屏按钮
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 id="videoD" style="width:100%;height:300px;object-fit: unset;" src="video路径地址" x5-video-player-type="h5" playsinline="true" x5-playsinline="true" webkit-playsinline="true" x5-video-player-fullscreen="true" preload controls></video>

 

上图有下载和画中画

添加如下代码,使用js获取dom节点后设置对应属性

let myVideo = document.getElementById('videoD');
myVideo['disablePictureInPicture'] = true;  //去除画中画
myVideo.setAttribute('controlslist','nodownload noremoteplayback '); //去除下载

拓展

controlslist

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

• nodownload关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。

• nofullscreen关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。

• noremoteplayback关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。

// nodownload: 不要下载

// nofullscreen: 不要全屏

// noremoteplayback: 不要远程回放