video视频背景层级过高解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了video视频背景层级过高解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app开发的项目中使用video标签设置视频做为页面背景，video标签层级过高，页面中内容不展示。
官方提供了三种办法：

1、cover-view、cover-image

小米手机浏览器video层级过高,音视频,css,javascript

cover-这个标签使用说明：这个标签APP端它不支持嵌套，就是就算这种都是不支持的，所以如果你的页面比较复杂的话这种方法是不行的，页面元素简单的话倒是可以直接用这个标签解决。

2、subNVue 原生子窗体（我的页面比较复杂我选用的这种方式解决的）

前景：小米手机浏览器video层级过高,音视频,css,javascript

复杂的页面只有这种方法可以解决：subNvue使用指南
在这里总结一下nvue写法的特点：
(1)、文本只有写在<text></text>标签内设置颜色字体样式才有效
(2)、nvue中不支持%，vw，wh，只支持rpx(注意rpx跟vue中的rpx不一样)，px,用到适配的话建议用rpx，不用适配的话用px也可以
(3)、nvue只支持flex布局，默认是竖排
(4)、设置页面全屏写法width:750rpx;flex:1
(5)、nvue适配：
默认宽都是750，如果你的设计稿是1920*1080的，某个元素40*80，那么它的大小就是宽：（40750)/1920；高就是(80750)/1080；在css中设置正确的尺寸。
在page.json中设置：

在manifest.json中设置：
(6)、文字超出隐藏写法：

NVUE下要用lines这个属性，来让文字超出隐藏变省略号

            overflow: hidden;
			lines: 2;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;

下面来介绍如何使用原生子窗体覆盖视频：
在page.json中设置子窗体：

       {
			"path": "pages/video/index", //设置视频的页面
			"style": {
				"app-plus": {
					"scrollIndicator": "none", //当前页面不显示滚动条
					"subNVues": [{
						"id": "content", //子窗体页面的id
						"path": "pages/video/subnvue/detail",//页面路径
						"style": { //子窗体样式，如果需要视频做背景需要设置背景透明，宽高百分百
							"width": "100%",
							"height": "100%",
							"background": "transparent",
							"z-index":99
						}
					}]
				}
			}
		},

index.vue页面：

<template>
	<view class="detail">
		<video src="../../static/img/bg.mp4" class="video" muted loop :controls="false" object-fit="fill"
			:show-center-play-btn="false" autoplay></video>
	</view>
</template>

<script>
	export default {
		onLoad() {
			let subNVue = uni.getSubNVueById('content') //设置子窗体
			subNVue.show('slide-in-left', 200, () => {
				console.log('subNVue 原生子窗体显示成功');
			})
			
		},
		onUnload() {
			uni.getSubNVueById('content').hide('slide-out-left', 200); //页面卸载的时候要隐藏子窗体，子窗体会一直展示
		}
	}
</script>

<style lang="scss" scoped>
	.video {
		width: 100vw;
		height: 100vh;
	}
</style>

detail.nvue页面

<template>
	<view id="content">
		<!-- 页面内容 -->
	</view>
</template>
<script>
	export default {
	   onLoad() {
			let that = this
			//监听接收参数
			uni.$on('sendParams', function(params) {
				console.log(params)
			})
		},
		onUnload() {
			// 移除监听事件
			uni.$off('sendParams');
		},
		beforeCreate() {
		    //设置自定义字体
			const domModule = uni.requireNativePlugin('dom')
			domModule.addRule('fontFace', {
				'fontFamily': "YouSheBiaoTiHei",
				'src': "url('网络地址')"
			});
		}
	}
</script>

注意点：
在nvue中不能直接使用挂载到vue上面的方法，比如封装的request请求，需要在nvue页面单独引入使用
例如接口请求需要引入，不能直接使用this.$api：

<script>
import api from '@/api/index'
export default {
    methods:{
        getList(){
           api.getlist().then(res=> {})
         }
    }
}
</script>

传参使用$emit $on
$emit要在跳转到video这个页面的时候就要触发，要不然子窗体接收不到参数文章来源地址https://www.toymoban.com/news/detail-780310.html

// 详情
goDetail(item) {
	uni.navigateTo({
		url: `/pages/video/index`,
		success: () => {
			uni.$emit('sendParams', {
				id: item.id,
				type:item.type
			});
		}
	})
},