精华内容
下载资源
问答
  • 但是性能和体验方面不如方案1,而方案二的话没有测,但是个人猜想只是能修改层级,但是滑动的时候video组件渲染问题感觉还是会有。 因为本人在视频上方还有一些按钮,然后导航也是自定义导航,所以如果采用方案二...

    解决方式1:使用nvue编写界面,但是界面引入部分ui框架不支持

    解决方案2:subnvue

    解决方案3:使用h5 video.

    本人采用的第三种方案,比较方便也满足需求。但是性能和体验方面不如方案1,而方案二的话没有测,但是个人猜想只是能修改层级,但是滑动的时候video组件渲染问题感觉还是会有。

    因为本人在视频上方还有一些按钮,然后导航也是自定义导航,所以如果采用方案二这些都要处理,方案三的话目前来看能满足自己的需求。另外全屏静音等按钮也正常。

    方案三核心代码

    <view style="height: 750rpx;">
    	<view v-html="html" style="height: 750rpx;width: 750rpx;"></view>
    </view>

    data() {
    	return {
    		html:'<video muted controlslist="nodownload"	controls="controls"   src="https://cloud.video.taobao.com/play/u/1818112330/p/2/e/6/t/1/284416583177.mp4?appKey=38829"   style="height:100%"  autoplay="autoplay" poster="https://img.alicdn.com/imgextra/i1/2825989823/O1CN01sgPdZ22MQzAJ2GJAx_!!2825989823.jpg" webkit-playsinline="" playsinline="" ></video>'
    
        }
    }
    				

    展开全文
  • 解决video层级过高,有两种方法 1.使用subNvue subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供...

    解决video层级过高,有两种方法

    1.使用subNvue

    subNvue,是 vue 页面的原生子窗体,把weex渲染的原生界面当做 vue 页面的子窗体覆盖在页面上。它不是全屏页面,它给App平台vue页面中的层级覆盖和原生界面自定义提供了更强大和灵活的解决方案。它也不是组件,就是一个原生子窗体

    {
         "path": "pages/index/index",
        "style": {
            "app-plus": {  
                "subNVues":[{  
                    "id": "popup", // 唯一标识  
                    "path": "pages/index/subNVue/hello", // 页面路径  
                    //"type": "popup",  //原生子窗口内置样式,可取值:'popup',弹出层;"navigationBar",导航栏
                    "style": {  
                        "position":"absolute",
                        "height": "60px",
                        "top":"40px",
                        "background":"transparent"
                    }  
                }]  
            } 
        }
    }
    

    在hello.nvue中最外层view中必须要写id,必须要和subNVues里面的id一致,否则不会显示

    <view id="popup">
    	内容
    </view>
    

    让原生子窗体显示的时候调用显示的方法就可以了。但是nvue中里面很多css不支持,详情请自行查看官方文档

    const subNvue=uni.getSubNVueById('popup');   //获取 
    subNvue.show()  // 显示
    subNvue.hide() //隐藏
    

    2.使用 5+App提供的 plus.nativeObj.view

    App端还可以使用plus.nativeObj.view绘制原生内容,5+的plus.nativeObj.view,本质是一种类canvas的画布,可以自由的draw内容上去,更新管理也需要自己维护操作。
    包括想在原生控件比如视频、地图上加点什么东西,因为HTML的组件是盖不住原生组件的,都可以使用nview来做。
    在这里插入图片描述

    这里的下面的评论定位,就是用plus.nativeObj.view实现的,层级高于video

    //#ifdef APP-PLUS
    	//plus.nativeObj.view主要是给我们提供了画布,能让我们在上面画一些自己想要的控件。
    	//创建一个view,id为test,我们可以根据id对它进行操作,默认是没有背景的。
    	this.view = new plus.nativeObj.View('test',
    		{bottom:'0px',left:'0px',height:'60px',width:'100%'});
    	//在这个view上面画一个矩形,填充白色背景,color: #fff,铺满全屏。	
    	this.view.drawRect({color:'#fff'},
    			{top:'0px',left:'0px',width:'100%',height:'100%'})
    	//z这个view上面画一个input输入框,input输入框只能设置特定的属性,也不能设置背景。想要设置背景,就才有上面的方法。
    	this.view.drawInput({top:'8px',left: '35px', width:'280px',height:'30px'},
    			{
    	type: 'text',
    	placeholder: this.placeHolder,
    	borderColor: '#eee',
    	background:'red',
    	borderRadius:'15px',
    	onFocus:()=>{
    		//监听输入框的聚焦事件。
    		this.hideTig()
    	}
    	},'input');
    	//给input输入框填充背景
    	this.view.drawRect({color:'#eee',borderWidth:'2px',radius:'14px'},
    			{top:'8px',left:'15px',width:'300px',height:'30px'});
    	//这个是左边的按钮,因为没有提供画按钮的方法,只能画一个view填充上文字。来实现按钮		
    	this.view2 =  new plus.nativeObj.View('aps',
    		{bottom: '23px' ,zIndex: '10',right:'20px',height:'30px',width:'60px'});
    		//给view填充背景。
    	this.view2.drawRect({color:'rgba(91,183,28,1)',borderWidth:'2px',radius:'14px'},
    			{top:'0px',left:'0px',width:'100%',height:'100%'});
    	//给view加上文字
    	this.view2.drawText('发送', {top:'0px',left:'0px',width:'100%',height:'100%'}, {align:'center',color: '#fff'});
    	//给按钮加上点击事件
    	this.view2.addEventListener("click", this.fs, false)
    	//让view显示出来
    	this.view.show()
    	this.view2.show()
    //#endif
    

    获取input输入框的值

    //id是你input输入框的id
    let value = this.view.getInputValueById('input')
    

    这里不能动态设置input输入框的值,也不能动态设置placeholder的值

    //我的业务是@某个人要改变placeholder的值,给用户已提示。我这个采用的是让上面的内容重画一次,实现动态改变placeholder的值,这里的view一定要存储data中,而且不能重新给view赋值,否则,你会发现关闭页面你这个东西清除不掉,会遮掉tabbar。
    
    //reset会清空这个view里面的input输入框和画的背景。
    this.view.reset()
    this.view.drawRect({color:'#fff'},
    		{top:'0px',left:'0px',width:'100%',height:'100%'})
    this.view.drawInput({top:'8px',left: '35px', width:'280px',height:'30px'},
    		{
    type: 'text',
    placeholder: this.placeHolder,
    borderColor: '#eee',
    background:'red',
    borderRadius:'15px',
    onFocus:()=>{
    	this.hideTig()
    }
    },'input');
    this.view.drawRect({color:'#eee',borderWidth:'2px',radius:'14px'},
    {top:'8px',left:'15px',width:'300px',height:'30px'});
    
    

    等页面关闭的时候,一定到把这个view给关闭,不然它会一直存在,层级很高,会遮住你的tabbar

    onUnload(){
    	//因为只要app端才可以使用这个plus.nativeObj.view,所有这些代码一定要写到uniapp的条件编译中。
    	//#ifdef APP-PLUS
    		this.view.close()
    		this.view2.close()
    	//#endif
    }
    

    最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。

    展开全文
  • 浅谈uniapp video层级过高的解决方法

    万次阅读 2019-11-07 16:20:42
    onShow(){ // #ifdef APP-PLUS ...如果只做小程序,h5则使用cover-view就能快速的解决video等原生组件层级过高的问题(cover-view不支持固定定位) 反之,需要考虑多端的使用plus.nativeObj也是一种方法
    onShow(){
    		// #ifdef APP-PLUS
    		var icon = plus.nativeObj.View.getViewById("icon");
    		//如果已经存在
    		if(icon){    
                //则显示
    			icon.show();
    		}else{
                //不存在  则创建
    			this.createtab();
    		}	
    		// #endif
    },
    //离开页面隐藏
    onUnload(){
               //在app端不支持cover-view嵌套
    		// #ifdef APP-PLUS
    			var icon = plus.nativeObj.View.getViewById("icon");
    			icon.hide();
    		// #endif
    	},
    onHide(){
    		// #ifdef APP-PLUS
    			var icon = plus.nativeObj.View.getViewById("icon");
    			icon.hide();
    		// #endif
    },
    methods: {
    		createtab: function(){
    		        // 设置水平居中位置
    				var bitmap = new plus.nativeObj.Bitmap('bmp1');
    		        var view = new plus.nativeObj.View('icon', {
    		            top: '30px',
    		            left: '10px',
    		            width: '30px',
    		            height: '30px'
    		        });
    		        view.drawBitmap('/static/back.png', {
    		            top: '0px',
    		            left: '0px',
    		            width: '100%',
    		            height: '100%'
    		        });
    		        view.addEventListener("click", function(e) {
    		           uni.navigateBack({
    		               delta: 1
    		           });
    		        }, false);
    		        view.show();
    		    },
    }

    如果只做小程序,h5则使用cover-view就能快速的解决video等原生组件层级过高的问题(cover-view不支持固定定位)

    反之,需要考虑多端的使用plus.nativeObj也是一种方法

    展开全文
  • video层级高于其他标签 目前百度小程序开发版本号 3.20.2 出现原生 video视频播放器层级高于其他标签,目前我们业务场景需要在video视频播放标签之上覆盖聊天记录,因此使用cover-view标签,遇到无法覆盖问题 预期...

    video层级高于其他标签

    目前百度小程序开发版本号 3.20.2 出现原生 video视频播放器层级高于其他标签,目前我们业务场景需要在video视频播放标签之上覆盖聊天记录,因此使用cover-view标签,遇到无法覆盖问题

    预期效果

    在百度小程序开发工具中可以正常实现,但是在远程调试的ios14 的iphonexs max中
    预期效果

    真机以及远程调试效果

    真机效果
    无法实现覆盖的,还是被原生视频的层级所压盖

    此小程序代码基于uni.app hbuildx开发

    <video 
         :object-fit="videoType==1?'contain':'fill'" 
         :autoplay="true" 
         :loop="true" 
         :controls="false"
         :style="videoType==1?'height: 400rpx;':'height:100vh;position:absolute;z-index:-1;top:0'" 
         class="video"
         src="http://timing-video.kr-cell.com/video/19881470_1606295482_6qa6yySSSTKJPcodyohsnXpoasAOwDyS.mp4">
         <CoverView style="font-size:50px;color:red">
           我是覆盖video的标签
         </CoverView>
    </video>
    

    此处的cover-view 组件内的文字压根不会覆盖在代码之上,跪求解决方案

    展开全文
  • uniapp中video层级解决方案

    千次阅读 2021-08-19 14:15:37
    uniapp中video层级解决方案 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 ...
  • uni-app video全屏层级高的问题

    千次阅读 2020-04-28 11:24:37
    uni-app video全屏层级高的问题 uni-app怕坑记一 关于视频全屏层级 由于抖音啥的火起来后,越来越多的设计喜欢设计这种视频上面有操作按钮的产品了。感到头痛。。。。 如果你想做出这种效果,我劝你直接嵌入nvue...
  • uniapp video视频组件层级的问题

    千次阅读 2020-11-11 17:42:09
    uniapp 中的video视频组件的层级问题 uniapp中的video视频组件默认是最高层级的,也就是说无论写什么样式,都是在video的下层,这样就会影响到页面的展示。 如果点击视频播放的时候,video视频组件会永远在最高层,...

空空如也

空空如也

1
收藏数 7
精华内容 2
关键字:

uniappvideo层级过高