問題描述

我正在 Chrome 55 中使用<video> 標籤獲取此下載按鈕，但不在 Chrome 54 上：

如何刪除這個，所以沒有人可以看到 Chrome 55 中的下載按鈕？

我已經使用<video> 標籤將此影片嵌入到我的網頁上。所以，我想要一些程式碼來刪除這個下載選項。

這是我現在的程式碼：

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

最佳解決方案

這是解決方案 (來自 this post)

video::-internal-media-controls-download-button {
    display:none;
}

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

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

次佳解決方案

自從上次回覆釋出以來，Google 已新增了一項新功能。您現在可以新增 controlList 屬性，如下所示：

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

你可以在這裡找到 controlist 屬性的所有選項：

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

第三種解決方案

當使用 HTML5 音訊時，這可以隱藏 Chrome 上的下載按鈕。



 #aPlayer > audio { width: 100% }
        /* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
       /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px;
        }

    #aPlayer > audio { width: 420px; }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {

      #aPlayer {
           overflow: hidden;width: 390px;
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>

Click here to see the screenshot

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。