video标签去掉自带的下载按钮 方法

Html5自带的 video标签 ,会有个下载按钮,有时候想避免,想禁用下载按钮,我们应该怎么办呢?下面给大家介绍两种方法:

 

1、CSS样式

我们完全可以利用css样式的方法,具体样式代码如下:

<style type="text/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);
            }
 </style>

 

原标签效果:

video标签下载按钮

 

修改后效果:video标签去掉自带的下载按钮

 

2、video标签controlsList属性

如果是PC电脑上,完全可以用video标签controlsList属性,修改成如下即可!

<video controls controlsList="nodownload"></video>
    A+
发布日期:2019年06月05日 14:05:31  所属分类:HTML
最后更新时间:2019-06-05 14:05:51
评分: (5 票;平均数3.40 ;最高评分 5 ;用户总数5;总得分 17;百分比68.00)
头像
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 1999.9元
  • 市场价:20000元
Microsoft 全家桶 “激活码/产品密钥”永久
Microsoft 全家桶 “激活码/产品密钥”永久
  • ¥ 29.99元
  • 市场价:888元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 99.9元
  • 市场价:299元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: