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

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

浏览量:694 时间: 来源:weixin_34168700

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

小程序


video层级过高

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

小程序

目前解决的方案

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

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

小程序

目前的尝试过的方案:

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

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

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

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

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎