最近在做web端使用pano顯示場景,pano是通過pano2vr來實現(xiàn)的,但是video作為熱點插入頁面總是會在部分瀏覽器中顯示出黑屏,視頻跳出,就猜測是video元素在移動端自動全屏導致,然后查閱了很多東西,把不同地方的東西聚集在一起,勉強實現(xiàn)了功能上的顯示(小米自帶瀏覽器真的是不提也罷);

首先要清除video的自動全屏:對于uc,微信,以及華為的部分機型有效,對于iOS瀏覽器,特別是微信端支持的程度簡直超乎想象,可怕的很;

需要設置一些屬性,大致為:

<video playsinlin webkit-playsinline?poster=""?preload="auto"?x5-playsinline=true? x5-video-player-type="h5" x5-video-player-fullscreen=true>

這里屬性里:

playsinlin?webkit-playsinline 是用來實現(xiàn)video的內聯(lián)顯示

x5-playsinline ,?x5-video-player-type,x5-video-player-fullscreen:則是為了微信瀏覽器x5內核內聯(lián)顯示所需要的屬性,這里的微信瀏覽器是用一個同層播放器的視頻播放器來實現(xiàn)內聯(lián)播放,但是需要tbs內核大于036849;進入和退出全屏播放都可以做相應的回調:x5videoexitfullscreen?x5videoenterfullscreen

同時要處理video的雙下巴大黑邊,還可以使用:object-fit:fill,來進行消除;

另:江湖傳說可以使用video.play(),控制視頻的自動播放,我并沒有實現(xiàn),也可能是我用的有問題吧,有待繼續(xù)解決;