Donut 中，video组件层级失效、同层渲染失效、z-index设置无效解决办法

已于 2023-11-15 15:50:11 修改
阅读量263 收藏
点赞数 2
文章标签： 微信小程序 微信小程序转Donut donut
于 2023-11-15 15:49:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42044542/article/details/134422055
版权
本文讲述了在将微信小程序移植到安卓后，遇到的z-index层级问题，video组件默认位于最上层。解决方法是开启xweb配置中的同层渲染选项，并在project.miniapp.json中启用相关设置，特别鸣谢腾讯官方的黄嘉敏大佬。
摘要由CSDN通过智能技术生成

微信小程序转安卓之后，z-index设置的层级关系失效，video组件总是处在最上层解决办法：

很重要的设置!

同层渲染要开 xweb，project.miniapp.json中勾选此设置

感谢腾讯官方大佬 黄嘉敏

Bayi·
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端浏览器解析vidio标签到最顶层，调整index-z无效
ssjjrr的博客
02-04 722
移动端浏览器解析vidio标签到最顶层，调整index-z无效
ie8 下使用video 标签的z-index问题
diaoan8655的博客
09-15 611
最近在项目中遇到了一个问题，就是在ie8下video的z-index 很小，但是却始终显示在最上面，经过很长时间的查论，最终解决了这个问题。 1、设置flash为透明：但是如果你在DW中插入动画，再加<param name="wmode" value="transparent">是不生效的。要把整个的flash插件12代码换成如下：<object type="appl...
前端 video 元素总是浮在最上方，增加一个 z-index 属性
最新发布
Lucky小黄人的博客
11-04 1048
今天在 table 表格里每行渲染了一个视频，设置了首列固定，但是发现左右滑动表格时，当视频那列经过首列的位置时，视频会浮在首列元素上方，查了一下，用 z-index 设置 z 属性层级解决了。 在react ant-design 里 z-index写法是：zIndex ，把这个参数设置为0，这样在滑动页面时视频就不会浮在其他元素上面了，当然这只是我的情况用这个可以解决，好像网上很多情况用这个解...
微信浏览器中video标签 Z-index 过高遮挡页面问题
xiaopeng_han123的博客
11-15 1万+
添加部分属性： &lt;video controls id="video-introduction" x5-playsinline webkit-playsinline playsinline x-webkit-airplay="allow" x5-video-player-type="h5" width={d...
安卓端video踩坑
weixin_43993581的博客
10-28 1277
安卓端下的video标签播放时会被浏览器接管。此时已经脱离了文档流，并且与文档已经非同层了，所以设置z-index是无效的。 安卓下qq的x5内核浏览器，提供了相关属性。分别为：x5-playsinline：行内播放。x5-video-player-type=“h5”：播放层级为文档层级。如果页面只有一个视频而且该视频在页面的顶部用起来还是比较顺心的。否则会发现，播放视频的时候会紊乱的。 所以移...
android-canvas-donut-chart.7z
07-29
通过"android-canvas-donut-chart"这个示例项目，开发者可以学习到如何在Android中利用Canvas API创建自定义的可视化组件，理解图形绘制的基本原理，并且能掌握数据可视化的实现技巧。这个过程不仅锻炼了编程技能，...
react-donut-chart:可扩展的SVG甜甜圈图React组件
05-24
npm install react-donut-chart --save 用法 import DonutChart from 'react-donut-chart' ; //things I would never do: 观看演示，或在本地运行： npm run build npm run start 然后访问 。 道具 名称 类型 ...
js-donut-chart:适用于JavaScript的轻量级甜甜圈图库
05-16
它生成了一个SVG图形供浏览器渲染，这就是它的全部工作。 该API非常简单。 首先，您需要找到一个元素来插入图形，例如： var chart_div = document.getElementById("mychart")然后您实例化该类： var mychart = new...
react-svg-donuts：用于React的SVG甜甜圈组件
02-09
一个用于简单（和复杂）SVG甜甜圈的ReactJS组件。 当前版本取决于React 16引入的Hooks API。如果需要旧版React支持，请使用1.xx版本。 演示版 TL; DR 依存关系 节点JS NPM /纱线 React和ReactDOM 一个ReactJS应用...
react-donut:react用于React成分的简单且可编辑的甜甜圈图
04-28
为响应而构建的用于甜甜圈图的tui-chart包装器组件。 它建立在tui-chart库的顶部。 参考 安装 使用npm： npm install react-donut 演示版 Codesandbox演示 贡献 先决条件 分叉此回购 将其克隆到本地计算机 开始...
VideoJS —— HTML5 视频播放器
10-09
本文档总结了常用的videojs的方法、事件，并写了几个常用的视频操作实例，比如暂停、插入图片、插入文字、插入视频等
解决移动端视频层级最高的问题，修改video属性
热门推荐
哈哈hyc的博客
10-31 3万+
在网页设计在移动端设计的时候有些box里面都是需要放置video的时候，video的时候的层级总是最高的，这个时候就是需要在video的基础上修改属性就可以了，具体的属性如下，大家可以参考参考： &lt;video src="https://hy.v.netease.com/2018/1030/5c9caed3eea6c6e079673d031fca3350qt.mp4" controls="...
z-index不起作用的大坑
geek555的博客
03-07 214
转载：https://blog.csdn.net/hcrw01/article/details/85986115 一对兄弟节点,insert和parent，parent有两个子节点subtop和subbottom，展现的结果是想让subtop在insert上面，subbottom在insert下面， 代码如下： <!DOCTYPE html> <html lang="en"&gt...
阿里播放器在微信上使用的坑
阿之阿佐
04-21 1859
一、被劫持的video在微信上同层播放问题 现象： 项目中要实现类似淘宝直播的功能，在直播视频上显示弹幕点赞动效等互动DOM，但是使用aliplayer加上playsinline=true，x5-type=h5属性后，安卓下video会被劫持到另一个图层置顶播放，导致在video上无法放置任何DOM结构，而ios在playsinline=true时正常同层播放。 思路： 尝试在阿里云web播放器文档中寻找答案无果（属性排列组合始终不能同时满足不同版本微信及不同设备的同层播放需求） 放弃了阿里.
html设置z-index层级无效和清除浮动无效
jss19940414的博客
11-28 1733
写了一个导航的小demo，问题就来了。 1.问题描述：做个导航条，当鼠标在导航元素上悬停的时候，元素的下方的一个span元素会向上移动，故给span元素position:absulote(绝对布局),span元素的父元素position:relative(相对布局),但是在使用jquery注册事件的时候，span元素是往上移动了，不过也将导航条上的文字盖住了，即使给这两个元素设置z-index属...
H5的video标签中遇到无效源解决
weixin_45182428的博客
12-22 2058
<video id="video1" width="420" controls="controls" preload="metadata"> <source src="Uploadfile/${video.v_url}" type="video/mp4"/> <source src="Uploadfile/${video.v_url}" type="video/webm"/> <source src="Uploadfile/${video.v_url}" .
完美解决移动端video视频层级问题
风萧萧兮易水寒
06-14 3万+
H5页面视频播放的问题相信曾经让很多同学崩溃，video标签的层级问题始终无法得到完美的解决方案。 这次的需求是这样的：在浏览器中扫码打开一个H5页面，要将一个视频当成背景图片来播放（gif太大，所以不用） 通过给video标签设置postion z-index等属性，明显是不可行的。 方案1： <video id="video-ios" src="./ceshi.mp4" web...
微信直播video安卓端始终在最顶层的解决方法
深谷逸风的博客
03-27 1万+
这是一个老生常谈的问题，也是每个做微信直播前端心中的痛点,做过微信直播的同学都知道不管video的z-index设置为多小，或者其他元素的z-index比video大多少，video始终在最顶层。关于这一点官方给出的回答也是相当的，嗯，好吧，我想不到形容词了。。。 X5内核视频播放使用了自研的播放器，考虑用户体验，我们使用了统一的播放界面。如果有相关问题，请联系腾讯浏览服务产品经理做进一步交流
video autoplay失效
impossible1994727的博客
06-18 1470
测试的时候好好的，上到正式上面的时候video引用的视屏加载需要时间，自动播放就失效了 解决办法：在标签内写上muted <video class="s_videos" :poster="video.vedioPicBig" :src="video.vedioFilePath" id="videoPlay" ...
Android应用开发：探索框架层与环境设置
本章节深入探讨了Android应用程序框架在Android应用与开发环境中的核心作用。首先，Android被介绍为一个由Google于2007年推出的开源手机操作系统，其名称源于拉丁语"Android"，象征着未来和创新。Logo设计独特，以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值