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

也就是說可以通過設定controlsList屬性來控制是否顯示下載按鈕，如下：

<video controls controlslist="nodownload" id="video" src=""></video>

設定controlslist="nodownload"之後，在我當前使用的Chrome瀏覽器（69）就不會出現下載按鈕。

這裡是一個關於controlsList使用的示例 。

但是我又想相容例如56版本的Chrome瀏覽器怎麼辦呢，我試著加上上述的css解決方案並設定controlslist="nodownload"

但是我用360瀏覽器（核心版本63）以及QQ瀏覽器（核心版本63）如果同時設定以上的兩種解決方案是有問題的，會將全屏按鈕一併隱藏，所以可能在56版本的Chrome瀏覽器不支援controlslist="nodownload"就將其忽略，而在69版本的谷歌瀏覽器上面的css解決方案已經無效了。

所以現在如果要統一解決的話，在低版本54.0-57.0之間使用上面的css解決方案，而在58版本之後使用controlslist="nodownload"解決。