手機端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;
 }