video标签去除下载按钮

23 篇文章 0 订阅
23 篇文章 1 订阅

HTML中直接使用video来播放视频,在Chrome浏览器、360浏览器、QQ浏览器(以及其他一些使用Chrome内核Blink)等中都会出现下载按钮,但我们一般又不希望出现下载按钮。

好像是从Chrome 54版本开发有下载按钮的(从网上看到的,我也不确定),网上有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); 
}

我试了之后在chrome内核: 56.0.2924.90 之下确实可以将下载按钮去除,不过看上面的css大致意思就是将控制器的宽度加宽30px,然后通过overflow:hidden;去除显示,不过感觉好像不是多靠谱,然后接着网上看资料,就看到了HTMLMediaElement.controlsList

HTMLMediaElement.controlsList

HTMLMediaElement接口的controlsList 属性返回DOMTokenList,帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList可以设置以下三个可能值中的一个或多个:nodownloadnofullscreennoremoteplayback

也就是说可以通过设置controlsList属性来控制是否显示下载按钮,如下:

<video controls controlslist="nodownload" id="video" src=""></video>

设置controlslist="nodownload"之后,在我当前使用的Chrome浏览器(69)就不会出现下载按钮。

关于controlsList可以查看https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList

这里是一个关于controlsList使用的示例

但是我又想兼容例如56版本的Chrome浏览器怎么办呢,我试着加上上述的css解决方案并设置controlslist="nodownload",在56版本的Chrome浏览器和69版本的谷歌浏览器两个都可以正常显示。

但是我用360浏览器(内核版本63)以及QQ浏览器(内核版本63)如果同时设置以上的两种解决方案是有问题的,会将全屏按钮一并隐藏,所以可能在56版本的Chrome浏览器不支持controlslist="nodownload"就将其忽略,而在69版本的谷歌浏览器上面的css解决方案已经无效了。

所以现在如果要统一解决的话,在低版本54.0-57.0之间使用上面的css解决方案,而在58版本之后使用controlslist="nodownload"解决。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值