Video兼容性问题

最近在做校招网站的时候有用到video标签，ios里面默认全屏播放，这边产品不想全屏，解决办法：

<video src="media/demo.mp4" id="video" poster="images/demo.jpg" preload width="100%" controls webkit-playsinline></video>

在ios15以上的版本中还有一个bug就是设置了video标签的poster时，视频播放有声音，画面不动。去掉poster就可以正常播放，我这边给的思路：
判断在安卓系统中正常走poster，在ios中给不使用poster属性增加dom元素，用定位直接铺在视频上。层级z-index给个-1就可以了，不需要做其他操作。注（如果安卓跟ios都用这个方法因为层级问题安卓会有层级bug所以分开判断）

<div class="m-video">
  <video
    controls
    controlsList="nodownload"
    x5-playsinline
    playsinline="playsinline"
    x5-video-player-type="h5"
    x5-video-player-fullscreen="true"
    webkit-playsinline="webkit-playsinline"
    x-webkit-airplay
    x5-video-orientation="portraint"
  >
    <source
      src="demo.mp4"
      type="video/mp4"
    />
  </video>
  <span class="m-img">
    <img src="demo.png" />
  </span>
</div>