如何隐藏 video 元素的下载按钮
2018-01-16 23:23
316 查看
1. 使用 video 元素的 ControlList API
通过 ControList API,不仅可以通过设置 nodownload 来隐藏下载按钮,还可以设置 nofullscreen 隐藏全屏按钮, 以及noremoteplayback 等属性,具体的示例可以参考 github pages。该方案的优点是原生支持,不会产生bug,而且设置起来也是简单方便,不过由于 ControlList API 是从 Chrome 58+ 才开始引入的,所以对于低于 58 版本的 Chrome 只能通过方法2来隐藏了。
2. 通过 CSS 隐藏
通过 Settings|Preferences -> Elements -> Show user agent shadow DOM 打开 shadow DOM 开关后,可以通过 devtools 查看 video 元素的组成部分。
由此发现下载按钮的是通过 <input type="button" pseudo="-internal-media-controls-download-button" style=""> 呈现的,所以可以通过下述CSS将其隐藏:
但是很可惜,该方法并不起作用,猜想可能是Chrome的一个BUG,所以只能另辟蹊径,简单来说就是将下载按钮挤出可见范围,这样就可以变相的认为按钮被隐藏了,代码如下:
<video controls controlsList="nodownload"></video>
通过 ControList API,不仅可以通过设置 nodownload 来隐藏下载按钮,还可以设置 nofullscreen 隐藏全屏按钮, 以及noremoteplayback 等属性,具体的示例可以参考 github pages。该方案的优点是原生支持,不会产生bug,而且设置起来也是简单方便,不过由于 ControlList API 是从 Chrome 58+ 才开始引入的,所以对于低于 58 版本的 Chrome 只能通过方法2来隐藏了。
2. 通过 CSS 隐藏
通过 Settings|Preferences -> Elements -> Show user agent shadow DOM 打开 shadow DOM 开关后,可以通过 devtools 查看 video 元素的组成部分。
由此发现下载按钮的是通过 <input type="button" pseudo="-internal-media-controls-download-button" style=""> 呈现的,所以可以通过下述CSS将其隐藏:
video::-internal-media-controls-download-button { display: none; }
但是很可惜,该方法并不起作用,猜想可能是Chrome的一个BUG,所以只能另辟蹊径,简单来说就是将下载按钮挤出可见范围,这样就可以变相的认为按钮被隐藏了,代码如下:
video::-webkit-media-controls { overflow: hidden !important; } video::-webkit-media-controls-enclosure { width: calc(100% + 32px); margin-left: auto; }
相关文章推荐
- HTML页面原生VIDEO标签隐藏下载按钮功能
- video标签监听播放暂停,隐藏下载按钮
- 隐藏 video标签的下载按钮
- JS 原生video元素去掉下载按钮
- JS 原生video元素去掉下载按钮
- Ext.Button的禁用 extjs 获取一个panel 如何禁用bbar中的按钮 或者将它隐藏掉??
- dskinlite(uieasy mfc界面库)使用记录3:绘制动态元素(按钮控件通过隐藏方式修改图片显示)
- 去掉video controls的下载按钮方法
- 如何依照自己的意愿隐藏和显示页面上的元素
- 如何控制元素显示、隐藏?
- js点击按钮和指定下拉元素以外的区域隐藏下拉内容
- dskinlite(uieasy mfc界面库)使用记录3:绘制动态元素(按钮控件通过隐藏方式修改图片显示)
- Labview学习笔记——如何用按钮来控制某控件(例如文本控件)的显示与隐藏
- 如何隐藏起Form右上角的OK/X按钮
- 如何获取隐藏元素的宽度
- 干货:如何使用jQuery检查元素是否隐藏(总结)
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- 如何过滤掉隐藏的元素
- 点击按钮直接下载文件(隐藏文件路径)
- JavaScript中如何给按钮设置隐藏与显示属性