踩坑之路——微信小程序video原生组件层级过高解决方案

最新推荐文章于 2024-08-01 21:09:24 发布
最新推荐文章于 2024-08-01 21:09:24 发布
阅读量4k 收藏 1
点赞数 1
分类专栏： 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42556039/article/details/83546657
版权
本文探讨了微信小程序中video组件层级过高的问题，并提出了一种解决方案：通过在不播放时隐藏video，用view组件替代显示，点击view时再显示video。作者分享了一个实现这一思路的小组件的wxml、wxss和js代码片段。
摘要由CSDN通过智能技术生成

成品：

 

可以看到成品其实不是完全解决了问题，如果有更好的方法可以告知一下我，谢谢。

思路很简单，让video组件在不播放的时候隐藏，让替代品view呈现，当点击view时，让video显示出来。

我写了一个小组件供大家参考：

wxml

<view class='view' style='{
  {style}};' bindtap='showVideo' hidden='{
  {showVideo}}'></view>
<video class='video' id='video' style='{
  {style}};' src='{
  {src}}' hidden='{
  {!showVideo}}' bindpause='hideView' bindended='hideView'></video>

wxss


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Marker.杨
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
微信小程序原生开发功能合集二：下拉选择组件封装

				
			

			

				

					Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
				

				

					02-07
					
					2069
					
				

			

		

		

			
				
本节实现select组件的开发说明，另使用nodejs创建express服务器，为远程加载数据提供数据接口，代码可从源码中下载。

			
		

	



                

              
                



	

		

			

				
					
小程序video组件层级太高如何解决

				
			

			

				

					凌云鹤YK
				

				

					01-08
					
					5218
					
				

			

		

		

			
				
小程序video组件层级太高如何解决
小程序首页用了一个video组件，然后modal组件的悬浮窗就被这个video覆盖了，因为原生组件的层级太高，用z-index是没有办法解决的。
以下是我刚开始写的代码，不管怎么设置z-index，视频总在悬浮层上面。
	&amp;lt;view&amp;gt;
	   	&amp;lt;modal title=&quot;请选择&quot; cancel-text=&quot;取消&quot; confi

			
		

	



                


  
              

                


	

		

			

				
					
微信小程序中层级问题

				
			

			

				

					weixin_45581741的博客
				

				

					06-05
					
					1781
					
				

			

		

		

			
				
微信小程序中层级问题
小程序框架为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，设计了cover-view，cover-view会覆盖在组件之上，这样就可以解决原生组件层级的问题。

这就是顶部的一个标题组件，这样写他不会出现层级问题
<template>
    <cover-view class="child-header">
        <cover-view class="

			
		

	





	

		

			

				
					
微信小程序开发中的视频播放和直播功能

					
最新发布

				
			

			

				

					一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
				

				

					08-01
					
					1601
					
				

			

		

		

			
				
通过自定义样式和控件，可以实现更个性化的播放器界面。

			
		

	



		

			
		



	

		

			

				
					
微信小程序video组件层级

				
			

			

				

					weixin_43676252的博客
				

				

					10-22
					
					772
					
				

			

		

		

			
				
主要解决video组件层侧过高，上滑时覆盖住顶部固定定位的导航
wxml
<video style="width: 100%;height=400px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=S

			
		

	





	

		

			

				
					
微信小程序 video层级过高问题（手机版本兼容）

				
			

			

				

					smile2333的博客
				

				

					06-01
					
					956
					
				

			

		

		

			
				
微信小程序 video层级过高问题

			
		

	





	

		

			

				
					
微信小程序video组件小视频

				
			

			

				

					han_cui的博客
				

				

					01-17
					
					1万+
					
				

			

		

		

			
				
视频播放组件与图片加载组件也没啥差别，使用起来也没啥注意的


重要属性：



.wxml页面



  
  
    获取视频
  




  <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f

			
		

	





	

		

			

				
					
一步快速解决微信小程序中textarea层级太高遮挡其他组件

				
			

			

				

					01-20
				

			

		

		

			
				
`cover-view`是专为了解决原生组件层级过高而设计的，它可以覆盖在原生组件之上，包括textarea。与一般的原生组件不同，`cover-view`和与其类似的`cover-image`组件允许开发者在原生组件之上添加交互元素，如按钮、...

			
		

	





	

		

			

				
					
uni-app/微信小程序video组件层级过高覆盖悬浮按钮

				
			

			

				

					Syleapn的博客
				

				

					07-30
					
					1万+
					
				

			

		

		

			
				
uni-app/微信小程序video组件层级过高覆盖悬浮按钮：



一、出现的概率与场景

具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！



二、分析：

大体分析说明：

一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view...

			
		

	





	

		

			

				
					
微信小程序的「同层渲染」踩坑记

				
			

			

				

					03-29
				

			

		

		

			
				
背景 近期在开发小程序中，接触最多的就是 ...小程序的内容大多是渲染在 WebView 上的，如果把 WebView 看成单独的一层，那么由系统自带的这些原生组件则位于另一个更高的层级（如 canvas、video）。两个层级是完全独

			
		

	





	

		

			

				
					
微信小程序video组件层级过高问题

				
			

			

				

					落叶知秋の博客
				

				

					07-08
					
					1763
					
				

			

		

		

			
				
微信小程序video组件层级过高问题
微信小程序新手,在实际的项目开发者遇到video组件层级过高的官方bug,始终浮在元素的最上层,弹窗会被视频覆盖,几经摸索,找到以下解决方案(项目不得不向bug妥协)
1.让用户更新到新版微信客户端,7.0.4微信客户端已修复该问题
2.使用cover-view组件作为弹窗容器(wxss支持不全,很多样式不能使用)
3.改变视图位置,当弹窗弹起时,改变scro...

			
		

	





	

		

			

				
					
【微信小程序】video视频组件问题

					
热门推荐

				
			

			

				

					小平果的欢乐谷
				

				

					12-02
					
					5万+
					
				

			

		

		

			
				
前言将babel捧作前端一个划时代的工具一定也不为过，它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网？反正我是不放心，我就曾经过被坑过，于是萌生了研究babel代码转换的想法。本文不是分析babel源码，仅仅是看看babel转换的最终产物。es6在babel中又称为es2015。由于es2015语法众多，本文仅挑选了较为常用的一些语法点，而且主要是分析babel-

			
		

	





	

		

			

				
					
iOS微信小视频优化心得

				
			

			

				

					weixin_34259232的博客
				

				

					12-25
					
					648
					
				

			

		

		

			
				
小视频是微信6.0版本重大功能之一，在开发过程中遇到不少问题。本文先叙述小视频的产品需求，介绍了几个实现方案，分析每个方案的优缺点，最后总结出最优的解决方案。

小视频播放需求



可以同时播放多个视频


用户操作界面时视频可以继续播放


播放时不能卡住界面，视频滑进界面内后要立即播放


视频在列表内播放是静音播放，点击放大是有声播放




...

			
		

	





	

		

			

				
					
【微信小程序】vertical属性、文章列表

				
			

			

				

					m0_55394328的博客
				

				

					11-10
					
					1502
					
				

			

		

		

			
				
哈喽大家好，本期是微信小程序专栏第八期，本期的主要内容是以vertical属性为例了解Boolean值的一个小“陷阱”、文章列表的制作。注意：每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~

			
		

	





	

		

			

				
					
如何将MP4设置为网页的背景

				
			

			

				

					qq_47794306的博客
				

				

					08-03
					
					1846
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.fullscreenvideo {
			    position: absolute;
			    top: 50%;
			    left: 50%;
			    min-width: 100%;
			  .

			
		

	





	

		

			

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

				
			

			

				

					吞石鱼的博客
				

				

					08-13
					
					1万+
					
				

			

		

		

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

			
		

	





	

		

			

				
					
小程序中视频作为页面背景

				
			

			

				

					@LiuStrong
				

				

					12-30
					
					5258
					
				

			

		

		

			
				
业务背景：实现在小程序原生页面中以视频作为页面背景效果

wxml:
<video id="myVideo"
src="https://download.mia.com/newpc/home.mp4"
loop        
muted
controls="{{false}}"
show-play-btn="{{false}}"
show-center-play-btn="{{false}}"
enable-progress-gesture="{{false}}"
object-fit="co...

			
		

	





	

		

			

				
					
小程序video层级过高 ！解决方案之------- cover-view！

				
			

			

				

					weixin_43099985的博客
				

				

					10-09
					
					1万+
					
				

			

		

		

			
				
在小程序用应用视频地图等组件时会发现由于这些组件层级过高会覆盖到我们的导航栏！即使我们设置了定位给z-index 9999，

但是在真机测试时依然会失效！那么就要用到组件盖视图


&lt;video src=""&gt;&lt;/video&gt;
&lt;cover-view&gt;我要盖住你&lt;/cover-view&gt;

用盖视角写导航栏就可以覆盖到视频上面了！但是有几个小坑要注...

			
		

	





	

		

			

				
					
微信小程序云端解决方案：跨越H5界限的探索

				
			

			

				

					
				

			

		

		

			
				
"微信小程序云端解决方案的探索与实践在GITC大会上被分享，探讨了小程序的特性和区别于H5的应用本质，以及面临的挑战和解决方案，特别是会话管理和WebSocket的实现"  微信小程序作为移动端轻量级的应用形态，其特性...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值