解决video更多选项按钮点击无反应以及操控video标签的控制按钮
在一个项目中使用原生video时, 点击右下侧 更多按钮时无反应,找了很多文章没有发现类似问题的解决方案
后面就想把更多按钮隐藏掉,但是只能找到隐藏 全屏按钮 和 画中画的隐藏方式 后面找到了可以通过shadow DOM 看到被隐藏的 DOM ,发现更多选项按钮其实是被点击了,但是弹出的菜单定位发生了问题,导致无法看到,如下图把bottom改为0,更多选项的菜单就会出现,但是我没有找到修改样式的方法,只能去掉视频的下载和画中画功能,让更多选项按钮消失
下面是其他按钮的样式操作以及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 (1)在控制设定如下(Chrome)
(2)shadow DOM信息如下
伪元素为::-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属性,隐藏画中画; controlsList="nodownload" 隐藏下载按钮,
隐藏画中画和下载按钮之后 *更多选项按钮* 会自动消失
各位小伙伴有更好的解决方法 欢迎评论讨论
解决video更多选项按钮点击无反应以及操控video标签的控制按钮相关推荐
- Photoshop 2020 新建闪烁以及创建按钮点击无反应解决方法
小伙伴们安装了Adobe Photoshop 2020后经常会问我新建画布闪烁以及创建按钮无法点击应该怎么解决,今天小编就教大家设置一下. 方法一,首先打开ps,如图所示: 勾选 使用旧版" ...
- ios 按钮点击无反应
今天项目遇到有个UIButton无法点击,弄了半天,总结出以下几个结论 1.如果一个UIButton的frame超出父视图的frame,UIButton还是可以显现的,但响应不了点击事件了,当开发中, ...
- android按钮点击无响应时间,AndroidStudio下的点击事件不响应
本来是测试自定义Toast,发现 implements View.OnClickListener的Onclick事件怎么都不响应,开始以为是自定义的问题.结果当然不是:需要clean项目就好了,And ...
- chrome 谷歌浏览器”上传“文件、图片按钮点击无响应
解决方案: 设置-----隐私设置和安全性-----网站设置-----内容----- 弹出式窗口和重定向(设置成允许) 重启浏览器问题解决.
- 桌面计算机未响应怎么办,电脑桌面假死(点击无反应)怎么解决?试试这三种处理方法吧...
原标题:电脑桌面假死(点击无反应)怎么解决?试试这三种处理方法吧 不少朋友提到遇到过电脑桌面假死,桌面图标怎么点击都没反应,最后无奈只能强制关机才能解决问题.有什么方法可以不用强制关机就能解决电脑假死 ...
- 关于VIDEO.JS播放器控制栏播放按钮点击问题
关于如何调用video.js组件作为播放器实现视频播放功能,网上有很多相关帖子,这里就不详细展开了.但在众多帖子里面,都没有提到网页版video的控制栏播放按钮点击问题,特此留贴记录一番. 症状是如下 ...
- 网站选择按钮点击无反应?_Win10系统电脑鼠标左键单击没有反应的解决办法
Win10系统鼠标左键单击没有反应是怎么回事?最近一个用户在用电脑的时候,突然遇到鼠标左键单击没有反应的问题,是鼠标坏了吗?还是系统问题呢?今天就给大家分析Win10系统电脑鼠标左键单击没有反应的可能 ...
- win10微软图标点击无反应_win10系统任务栏开始菜单等系统图标点击无反应的解决方法...
很多小伙伴都遇到过win10系统任务栏开始菜单等系统图标点击无反应的情况,想必大家都遇到过win10系统任务栏开始菜单等系统图标点击无反应的情况吧,那么应该怎么处理win10系统任务栏开始菜单等系统图 ...
- Android Listview中Button按钮点击事件冲突解决办法
今天做项目时,ListView中含有了Button组件,心里一早就知道肯定会有冲突,因为以前就遇到过,并解决过,可惜当时没有记录下来. 今天在做的时候,继续被这个问题郁闷了一把,后来解决后,赶紧来记录 ...
最新文章
- java学习--抽象类与接口
- 【最佳实践】授权子账号进行OSS图片样式设置
- Java高级语法笔记-语法支持的异常
- SAS在金融中的应用四
- (128)System Verilog下降沿检测实例
- GO语言打包ICO图标
- 年终盘点:2010年半导体产业的十大进展-转自老杳
- 分布式模块之间的调用_分布式事务
- 今日头条或推“多闪”对垒微信;快播王欣马桶 MT 被封;高通拒为 iPhone 提供芯片 | 极客头条...
- 单片机c语言曲普两只蝴蝶,51单片机蜂鸣器播放音乐代码(生日快乐 两只蝴蝶 祝你平安)...
- 摩拜单车开锁实现原理剖析
- 电商后台管理系统技术总结(黑马)
- 企业生产现场中5S管理的应用
- 三种最常用的期货交易系统,99%的人都不知道
- python battleship_Python 入门教程 12 ---- Battleship!-阿里云开发者社区
- 「首席架构师推荐」数值分析软件列表
- mfs java_mfs权威指南
- 前端学习路线之基础篇-李南江
- 单链表上的直接插入排序
- 字节码编程,Byte-buddy篇三《使用委托实现抽象类方法并注入自定义注解信息》