關於HTML5的audio標簽和video標簽刪除下載圖標

video標簽和audio標簽在谷歌瀏覽器上自帶下載按鈕，當我們不想要下載按鈕的時候，可以試一下以下操作

第一種方案：

在video或者audio標簽上添加controlsList="nodownload"即可關閉下載按鈕

<!-- video-->
<video src="videoUrl" controlsList="nodownload" controls="controls"></video>
<!--audio -->
<audio src="audioUrl" controlsList="nodownload" controls="controls"></audio>

 

關於controlsList的更多參數請參閱：controlsList示例

第二種方案

 通過css將按鈕超出進行隱藏

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
audio::-internal-media-controls-download-button {
    display:none;
}

audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}