手机百度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怎么网上都搜不到，只要有百度两个字，搜索结果就跑偏了，真心难受，再不想做移动端兼容处理了......