video标签去除下载按钮

妖狐艹你老母 2022-05-15 14:22 886阅读 0赞

`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`可以设置以下三个可能值中的一个或多个：`nodownload`，`nofullscreen`和`noremoteplayback`。

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

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

关于`controlsList`可以查看[https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList][https_developer.mozilla.org_zh-CN_docs_Web_API_HTMLMediaElement_controlsList] 。

这里是一个关于`controlsList`使用的[示例][Link 1] 。

但是我又想兼容例如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"`解决。

[https_developer.mozilla.org_zh-CN_docs_Web_API_HTMLMediaElement_controlsList]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList
[Link 1]: https://googlechrome.github.io/samples/media/controlslist.html