H5的video 在安卓浏览器上层级问题

项目场景:

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>

你可能感兴趣的:(vue.js,javascript)