原生video标签隐藏底部功能按钮
一、controlslist属性(只有3个配置项)
controlslist=“nodownload nofullscreen noremoteplayback”;
<video
controls
controlslist="nodownload"
class="video-player"
disablePictureInPicture // 隐藏画中画
></video>
controlslist:取值如下,设定多个空格间隔
nodownload:取消更多控件弹窗的下载功能;
nofullscreen:取消全屏功能;
noremoteplayback:取消远程播放视频
controlslist=“nodownload” + disablePictureInPicture:弹窗中两个选项全部取消后,更多按钮自动消失了
二、shadow DOM
shadow DOM就是浏览器创建的在DOM子树。简单来说,它是一系列的DOM元素,跟熟悉的div span一样,只不过shadow
DOM是浏览器添加的文档片段(document fragment)并且能够像DOM树一样在页面中得到渲染。下面引用James
Edwards的话简要概括一下影子DOM的作用:
影子DOM通过创建文档片段的形式高效地封装内容,影子DOM的内容是特殊的文档,会通过合并到主文档的方式来创建所有被渲染的内容。
实际上一些浏览器已经通过影子DOM的方式来渲染浏览器的插件
1、查看shadow DOM(第一种)
打开控制台只有video DOM,没有播放 暂停等元素的信息,其实video标签的控制栏就是浏览器创建的shadow DOM
2、查看shadow DOM(第二种)
①操作步骤
在谷歌浏览器操作如下
勾选Show user agent shadowDOM
②查看信息
伪元素为::-webkit-media-controls,通过名字我们就已经知道这是和视频控制栏相关联的标签。然后我们可以通过设置display:none !important覆盖样式来将它隐藏就是这么简单;
// // 播放按钮
video::-webkit-media-controls-play-button {
display: none !important;
}
// 当前播放时间
video::-webkit-media-controls-current-time-display {
display: none !important;
}
// 剩余时间
video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
// 音量按钮
video::-webkit-media-controls-volume-control-container {
display: none !important;
}
// 全屏
video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
// 时间轴
video::-webkit-media-controls-timeline {
display: none !important;
}
// 更多选项 --然而并不生效
video::-internal-media-controls-overflow-button {
display: none !important;
}
然而覆盖隐藏更多按钮样式并不生效
可以设定disablePictureInPicture属性,隐藏画中画