隐藏video标签的下载按钮
问题:
使用video标签时,有些浏览器会显示视频的下载按钮,而这并不是我们需要的功能,必须想办法去掉。 解决方法:
使用下面的css可以达到隐藏下载按钮的效果,但是点击下载的位置,还是能出现开始下载的事件,所以暂未能彻底解决。 video::-internal-media-controls-download-button {
display:none;
} video::-webkit-media-controls-enclosure {
overflow:hidden;
} video::-webkit-media-controls-panel {
width: calc(100% + 30px);
} 本文参考链接 https://www.cnblogs.com/tu-0718/p/6962928.html
https://majing.io/questions/823
隐藏video标签的下载按钮的更多相关文章
- 如何隐藏 video 元素的下载按钮
1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video ...
- 干掉H5audio音频标签的下载按钮
audio::-internal-media-controls-download-button {display:none;}audio::-webkit-media-controls {overfl ...
- 去掉谷歌浏览器 video标签下的下载按钮
一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字 ...
- html页面原生video标签隐藏下载按钮
在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题. 虽然简介视频是非付费的,但也不希望会有下载按钮或者 ...
- 【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 <style type="text/css"> video::-internal-me ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- Chrome浏览器video样式控制-隐藏下载按钮
Chrome浏览器在升级之后 video的样式和之前是不一样的,如果使用原生video的话可能会有影响,实际项目中最好使用第三方插件以保证video在所有浏览器都有统一的样式 一.如何隐藏video的 ...
- h5的video下载按钮如何隐藏
h5的video下载按钮在部分手机系统上是不可用的,想要把这个按钮屏蔽掉,可苦于没有像屏蔽全屏按钮那样的伪类video::-webkit-media-controls-fullscreen-butto ...
- 谷歌浏览器:audio如何隐藏下载按钮
当我们使用原生的audio标签时,可以看到如下的效果. 那么如何让下载按钮隐藏掉呢? 1. controlsList="nodownload" // 这个方法只支持 Chrome ...
随机推荐
- 四. python网络编程
第八章.网络基础知识 1. TCP/IP协议介绍 1.TCP/IP概念 TCP/IP: Transmission Control Protocol/Internet Protocol的简写,中译名为传 ...
- iMessage, Facetime 解决办法
不需要白苹果三码,亲测可用:原帖地址: https://www.reddit.com/r/hackintosh/comments/2wohwn/getting_imessage_working_on_ ...
- webpack4.x加vue模板文件简单还原vue-cli
1.首先 npm init -y 创建一个项目 2.安装vue npm install vue --save 3.然后安装webpack 注意如果全局没有还要安装全局的webpack和webpack- ...
- webpack-dev-server proxy代理
一个最简单的代理例子:index.html中有如下代码 fetch('/api/pub/article/list?pageSize=2').then((data)=>{ return data. ...
- js常见面试题
1.大小写转化,将字符串转化成驼峰的方法 例:border-bottom-color转化为:borderBottomColor var str="border-bottom-color&qu ...
- Python运算符总结
一.简介 Python中运算符分为: 算术运算符:主要用于两个对象算数计算(加减乘除等运算) 比较(关系)运算符:用于两个对象比较(判断是否相等.大于等运算) 赋值运算符:用于对象的赋值,将运算符右边 ...
- Day12装饰器
1.装饰器 什么是装饰器:装饰器指的是为被装饰对象添加新功能的工具 装饰器本身可以是任意调用对象 被装饰对象本身也可以是任意可调用对象 2.为何要用装饰器: 开放封闭原则: ①对修改源代码和调用方式是 ...
- web开发框架之DRF
RESTful架构解释: # Representational State Transfer 表现层状态转化 到底什么是RESTFul架构: 如果一个架构符合REST原则,就称它为RESTful架构. ...
- (转)ios截取屏幕代码
本文转自http://blog.sina.com.cn/s/blog_801997310101a769.html 截取本区域(self.view): UIGraphicsBeginImageConte ...
- (原)pat1007素数猜想
---恢复内容开始--- 1007. 素数对猜想 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 让我们 ...