谷歌瀏覽器：audio如何隱藏下載按鈕

MartinHan 發布于2019-08-21 11:43 / 1816人閱讀

當我們使用原生的audio標簽時，可以看到如下的效果。

那么如何讓下載按鈕隱藏掉呢？

1. controlsList="nodownload"

// 這個方法只支持 Chrome 58+， 低于該版本的是沒有無法隱藏的

controlsList屬性只兼容Chrome 58+以上，具體可以參考controlslist.html ，controlsList在線例子

nodownload: 不要下載

nofullscreen: 不要全屏

noremoteplayback: 不要遠程回放

2. css方式來隱藏

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

3. 即使讓下載按鈕隱藏了，如何禁止右鍵下載？

// 給audio標簽禁止右鍵，來禁止下載

4. 第三方插件: audiojs

項目地址: https://github.com/kolber/aud...
優點：簡單，無依賴
缺點：異步插入的audio標簽，每次還是需要重新調用audiojs.createAll()方法來重新實例化

// 1.


// 2.

效果圖：

5 audio相關問題以及解決方案

關于動態生成的mp3在audio標簽無法拖動的問題: (audio斷點續傳)

6 參考文獻

https://stackoverflow.com/que...

https://googlechrome.github.i...

GPU云服務器云服務器瀏覽器如何隱藏webrtc 谷歌瀏覽器如何開啟webrtc 谷歌瀏覽器如何關閉webrtc 谷歌瀏覽器如何禁用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87041.html

Audio: 如果你愿意一層一層剝開我的心

摘要：基本用法屬性目前只支持你可以看出他們在里表現的差異關于標簽支持的音頻類型，可以參考常用屬性音頻流文件就緒后是否自動播放無需預加載只需要加載元數據，例如音頻時長，文件大小等。我覺得DOM就好像是元素周期表里的元素，JS就好像是實驗器材，通過各種化學反應，產生各種魔術。 showImg(https://segmentfault.com/img/bVO9vK?w=1440&h=814); ...

wangjuntytl 2019-08-20 17:14 評論0 收藏0
用Vue搭建一個應用盒子（三）：音樂播放器

摘要：組件結構接著我們就該搭建這個播放器的組件了。總的原理是首先獲取音頻的持續時間，然后通過一個定時器，不斷更新顯示時間，播放完成時，計時器停止。這個頁面比較簡單，播放器標簽，綁定了事件，即播放完成后執行。這個播放器的開發歷時2個多月，并不是說它有多復雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因為拖延，二也是實習公司項目太緊。8月底結束實習前寫完了樣式，之后在家空閑...

appetizerio 2019-08-26 11:33 評論0 收藏0
瀏覽器兼容問題

摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。條件注釋最初于微軟的瀏覽器中出現，并且直至均支持。一、什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統，都...

wenshi11019 2019-08-26 13:57 評論0 收藏0