audio隱藏下載按鈕

// 這個方法只支持 Chrome 58+, 低於該版本的是沒有沒法隱藏的
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">
    Your browser does not support the audio element.
</audio>

controlsList屬性只兼容Chrome 58+以上,具體能夠參考controlslist.html ,controlsList在線例子css

nodownload: 不要下載
nofullscreen: 不要全屏
noremoteplayback: 不要遠程回放html

第二種方法:css方式來隱藏web

// 這個方式兼容全部版本的谷歌瀏覽器
audio::-webkit-media-controls {
    overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

禁止右鍵瀏覽器

// 給audio標籤禁止右鍵,來禁止下載
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">
    Your browser does not support the audio element.
</audio>
相關文章
相關標籤/搜索