原生video标签隐藏底部功能按钮
原生video标签隐藏底部功能按钮
- 一、controlslist属性(只有3个配置项)
- 二、shadow DOM
- 1、查看shadow DOM(第一种)
- 2、查看shadow DOM(第二种)
- ①操作步骤
- ②查看信息
一、controlslist属性(只有3个配置项)
controlslist=“nodownload nofullscreen noremoteplayback”;
<videocontrolscontrolslist="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属性,隐藏画中画
原生video标签隐藏底部功能按钮相关推荐
- vue播放视频使用原生video标签基本功能(不含样式)
直接上代码: <template><div style="display: flex"><!-- 原生video标签,controls表示为可控制视频 ...
- vue使用原生video标签播放视频
页面效果如下图 如果想实现自动播放,需要加autoplay属性, 但是加了之后也可能出现无法自动播放的问题,还需要在加muted属性 muted 是静音属性 添加了以后 会自动播放 但是没有声音 怎么 ...
- video标签隐藏右下角的三个点-controls控件ui样式
通过controlslist和禁止右键使播放器不能被下载 <video src="{$data.h_video}" class="swiper-slide-img& ...
- Html5原生video标签禁止全屏播放的实现
制作移动端H5,需要添加视频,点击播放的时候会自动全屏播放,记录一下处理局部播放的问题. <video id="pageVideo"x5-playsinline=" ...
- vue 视频隐藏controls功能按钮
/*video默认全屏按钮*/video::-webkit-media-controls-fullscreen-button{ display: none !important; }/*video默认 ...
- video标签怎样自定义播放按钮样式
可以使用 HTML5 video 标签的 CSS 属性来自定义播放按钮的样式.比如可以使用 CSS 的 background-image 属性来设置自定义的背景图片,也可以使用 border-radi ...
- Video标签上面覆盖播放按钮点击播放
最终效果: 自定义图片(背景不是poster).覆盖到视频上,然后点击这个可以 播放. HTML部分: <div class="video-box" ><vide ...
- 修改video标签自带按钮的默认样式
这里所说的修改video标签中自带按钮的默认样式,指的是用css就可以控制视频播放按钮的大小等 我们来看一下 video 的内部构造: chrome 下,开发者工具 setting Prefere ...
- 微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签 前言 萤石云开放平台 微信开发者工具 前言 因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
最新文章
- Office2010启动慢的解决方法
- 一、mysql分表简单介绍
- 《Leadership and the One Minute Manager》读书笔记之一
- 802.11 参考手册
- 视图、索引、存储过程优缺点
- vs code 添加jquery的智能提示
- 性能测试-Gatling(一)
- ForeignKey和ManyToManyField的限制关系
- Java基础 选择语句,循环结构数组
- 【干货】2021中国“企服企业”规模化获客体系建设指南.pdf(附下载链接)
- cf1140E 回文串+染色方案dp
- 【气动学】基于matlab内弹道【含Matlab源码 057期】
- vue+webpack5项目中全局引入scss
- 计算机辅助设计排版,计算机辅助设计
- 大数据私房菜--Hadoop完全分布式安装
- 树莓派改造无线打印机
- 【Multisim仿真】NE555组成的振荡器电路(占空比可调)
- 关于word2016保存失败
- easyExcel 复杂表头 动态表头
- 2021-03-19我的博客