移动端video点开后层级过高问题

网络上有很多关于该问题的解答，而且大家遇到的状况也是层出不穷。
我初步分析是由于不同厂商和游览器内核版本等不同导致的标签解析和渲染问题。我仅仅以我的两个手机进行解答。
首先我得机型分别是nubia z11 android 6.0.1
和 huawei nova 3 android 9.0
测试时间 2019.8.13

两款手机的表现是，huawei 和 nubia未点击video时，video都是正常层级，如display:fixed的元素都会在video上面。
但是当点击video后，huawei呈现的是非全屏播放状态，而nubia是全屏播放状态。然后我们关闭视频，发现video会在之前的固定定位的元素之上。也就是大家所描述的video层级达到了最高。

出现这个问题后，我只加了如下标签，效果便正常了，而且在iphone x上也查看了一下效果。正常无误。所以贴一下代码分享给大家:

<videosrc="https://xxxxxxx自己写.mp4"preload="true"poster="/static/srRubikCube_slices/preloadWithPadding.jpg"webkit-playsinline="true"x5-video-player-type="h5"x5-video-orientation="portraint"className={styles.video}controls/>

移动端video点开后层级过高问题相关推荐

前端刚实习的一些建议(包含一些问题的解决：移动端滑动监听不灵敏，video层级过高)
自己刚实习(前端岗位),也算完整的做了一个项目,我感觉在项目中更多的是熟悉公司的业务逻辑,每个公司都有自己的一套构建方案,也有自己的环境,比如测试环境,预发布环境等等. 写这个主要是想分享一下,我在公 ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
css3 移动端video视频全屏，横屏展示，适配微信/打包成app
参考链接: 全屏旋转 https://blog.csdn.net/nidunlove/article/details/51944527 ios进度条滑动方向判断 https://www.cnblogs ...
pageadmin怎么去掉版权_微信怎么在电脑多开一键多开，多个账号_PC端微信多开教程...
*友情提示:所有下载信息仅供研究学习之用,如需商用请支持正版,谢谢!若由于商用引起版权纠纷,一切责任均由使用者承担. *如遇疑问,请先仔细阅读文章,一般问题文章内都有说明. [使用必读]:免责声明 [ ...
微信多开服务器,PC端微信多开
PC端微信多开还有,分身前让我再去找分身的切换公众号,如"微信公众号id":打开该公众号后,微信客服会给您发一条信息,请您关注"微信软件管理":为了有效果,将 ...
js-前端video播放器
js-前端video播放器目录文章目录前言推荐阅读传统播放模式视频切片 - `Accept-Ranges` 服务器端请求特定的范围单一范围多重范围条件式范围请求范围请求的响应流媒 ...
刀锋战记2服务端手游开服架设服务器搭建需要什么
刀锋战记2服务端手游开服架设服务器搭建需要什么 <刀锋战记2> 是一款以魔幻世界为题材精心打造的韩派角色扮演策略战斗类手游,游戏以魔幻世界为背景,采用虚幻4引擎打造,全面塑造的一个虚拟架 ...
神武服务端手游开服架设服务器搭建教程linux
神武服务端手游开服架设服务器搭建教程linux 大家好我是艾西,今天跟大家分享下怎么架设神武手游服务端 <神武>回合制网络游戏以西游记为背景,辅以多样化的门派设置.画面.活动玩法和各种创新 ...
神武4端游多开防封教程
神武4游戏讲述了九黎妖魔卷土重来时,三界少年坚定不移,清除九黎妖魔,维持三界稳定的故事,玩家可以扮演无名.天策.佛门.方寸.天宫.五庄.龙宫.普陀.万兽.线.天魔.魔王.地府等门派职业,与九黎残部搏斗 ...

移动端video点开后层级过高问题

移动端video点开后层级过高问题相关推荐

最新文章

热门文章