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
					})

最终实现效果

相关推荐
JIseven9 小时前
uniapp页面新手引导
java·前端·uni-app
不如摸鱼去11 小时前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·小程序·uni-app
小徐_23331 天前
uni-app 也能远程调试?使用 PageSpy 打开调试的新大门!
前端·微信小程序·uni-app
00后程序员张1 天前
HTTPS Everywhere 时代的抓包挑战,从加密流量解析到底层数据流捕获的全流程方案
网络协议·http·ios·小程序·https·uni-app·iphone
草字1 天前
uniapp 悬浮按钮支持可拖拽。可移动。
前端·javascript·uni-app
速易达网络1 天前
Uniapp + Coze智能在线课程平台应用实现方案
uni-app
Qlittleboy1 天前
uniAPP开发 image 标签的@error事件不被触发调用怎么办
uni-app
吳所畏惧1 天前
少走弯路:uniapp里将h5链接打包为apk,并设置顶/底部安全区域自动填充显示,阻止webview默认全屏化
android·安全·uni-app·json·html5·webview·js
2501_915921431 天前
Bundle Id 创建与管理的工程化方法,一次团队多项目协作中的流程重构
服务器·ios·小程序·重构·https·uni-app·iphone
2501_915909061 天前
深度解析 iOS 内存占用,构建多工具协同的内存诊断、监控与优化体系
android·ios·小程序·https·uni-app·iphone·webview