如何隐藏 video 元素的下载按钮

1. 使用 video 元素的 ControlList API

<video controls controlsList="nodownload"></video>

通过 ControList API，不仅可以通过设置 nodownload 来隐藏下载按钮，还可以设置 nofullscreen 隐藏全屏按钮, 以及noremoteplayback 等属性，具体的示例可以参考 github pages。该方案的优点是原生支持，不会产生bug，而且设置起来也是简单方便，不过由于 ControlList API 是从 Chrome 58 才开始引入的，所以对于低于 58 版本的 Chrome 只能通过方法2来隐藏了。

2. 通过 CSS 隐藏

通过 Settings|Preferences -> Elements -> Show user agent shadow DOM 打开 shadow DOM 开关后，可以通过 devtools 查看 video 元素的组成部分。

由此发现下载按钮的是通过 <input type="button" pseudo="-internal-media-controls-download-button" style=""> 呈现的，所以可以通过下述CSS将其隐藏：

video::-internal-media-controls-download-button {display: none;
}

但是很可惜，该方法并不起作用，猜想可能是Chrome的一个BUG，所以只能另辟蹊径，简单来说就是将下载按钮挤出可见范围，这样就可以变相的认为按钮被隐藏了，代码如下：

video::-webkit-media-controls {overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {width: calc(100%   32px);
margin-left: auto;
}

如何隐藏 video 元素的下载按钮相关推荐

隐藏 video标签的下载按钮
在 cordova-plugin-inappbrowser插件中隐藏 Android 的 webView里的 <video>标签: let webView = window.cordova ...
[html]HTML5如何隐藏video元素的控制栏、全屏按钮？
[html]HTML5如何隐藏video元素的控制栏.全屏按钮? 将<video width="800px" height="400px" id=&quo ...
video标签去除下载按钮
HTML中直接使用video来播放视频,在Chrome浏览器.360浏览器.QQ浏览器(以及其他一些使用Chrome内核Blink)等中都会出现下载按钮,但我们一般又不希望出现下载按钮. 好像是从Ch ...
video标签监听播放暂停，隐藏下载按钮
/* 隐藏视频默认的下载按钮*/ video::-webkit-media-controls-enclosure {overflow:hidden;} video::-webkit-media-con ...
h5隐藏video控制按钮controls（腾讯云点播禁用video音量全屏等按钮）
前言昨天app的同事(ios跟安卓)发现webview的video全屏按钮有问题,他们想禁用掉全屏.音量控制的按钮,前端同事在根据api设置disable_full_screen=1(pc端fals ...
如何隐藏video的下载按钮
如何隐藏video的下载按钮 1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload" ...
【HTML】video标签处理隐藏下载按钮等
[HTML]video标签处理隐藏下载按钮等隐藏下载按钮增加 controlsList="nodownload" 属性 <video controlsList=&quo ...
隐藏video下载按钮
现在网页中涉及到视频时我们一般会选择用h5新增的video标签,神烦的是系统会自动给video标签加上一些我们不需要的按钮,比如下载按钮.在很多情况下,点击下载按钮网页会直接崩溃掉,所以提供下隐藏下载 ...
Cannot read property 'nodeType' of null; audio元素默认样式下载按钮
1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...

如何隐藏 video 元素的下载按钮

如何隐藏 video 元素的下载按钮相关推荐

最新文章

热门文章