uniapp-app视频层级过高问题

使用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."

最终代码:

javascript 复制代码
//视图 循环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
					})

最终实现效果

相关推荐
敲代码的鱼哇14 小时前
发送短信/拨打电话/获取联系人能力 UTS 插件(cz-sms)
android·前端·ios·uni-app·安卓·harmonyos·鸿蒙
MY_TEUCK2 天前
【AI开发】从0到1写一个uni-app Vue3 小程序开发的Skill:用法、流程与踩坑复盘
人工智能·uni-app
雪芽蓝域zzs2 天前
uni-app x uts类转换
uni-app
游戏开发爱好者82 天前
深入理解iOSTime Profiler:提升iOS应用性能的关键工具
android·ios·小程序·https·uni-app·iphone·webview
gskyi2 天前
UniApp Vue3 数据透传终极指南
javascript·vue.js·uni-app
gskyi2 天前
uni-app 高阶实战:onLoad与getCurrentPages深度技巧
前端·javascript·vue.js·uni-app
阿奇__3 天前
uniapp支付宝 H5 开发踩坑,hash模式下取参要规范!
开发语言·uni-app
云起SAAS3 天前
小智笔记APP源码 | 8大广告联盟聚合(穿山甲/优量汇/快手/百度) | 应用市场过审极速版 | uni-app全栈商用项目
笔记·uni-app·广告联盟·笔记app
蹦哒3 天前
UniApp 原生插件开发完整指南
uni-app
a_Ichuan3 天前
在HBuilderX创建的uniapp项目中使用unocss
前端·uni-app