如何隱藏 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;
}