解决h5视频层级过高问题

置顶 已于 2023-07-04 16:34:22 修改
阅读量5.7k 收藏 1
点赞数 3
分类专栏： 前端 文章标签： bug
于 2019-12-15 22:10:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38698753/article/details/103554518
版权

h5 video层级太高如何解决

项目中用到h5的video组件发现video的层级过高无法遮盖,所以查阅后加了一些字段

 <video v-if='lessonObj.type==="video"' :src="lessonObj.liveLink" :poster="lessonObj.cover" controls class="topBanner" webkit-playsinline playsinline x5-playsinline x-webkit-airplay='allow' x5-video-player-type='h5' x5-video-orientation='portraint' x5-video-player-fullscreen='' ></video>
爱上彗星的尾巴
关注
专栏目录
video移动端层级过高
u014708123的博客
02-28 935
开发混合app的时候经常会碰到安卓video播放加载视频的时候层级太高问题，目前使用以上属性可以解决问题;
前端H5 video视频在360浏览器、微信内置浏览器层级提升（太高）问题
薛小科的博客
09-06 890
我们在对页面进行浏览器兼容性测试的时候会发现页面中的视频在部分浏览器中（QQ浏览器、360浏览器、搜狗浏览器等）会被提升，这属于浏览器自身优化行为，无法通过CSS的z-index属性改变其层级关系。目前找到了360浏览器、微信内置浏览器的解决方案： <video controls360=no // 360浏览器 webkit-playsinline playsinline x5-playsinline // 针对腾讯
解决网页中的 video 标签在移动端浏览器（如百度访问网页）视频脱离文档流播放问题
最新发布
weixin_40795574的博客
07-16 518
部分浏览器视频脱离文档流，滚动时，视频是悬浮出来，在顶部播放。
video层级过高的问题解决
hcy5201314521的博客
01-23 1664
这个是uniapp的app项目，在h5页面的时候，这个红包是在视频播放的上面，当点击视频播放的时候，下面的购物车的图标也会显示到视频上面，这个效果，在h5页面是没有问题的，但是在手机端真机调试的发现，不管播不播放视频，红包的图标和购物车的图标都是不显示在，播放上面的。直接在 是去 插件市场安装这个 插件 然后替换你的video插件即可 传入视频的url地址即可。看看这个 video 的层级是最高的。
解决H5安卓自带浏览器video层级问题
https://github.com/Bot80926
05-31 5006
一、问题 video标签在安卓自带浏览器下会默认处于最高层级，由于不是x5内核，所以不能采取x5-video-player-type等方法。
H5页面视频播放后video标签层级变为最高遮盖其他元素
dujyong的博客
09-01 3283
H5页面视频播放后video标签层级变为最高遮盖其他元素 Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,H5页面播放完视频后,video标签的层级会变成最高,遮盖其他所有元素 解决: 添加 x5-video-player-type='h5-page'属性就行 <video x5-video-player-type='h5-page' :src="item"></video> 问题解决! ...
移动端video点开后层级过高问题
吞石鱼的博客
08-13 1万+
网络上有很多关于该问题的解答，而且大家遇到的状况也是层出不穷。 我初步分析是由于不同厂商和游览器内核版本等不同导致的标签解析和渲染问题。我仅仅以我的两个手机进行解答。 首先我得机型分别是nubia z11 android 6.0.1 和 huawei nova 3 android 9.0 测试时间 2019.8.13 两款手机的表现是，huawei 和 nubia未点击video时，video都是...
移动端video标签层级过高遮挡弹层问题
2301_77940797的博客
04-19 370
当点击弹层显示时，可以将video标签外部的div使用v-if或者v-show隐藏起来，然后当关闭弹层时再展示。近期在写移动端发现点击弹层显示时，video标签包裹的视频层级过高遮挡弹层。困惑了很长时间，发现了一种解决方案，记录一下。
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
移动web端视频层级最高，视频弹窗层被遮挡的解决方案探究
萌新_zackXiong_勇闯前端~
04-15 5099
一.背景 相信有不少同学在开发移动web端带视频的页面时，在部分浏览器上视频的显示层级最高，遮罩层，弹窗之类都被视频遮盖。 我觉得出现这种情况是因为使用了浏览器的播放器，和标准的h5video标签有比较大的区别。会出现这种情况的有： 安卓端: 微信内置浏览器，UC浏览器，QQ浏览器....等等 苹果端： 手头没有苹果设备. [补充说明]: 文中用的是layer.js的弹窗组件 二...
研究大佬--video在微信浏览器下的层级过高问题(安卓：小米出现的问题)
qq_40273285的博客
10-30 7849
还是上一篇的那个视频页面，真的是很烦 需求：这次需要判断网络状况，当非wifi状态下（即4g）出现提示弹框《当前处于移动数据网络》 设备：iphone7plus，ipad4，iphone5，安卓（小米），微信开发者工具 涉及元素及属性：div， 模态框，display，js 视频格式：mp4 问题：在除安卓设备（小米）以外，其他设备提示弹框正常渲染；安卓（小米）也会被渲染，但是被vide...
uniapp|原生控件层级过高无法覆盖的解决方案
热门推荐
前端程序员、项目经理、人工智能博主
06-25 1万+
简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。这种方式被称为混合渲染。另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue。但如果在pages.json里注册了原生导航栏和tabbar，nvue里的界面元素默认也无法覆盖这些，也需要plus.nativeObj.view或subNVue。
video重写控制条——解决video全屏层级最高问题
qq_38143787的博客
10-27 4881
文章目录一、页面的HTML部分二、css部分三、暂停功能/播放功能四、全屏功能五、当前时间和总时间的显示六、进度条拖动功能七、播放结束时候的处理八、data部分九、结语 全屏video会在最上层，这个时候设置定位或者z-index都是无效的，按照有些博客中的z-index设置成2147483647也没用，x5-video-player-type="h5"也没用，于是决定重写控制条。 经过分析，简单的重写控制条的话，有这么几个功能点： 1.暂停功能/播放功能 播放时进度条跟随功能 播放时时间改变功能 暂停时
video在安卓H5中层级最高的解决方案
Hgh_1997的博客
01-09 2665
<video class="video" :id="`video${videoId}`" :src="videoUrl" :controls="controlsType" :loop="true" :show-center-play-btn="false" @timeupdate="onUpdata" :enable-progress-gesture="false" :enabl...
H5的video 在安卓浏览器上层级问题
qq_23399717的博客
04-04 2067
H5的video 在安卓浏览器上层级问题
解决uniapp中video标签层级太高问题
猫七先生的博客
09-19 943
前言：层级太高会导致遮挡其它元素，使用cover-view也能解决，但如果被遮挡的元素使用了第三方UI库，就有点麻烦了。也不知道为什么使用v-html的方式就能解决这个问题，它的解决原理是什么？研究研究v-html实现原理。
video层级过高，以及界面使用多个video时，在安卓APP上同时播放的问题（uniapp）
随身笔记
03-08 2460
uniapp中video多个同时播放问题 video 层级过高的问题解决 subNVues原生窗体的使用
video视频背景层级过高解决方案
无名之辈-_-
03-31 2136
uni-app video
解决H5播放视频黑屏只有声音没有图像的问题
06-13
出现H5播放视频黑屏只有声音没有图像的问题可能有多种原因，以下是几种可能的解决方法： 1. 检查浏览器是否支持视频格式。不同浏览器对视频格式的支持有所不同，可能导致无法正常播放。可以尝试使用其他浏览器或更新浏览器版本。 2. 检查视频文件是否损坏。视频文件损坏也可能导致无法正常播放。可以尝试重新下载视频文件或使用其他视频文件进行测试。 3. 检查视频解码器是否正常。如果视频解码器出现问题，也可能导致视频无法正常播放。可以尝试更新或重新安装相应的解码器。 4. 检查浏览器插件是否正常。一些浏览器插件可能会影响视频播放，可以尝试禁用或卸载插件进行测试。 5. 检查操作系统设置。某些操作系统设置可能会影响视频播放，可以尝试调整相关设置进行测试。 希望以上方法能够解决您的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值