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