项目场景:
H5的video 在安卓浏览器上层级问题
问题描述
H5的video 在安卓浏览器上层级问题
原因分析:
目前猜测是浏览器劫持video并且生成原生视频播放器 无法用z-index控制
解决方案:
目前除了QQ 浏览器 跟小米浏览器无法完美兼容 其他都能兼容
// raw-controls 兼容钉钉跟UC
//controls360 兼容360浏览器
//x5-video-player-type兼容微信内置
//搜狗浏览器也能兼容到
QQ 浏览器 跟小米浏览器 可以学优酷视频那样 打开弹出框时候video 隐藏 再加上一个占位图
<video
x-webkit-airplay
webkit-playsinline
x5-video-player-type='h5-page'
x5-video-orientation="portraint"
playsinline
preload
controls
raw-controls
controls360=no
x5-video-player-fullscreen=''
ref="video"
:poster="item.img"
:src="item.src"
:playOrPause="playOrPause"
></video>