資訊專欄INFORMATION COLUMN
當(dāng)我們使用原生的audio標(biāo)簽時(shí)，可以看到如下的效果。
那么如何讓下載按鈕隱藏掉呢？
1. controlsList="nodownload"// 這個(gè)方法只支持 Chrome 58+， 低于該版本的是沒有無法隱藏的
controlsList屬性只兼容Chrome 58+以上，具體可以參考controlslist.html ，controlsList在線例子
nodownload: 不要下載
nofullscreen: 不要全屏
noremoteplayback: 不要遠(yuǎn)程回放
2. css方式來隱藏// 這個(gè)方式兼容所有版本的谷歌瀏覽器
audio::-webkit-media-controls {
overflow: hidden !important
}
audio::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
3. 即使讓下載按鈕隱藏了，如何禁止右鍵下載？
// 給audio標(biāo)簽禁止右鍵，來禁止下載4. 第三方插件: audiojs
項(xiàng)目地址: https://github.com/kolber/aud...
優(yōu)點(diǎn)： 簡(jiǎn)單，無依賴
缺點(diǎn)：異步插入的audio標(biāo)簽，每次還是需要重新調(diào)用audiojs.createAll()方法來重新實(shí)例化
// 1. // 2.
效果圖：
關(guān)于動(dòng)態(tài)生成的mp3在audio標(biāo)簽無法拖動(dòng)的問題: (audio斷點(diǎn)續(xù)傳)
6 參考文獻(xiàn)https://stackoverflow.com/que...
https://stackoverflow.com/que...
https://googlechrome.github.i...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87041.html
摘要：基本用法屬性目前只支持你可以看出他們?cè)诶锉憩F(xiàn)的差異關(guān)于標(biāo)簽支持的音頻類型，可以參考常用屬性音頻流文件就緒后是否自動(dòng)播放無需預(yù)加載只需要加載元數(shù)據(jù)，例如音頻時(shí)長(zhǎng)，文件大小等。 我覺得DOM就好像是元素周期表里的元素，JS就好像是實(shí)驗(yàn)器材，通過各種化學(xué)反應(yīng)，產(chǎn)生各種魔術(shù)。 showImg(https://segmentfault.com/img/bVO9vK?w=1440&h=814); ...
摘要：組件結(jié)構(gòu)接著我們就該搭建這個(gè)播放器的組件了?？偟脑硎鞘紫全@取音頻的持續(xù)時(shí)間，然后通過一個(gè)定時(shí)器，不斷更新顯示時(shí)間，播放完成時(shí)，計(jì)時(shí)器停止。這個(gè)頁面比較簡(jiǎn)單，播放器標(biāo)簽，綁定了事件，即播放完成后執(zhí)行。 這個(gè)播放器的開發(fā)歷時(shí)2個(gè)多月，并不是說它有多復(fù)雜，相反它的功能還非常不完善，僅具雛形。之所以磨磨蹭蹭這么久，一是因?yàn)橥涎?，二也是?shí)習(xí)公司項(xiàng)目太緊。8月底結(jié)束實(shí)習(xí)前寫完了樣式，之后在家空閑...
摘要：一什么是瀏覽器兼容問題所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。條件注釋最初于微軟的瀏覽器中出現(xiàn)，并且直至均支持。 一、什么是瀏覽器兼容問題 所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。在大多數(shù)情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的網(wǎng)站或者登陸我們的系統(tǒng)，都...
閱讀 775·2019-08-29 16:32
閱讀 843·2019-08-29 12:31
閱讀 3226·2019-08-26 18:26
閱讀 3168·2019-08-26 12:20
閱讀 1742·2019-08-26 12:00
閱讀 3013·2019-08-26 10:58
閱讀 2820·2019-08-23 17:08
閱讀 2315·2019-08-23 16:32
