0

电脑上显示正常
微信截图_20191204221847.png

打包后在手机上访问就这样了 中间的被遮住了 这是怎么回事?
微信图片_20191204222523.png

<video style="z-index: -1" controls="controls" :src="url" autoplay="autoplay" ref="videos" loop="true" muted="true"></video>
    <div class="info" style="font-size: 12px">
      <div class="icon" @click=more><img :src="list.artist.image||'static/img/moren.png'"><span></span></div>
      <div class="zan" @click=more><img src="static/img/zan.png"><span>{{list.likes}}</span></div>
      <div class="comment" @click=more><img src="static/img/comment.png"><span>{{list.appraises.length}}</span>
      </div>
      <div class="share" @click=more><img src="static/img/share.png"><span>{{list.forwards}}</span></div>
</div>
.info{
  position: absolute;
  right: 20px;
  z-index: 999999999;
  top: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
12月4日提问
1 个回答
0

你把背景设置为白色,就会发现原生播放器把 dom 元素挡住了
这个时候你需要把视频播放器设置为 inline 的

 <video playsinline="true" -webkit-playsinline="true">

可惜还有很多浏览器不支持,原生播放器的 z 轴比 dom 大,会遮住元素

撰写答案

推广链接