前些天,朋友遇到一個小程序的問題叫我幫忙看看,說是ios上video組件會有嚴重的黑屏現象,這就有意思了。
知道問題后,我就開始試一試,發現如果頁面只有一個video組件的話,是沒有什么問題的。但是但頁面有多個video的時候,問題就有點嚴重了:
1、設置了播放方式為非自動播放,但是進到頁面的是還是時不時有一兩個會自動播放
2、卡,頁面很卡
3、進入全屏的時候,視頻方向是根據寬高自己適配,但是退出全屏的時候,會出現這種情況:剛剛視頻是橫屏播放,退出了頁面也是橫屏
4、退出全屏后,頁面上除了剛剛那個播放的video還是正常的,其他全黑了
鼓搗了兩個晚上,終於解決了
>頁面卡頓的問題在video組件上通過添加 custom-cache="{{false}}" 解決
重點描述后面兩個的解決過程:
1、第一次:設置video全屏播放的方向,失敗;
2、嘗試把組件的全屏按鈕隱藏,然后自己寫個按鈕去調用video全屏的api,失敗;
3、既然這兩個都不行,那我看看別人是怎么做的,百度了一番,沒有找到好的答案。靈機一動想起來微博還有個小程序,嘿嘿嘿,去偷師。
發現微博是這樣的,他的視頻列表並沒有直接播放的功能,而是跳去一個頁面上播放。好像很有道理樣子,Have a try!
把頁面上的video統統禁用播放,去掉控制條,然后在上面建個播放按鈕的層,點擊播放按鈕的時候在當前的頁面上彈出一個層來放video播放,記得這個層要給一個關閉按鈕。
實踐證明這個是可行,沒有黑屏的情況了,成功,一頓飯到手
。