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
评分: (2 票;平均数5.00 ;最高评分 5 ;用户总数2;总得分 10;百分比100.00)
头像
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
免费SSL证书服务 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
花牛苹果 甘肃天水 李宏恩家自种 1斤 包邮
  • ¥ 6.8元
  • 市场价:8.8元

发表评论

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