手机端video层级及和全屏问题，解决方案

·video层级问题

　　问题现象：点击登录弹窗可以正常显示，在点击播放视频后，video层级变成了最高级，再次点击登录弹窗被video遮挡了，无论怎么给登录弹窗z-index都无法正常显示弹窗。

　　解决方案：Android微信内置浏览器是X5内核，X5内核中默认了video的层级是最高级别，所以改变z-index没有办法改变层级显示问题。在使用video标签时可以加上 x5-video-player-type='h5-page'的属性，这时就把H5中的video就启用了同层H5播放器，这样就可以调整video、弹窗等层级的显示。（H5同层播放器接入规范：https://x5.tencent.com/tbs/guide/video.html）

 

<video
  id="player"
  controls={true}
  width="100%"
  height="100%"
  x5-video-player-type="h5-page" // 启用同层H5播放器
  x5-video-orientation="landscape|portrait" // 视频跟着手机自动旋转
>
  <source src={videoUrl} type="video/mp4" />
</video>

 

video {
    object-fit: fill;
    object-position: center;
 }