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