使用v-html動態(tài)渲染
參考:uniapp video app端層級過高的問題,滑動渲染問題。_video在app端層級過高-CSDN博客
有想過使用原生,但是太麻煩了,然后換成了彈窗播放,但是動態(tài)的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."
最終代碼:
//視圖 循環(huán)lists列表
<view class="swiper-container" v-html="item.html" > </view>
//方法 循環(huán)添加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
})
最終實現(xiàn)效果
?文章來源:http://www.zghlxwxcb.cn/news/detail-811902.html
在小程序端是沒有視頻層級問題的,所以app和小程序做了一下兼容文章來源地址http://www.zghlxwxcb.cn/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 -->
到了這里,關(guān)于uniapp-app視頻層級過高問題的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!