关于微信小程序的视频的坑

雾凇高阶
• 阅读 7636

需求背景:最新在忙一个需求,就是小程序的课程详情的展示视频,如下图

关于微信小程序的视频的坑


video层级过高

在小程序的官方文档的话是有介绍的

关于微信小程序的视频的坑

目前解决的方案

  • 使用【cover-view】【cover-image】标签可以覆盖到原生组件中。
  • 视频方面的话是顶置在页面的最顶部,以视频层级为最高
video视频定位问题

详细说明:小程序的视频支持定位,但是在一部分手机上【不区分安卓和IOS】定位会造成视频底部黑底,如下图

关于微信小程序的视频的坑

目前的尝试过的方案:

  • 视频展示的时候弹遮罩层,整体页面overflow: hidden;底部的遮罩层使用fixed定位,保证IOS弹性滑动的时候看不到底部的样式,
  • 点击视频的时候跳转新的页面,在新的页面中展示视频,
  • 网上还有一些关于视频定位问题的解决方案还未考究
视频关闭的时候会有声音

详细说明:一个页面使用图片点击的时候展示视频,捕获视频的缩放和回退的时候隐藏视频,但是一部分的安卓手机还是能播放声音

目前不能解决、尝试的解决方案

  • 等视频隐藏的时候,增加一个状态值,在watch的时候【ps:wepy框架为例】检测值的变化,手动触发暂停,或者停止,但是似乎都没有理想的状态,还是存在问题
  • 通过状态值,清空video标签的src,但是会造成一部分手机加载不出视频的bug,初步认定是请求的延迟导致
其他可能遇到的问题
参考资料:

PS:关于小程序层级的问题,其实在爱奇艺、腾讯视频等小程序都是能实现的。希望有人看到这篇文章的时候能给与更好的解决方案

点赞
收藏
评论区
推荐文章
小森森 小森森
2年前
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦【区别】:微信小程序的代码与QQ小程序的源码是不一样的。微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
胡哥有话说 胡哥有话说
4年前
微信小程序支付功能全流程实践
前言微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑!知己知彼,方能百战不殆小程序支付流程图小程序支付交互流程图(https:/
秃头王路飞 秃头王路飞
2年前
微信原生小程序如何修改第三方样式
一级标题微信原生小程序如何修改第三方样式env:1.微信原生小程序(基础库2.272)2.tdesignminiprogram(最低基础库版本^2.6.5)近期在写微信原生小程序,有一个需求就是去修改一个第三方的库的样式,在写的
梦
4年前
服务号跳转微信小程序的坑
服务号跳转微信小程序一直报错{"errcode":40165,"errmsg":"invalidweapppagepathhint:8yDcBa01023942"}
Stella981 Stella981
3年前
App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转。可在“管理中心移动应用应用详情关联小程序信息”,为通过审核的移动应用发起关联小程序操作。唤起App打开下程序他有两种方式:1,通过App分享小程序卡片到微信,然后在微信上点击小程序卡片打开小程序,
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
E小媛同学 E小媛同学
1年前
如何将快递物流查询API集成到微信小程序中
在数字化时代,微信小程序为用户提供了便捷的服务体验。其中,快递物流查询是一个高频需求功能。本文将指导你如何将快递物流查询API集成到微信小程序中,为用户提供实时的物流跟踪服务。
linbojue linbojue
1年前
SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序
开发医疗小程序的技术选型和开发流程在开发医疗小程序时,可以根据具体需求和项目规模选择合适的技术选型。以下是一些常用的技术选项:前端开发:医疗小程序的前端开发可以使用基于HTML、CSS和JavaScript的框架和库,如Vue.js、React.js和An
linbojue linbojue
1年前
SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序
开发医疗小程序的技术选型和开发流程在开发医疗小程序时,可以根据具体需求和项目规模选择合适的技术选型。以下是一些常用的技术选项:前端开发:医疗小程序的前端开发可以使用基于HTML、CSS和JavaScript的框架和库,如Vue.js、React.js和An