使用v-html动态渲染
参考：uniapp video app端层级过高的问题，滑动渲染问题。_video在app端层级过高-CSDN博客
有想过使用原生，但是太麻烦了，然后换成了弹窗播放，但是动态的src播放失败，错误提示：
chunk-vendors.js:14882 Uncaught (in promise) DOMException: The element has no supported sources.
Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite."
最终代码：
//视图 循环lists列表
<view class="swiper-container" v-html="item.html" > </view>
//方法 循环添加html属性
this.lists.forEach(item=>{
let html=`<video muted controlslist="nodownload" controls="controls" src="${item.images[1].image}" poster="${item.image}" style="height: 500rpx;width: 100%"></video>`
item.html=html
})最终实现效果
文章来源：https://www.toymoban.com/news/detail-811902.html
在小程序端是没有视频层级问题的，所以app和小程序做了一下兼容文章来源地址https://www.toymoban.com/news/detail-811902.html
<!-- #ifdef MP-WEIXIN -->
<view class="swiper-container" v-if="item.images[1]&&item.images[1].type==20">
<video
:src="item.images[1].image"
style="width: 100%;height: 450rpx;"
></video>
</view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="swiper-container" v-html="item.html" > </view>
<!-- #endif -->到了这里，关于uniapp-app视频层级过高问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
