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 = '
';`},}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>

来源地址：https://blog.csdn.net/oushulin/article/details/132192455