手機百度app視頻層級兼容性處理

原由

最近接手同事的項目，須要修復在手機百度app裏面的視頻層級最高的問題，噁心了兩三天，特地記錄一下，但願後人能直接跳過這個大坑

準備

首先視頻若是想內嵌播放，在通常的瀏覽器裏面能夠這麼寫

<video 
  controls
  width="100%"
  preload="auto"
  x5-video-player-type="h5"
  webkit-playsinline="true"
  playsinline="true"
  x5-playsinline="true">
  <source src="www.otherserver.mp4" type="video/mp4">
</video>

若是須要額外的功能，能夠選用video.js這個庫

遇到的問題

在手機百度app裏面，會存在視頻層級最高，遮擋導航欄的狀況
x5-video-player-type="h5"這個屬性解決不了

解決思路

安卓

安卓手百中，視頻只要播放，會被手百接管，此時層級最高
因此若是視頻上面還有層級，好比彈出層，千萬不要自動播放視頻。
萬幸的是安卓手百，video能操做位置，因此給出了一種處理思路，特定的時候能夠調整位置，或者隱藏，僞裝不遮擋
好比當點擊導航欄圖標，導航跳出來的時候，視頻跟着下移，這樣視頻就不會遮住導航欄

ios

ios手百，video只要一播放，視頻就被被手百接管，此時不管對視頻進行移動，隱藏，刪除都無效。
無心間發現，貌似是<source src="www.otherserver.mp4" type="video/mp4">以及video.js引發的
須要將跨域域名改爲不跨域的，而後不要用video.js，改用原生寫

//去掉video.js
<source src="./1.mp4" type="video/mp4">

結語

以上就是我遇到的移動端百度app裏視頻兼容性問題的處理方案，但願給你們帶來幫助。
題外話，這個Bug怎麼網上都搜不到，只要有百度兩個字，搜索結果就跑偏了，真心難受，再不想作移動端兼容處理了......