最近项目中遇到这样的一个问题，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里面引入注册文章来源：https://www.toymoban.com/news/detail-741459.html
import nVideo from '@/components/nVideo.vue'
Vue.component('nVideo', nVideo)
大小样式等根据自己项目去调整文章来源地址https://www.toymoban.com/news/detail-741459.html
<nVideo :src="videoUrl" style="height: 200px;width: 100%;"></nVideo>
到了这里，关于uniapp中video层级太高解决方案，适用安卓/IOS/H5的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
