uniapp中video层级太高解决方案，适用安卓/IOS/H5

最近项目中遇到这样的一个问题，uniapp视频播放组件在h5上面上可正常使用，但在打包成app（安卓/IOS）时，发现了Video组件层级太高或者在页面中不跟随页面滚动等问题。

官方给出的方案比较繁琐复杂，因此自己写了一个简单粗暴的组件，利用iframe实现

1.我们直接新建一个nVideo.vue的组件

2.在需要使用的地方直接引入使用这个组件，只需传src视频地址进来即可

话不多说，直接上代码

<template>
	<iframe :onload="onloadCode" style="width:100%;height:100%;border:1px solid #fff;background: #000;"></iframe>
</template>
<script>
	export default {
		props: {
			src: {}
		},
		data() {
			return {
				onloadCode: ''
			}
		},
		created() {
			this.onloadCode =
				`this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="${this.src}"></video>';`
		},
	}
</script>
<style lang="scss">
</style>

直接在需要用到的地方引入使用即可

import nVideo from '@/components/nVideo.vue'

使用频率高的话可全局注册,在main.js里面引入注册

import nVideo from '@/components/nVideo.vue'
Vue.component('nVideo', nVideo)

大小样式等根据自己项目去调整

<nVideo :src="videoUrl" style="height: 200px;width: 100%;"></nVideo>