解决h5视频层级过高问题

置顶 已于 2023-07-04 16:34:22 修改
阅读量5.6k 收藏 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>
爱上彗星的尾巴
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决uniapp开发抖音小程序video-player覆盖问题，超详细教程，前端相关操作，已成功上线产品
03-28
video-player原生
uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题
05-30
在uniapp项目中 video层级过高 页面滑动时 遮挡顶部导航 或者页面有弹窗效果 视频同时也会遮挡弹窗 使用subNVues 解决此问题 pages.json 中 配置{ "path": "pages/index/index", "style": { ...
video视频背景层级过高解决方案
无名之辈-_-
03-31 1986
uni-app video
uniapp视频组件层级太高，解决方法使用subNvue原生子体窗口
最新发布
m0_64520392的博客
06-07 1249
uniapp视频组件层级太高，使用subNvue原生子体窗口 解决
H5的video 在安卓浏览器上层级问题
qq_23399717的博客
04-04 1883
H5的video 在安卓浏览器上层级问题
解决H5安卓自带浏览器video层级问题
https://github.com/Bot80926
05-31 4868
一、问题 video标签在安卓自带浏览器下会默认处于最高层级，由于不是x5内核，所以不能采取x5-video-player-type等方法。
uniapp中video层级太高解决方案，适用安卓/IOS/H5
Am心若依旧
08-09 3079
话不多说，直接上代码stylewidth100%;height100%;border;
微信小程序 video层级过高问题（手机版本兼容）
smile2333的博客
06-01 886
微信小程序 video层级过高问题
视频格式转canvas绘制
06-14
ts格式的视频转成canvas绘制，可用于解决h5页面video标签层级问题
H108_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-04
CSS3的新特性如选择器层级、过渡效果、动画、多列布局等，让设计师可以创建出更加动态和富有层次感的网页。尤其是对于移动端，媒体查询（media queries）的使用，使得模板能够实现自适应响应式设计，无论在手机、...
953_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-03
"953_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip"提供了一整套解决方案，它融合了HTML、CSS和H5等关键技术，旨在打造一款跨平台、响应式的网站模板。以下将详细解析这套源码的主要特点和关键...
video层级过高的问题解决
hcy5201314521的博客
01-23 1238
这个是uniapp的app项目，在h5页面的时候，这个红包是在视频播放的上面，当点击视频播放的时候，下面的购物车的图标也会显示到视频上面，这个效果，在h5页面是没有问题的，但是在手机端真机调试的发现，不管播不播放视频，红包的图标和购物车的图标都是不显示在，播放上面的。直接在 是去 插件市场安装这个 插件 然后替换你的video插件即可 传入视频的url地址即可。看看这个 video 的层级是最高的。
前端H5 video视频在360浏览器、微信内置浏览器层级提升（太高）问题
薛小科的博客
09-06 844
我们在对页面进行浏览器兼容性测试的时候会发现页面中的视频在部分浏览器中（QQ浏览器、360浏览器、搜狗浏览器等）会被提升，这属于浏览器自身优化行为，无法通过CSS的z-index属性改变其层级关系。目前找到了360浏览器、微信内置浏览器的解决方案： <video controls360=no // 360浏览器 webkit-playsinline playsinline x5-playsinline // 针对腾讯
微信小程序video高层级的解决
weixin_30414155的博客
09-04 455
在小程序内使用了video视频标签，底部再加上一个悬浮的Btn按钮或是页面的中间弹窗，在页面上下滑动的时候，由于video原生组件的层级太高，会把悬浮（弹窗）给覆盖掉。 像video这种原生组件层级太高，覆盖了其他内容。用z-index去调试的话，在工具上市可以解决的。 但是真机测试的时候还是没有解决该问题。 微信小程序开发文档提供的这么一个组件，cover-view。覆盖在原生组件之上的文...
微信小程序video组件层级过高问题
落叶知秋の博客
07-08 1746
微信小程序video组件层级过高问题 微信小程序新手,在实际的项目开发者遇到video组件层级过高的官方bug,始终浮在元素的最上层,弹窗会被视频覆盖,几经摸索,找到以下解决方案(项目不得不向bug妥协) 1.让用户更新到新版微信客户端,7.0.4微信客户端已修复该问题 2.使用cover-view组件作为弹窗容器(wxss支持不全,很多样式不能使用) 3.改变视图位置,当弹窗弹起时,改变scro...
video在安卓H5中层级最高的解决方案
Hgh_1997的博客
01-09 2615
<video class="video" :id="`video${videoId}`" :src="videoUrl" :controls="controlsType" :loop="true" :show-center-play-btn="false" @timeupdate="onUpdata" :enable-progress-gesture="false" :enabl...
H5video标签在微信浏览器中播放视频后层级关系会改变（安卓端）
weixin_44422264的博客
01-07 817
H5video标签在微信浏览器中播放视频后层级关系会改变（安卓端） 当使用video标签后，微信浏览器打开视频时在ios端是可以正常播放滑动的 而在安卓手机端video标签打开播放视频后会将其层级关系改变 从而导致页面无法继续向下滑动 在video标签中添加 <video x5-video-player-type="h5-page"></video> 示例代码： <video x5-video-player-type="h5-page" controls="" autopl
H5页面视频播放后video标签层级变为最高遮盖其他元素
dujyong的博客
09-01 3189
H5页面视频播放后video标签层级变为最高遮盖其他元素 Android微信内置浏览器是X5内核,X5内核中默认了video的层级是最高级别,H5页面播放完视频后,video标签的层级会变成最高,遮盖其他所有元素 解决: 添加 x5-video-player-type='h5-page'属性就行 <video x5-video-player-type='h5-page' :src="item"></video> 问题解决! ...
解决H5播放视频黑屏只有声音没有图像的问题
06-13
出现H5播放视频黑屏只有声音没有图像的问题可能有多种原因，以下是几种可能的解决方法： 1. 检查浏览器是否支持视频格式。不同浏览器对视频格式的支持有所不同，可能导致无法正常播放。可以尝试使用其他浏览器或更新浏览器版本。 2. 检查视频文件是否损坏。视频文件损坏也可能导致无法正常播放。可以尝试重新下载视频文件或使用其他视频文件进行测试。 3. 检查视频解码器是否正常。如果视频解码器出现问题，也可能导致视频无法正常播放。可以尝试更新或重新安装相应的解码器。 4. 检查浏览器插件是否正常。一些浏览器插件可能会影响视频播放，可以尝试禁用或卸载插件进行测试。 5. 检查操作系统设置。某些操作系统设置可能会影响视频播放，可以尝试调整相关设置进行测试。 希望以上方法能够解决您的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值