1. 程式人生 > >自定義微信小程式視訊元件播放按鈕

自定義微信小程式視訊元件播放按鈕

小程式的視訊元件沒有隱藏播放按鈕的屬性,但是看了愛奇藝的小程式,發現他們可以自定義播放按鈕,這就比較奇怪了,官方不提供,還能實現,一定有辦法,於是想了很久,突然想到,可以在video元件裡面巢狀兩個cover-image,一個用來存放播放按鈕,另外一個用來存放視訊封面圖,寫好之後,又發現了新問題,網路比較慢的時候,封面圖載入不及時,還是可以看得到原生的播放按鈕。於是仔細研究了愛奇藝的小程式,原來在載入封面圖之前,用白色的底色先遮住原生的視訊元件了,恍然大悟,在包住封面圖的cover-view裡設定了背景色跟頁面的一樣,解決問題。

總體實現的思路如下:在video中寫一個cover-view,cover-view的寬高跟video的寬度一致,然後設定cover-view的背景色不透明,然後在cover-view寫一個cover-image,用來存放封面圖,寬高跟video一致,最後新增cover-iamge,存放播放按鈕,設定絕對定位,水平垂直居中,在播放按鈕上新增點選事件,點選之後隱藏cover-view,不然點選video的時候,原生的播放控制元件會看不到,最後在監聽視訊結束事件,重新填充封面跟播放按鈕就可以了。