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 元素的下载按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。