UNIAPP----video标签层级问题的三种解决方法

uniapp的app端，video标签层级过高，无法轻易被遮盖。

三种解决方法，真机测试没问题。代码复制即可。

1.cover-view或者cover-image，放在video标签内使用，子绝父相

缺点：只能改变cover-view样式，无法嵌套view。具体查看官网讲解。

<template>
	<view>
		<video style="position: relative;" src="https://haokan.baidu.com/v?pd=wisenatural&vid=18309277609015821003">
			<cover-view style="width: 100px;height: 100px;background-color: #fff;position: absolute;left: 0;"></cover-view>
		</video>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

2.subnvue 创建原生子窗体，放在当前页面下，放好位置即可。

首先创建目录页面，nvue文件。最好放入同级。

 完整代码：

实验页面

<template>
	<view>
		<video src="https://haokan.baidu.com/v?pd=wisenatural&vid=18309277609015821003">
			
		</video>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			const subNvue = uni.getSubNVueById(''subNvue''); // 这个id是pages.json下绑定的唯一id
			// subNvue.hide();//标识初始隐藏
			
			
			//show方法显示，  
			// 下面是初始创建位置  
			// 第一个参数子窗体动画效果
			// 第二个参数持续时间
			// 第三个参数修改样式函数
			subNvue.show(''none'', 0, () => {
				subNvue.setStyle({
					top: ''90px'',
					right: ''20px'',
					width: ''90px'',
					height: ''114px''
				});
			});
 
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

子窗体代码

<template>
	<view>
		<text style="font-size: 30px;color: #f00;">这是子窗体</text>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

pages.json

{
            "path" : "pages/index/aaa",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false,
				"app-plus": {
					"subNVues": [
						{
							"path": "pages/index/subNvue/subNvue",//路径地址
							"id": "subNvue",//唯一id，一个页面下最多三个最好，否则影响性能
							// "type": "popup"  如果是弹窗可开启
							//这个是初始样式，当然初始想隐藏的话，这个不重要
							"style": {
								"width": "100%",
								"height": "100px"
							}
						}
					]
				}
            }
            
        }

3.plus.nativeObj.View()  绘制原生画布，有点击事件。不属于dom，可以覆盖webview和各种原生控件

首先onload时创建画布。

完整代码

<template>
	<view>
		<video src="https://haokan.baidu.com/v?pd=wisenatural&vid=18309277609015821003">
			
		</video>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				view:''''
			}
		},
		onLoad() {
			this.view = new plus.nativeObj.View(
				''viewHotFixView'',
				{
					top: ''132px'', // 下面均可用变量控制
					left: ''0'',
					width: ''100%'',
					height: ''600px'',
					position: ''dock''
				},
				[
					{
						tag: ''img'',
						id: ''bgroundicon'',
						position: {// 下面均可用变量控制
							top: ''0px'',
							left: ''0px'',
							width: ''100px'',
							height: ''100px''
						},
						src: ''/static/logo.png''
					}
				]
			);
			setTimeout(() => {
				this.view.show();
			}, 300);
			this.view.addEventListener(
				''click'',
				e => {
					this.view.hide();
				},
				false
			);
 
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

将new plus.nativeObj.View对象赋给this.view

也可以直接写入data前面赋值。不过那样就不能用变量控制宽度。

离开页面记得隐藏，  hide()方法，否则一直在页面上，级别很高。

内置浏览器等无法看到，真机调试没问题。

三种方法基本使用，多看看代码实验几次就知道适合哪种。