Cannot read property 'nodeType' of null; audio元素預設樣式下載按鈕
1.chrome-->console丟擲如下錯誤:
Uncaught TypeError: Cannot read property 'nodeType' of null
錯誤分析:我這個例項為:點選某個表單標籤時(如checkbox),widget重新進行了render()操作(將dom元素remove並重新繪製),而formit外掛給form表單預設增加的監聽事件還作用在已經被移除dom的元素上,所以執行formit事件的時候,target元素為null,報錯丟擲。出錯的程式碼是jquery裡追蹤事件的捕獲與冒泡的一段程式碼。引數為null時則報此錯誤。
解決的方法是:查走程式碼,去掉不合理的重繪,或將重繪過程放到listener都執行完成後進行。
2.chrome的audio元素預設樣式修改
chrome的audio元素預設樣式不是很美觀,大多數時候下載按鈕顯得很多餘。如果需要修改播放樣式有如下兩個解決方案:
1)隱藏預設的audio,自己重繪一個audio播放器,並用js與預設播放器關聯控制。這樣播放器樣式完全自定義,可以滿足任何對於美觀的要求。
2)對預設audio的樣式進行一些修改,讓它達到需求。這樣播放器的外觀還是很侷限,如果對樣式要求不高可以這麼做。
我們這裡主要討論第二種,首先設定屬性:controls="controls",顯示audio播放控制元件,顯示出來以後,
1)如何隱藏下載按鈕
在stackoverflow上查後,可以設定audio的屬性
controlsList="nodownload"
2)如何隱藏音量按鈕or播放進度條。
經過除錯發現,可以通過設定audio標籤的width,瀏覽器會自動進行audio的自適應。
在設定width為300的時候,顯示效果:
在設定width為200的時候,顯示效果:
在設定width為100的時候,顯示效果:
在此基礎上我們可以進行一定的掩蓋與縮放實現我們想要的效果。舉個例子:我們要播放進度條而不顯示音量按鈕,那麼我們就可以採用audio的width為300,並將audio標籤放到一個ovflow:hidden;width:210px;的外層div中。