关于移动端开发,vedio标签层级高遮挡蒙版的解决方案

问题描述:

     使用famework7框架搭建了一个界面,然后再界面中需要使用蒙版效果,在PC端,ios测试没有问题,在Andriod播放视屏再点击显示蒙版的效果师,视频会遮盖蒙版。修改定位,z-index都没有用。

安卓手机内置x5内核,x5内核不遵循许多web标准,vedio层级最高,播放时不支持所有DOM层面的操作,所以并没有好的解决方案,最后采用的解决方案就是在点击视频播放按钮之后使视频全屏覆盖。

  以下是我在原有代码基础上添加的内容,可供遇到同样问题的你使用:

 

给vedio标签添加属性,播放时全屏覆盖

<video src="https://hy.v.netease.com/2018/1030/5c9caed3eea6c6e079673d031fca3350qt.mp4" controls="controls" x5-playsinline="" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="" x5-video-orientation="portraint"></video>

猜你喜欢

转载自www.cnblogs.com/zhang-jiao/p/10487603.html
今日推荐