1. 程式人生 > >Cannot read property 'nodeType' of null; audio元素預設樣式下載按鈕

Cannot read property 'nodeType' of null; audio元素預設樣式下載按鈕

1.chrome-->console丟擲如下錯誤:

Uncaught TypeError: Cannot read property 'nodeType' of null

錯誤原因:從stackoverflow上查了,這個bug可能是由於dom元素未載入完而先執行了jquery程式碼引起的。

錯誤分析:我這個例項為:點選某個表單標籤時(如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中。