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

yimo 发布于2019-08-23 13:54 / 1231人阅读

摘要：需求背景最新在忙一个需求，就是小程序的课程详情的展示视频，如下图层级过高在小程序的官方文档的话是有介绍的目前解决的方案使用标签可以覆盖到原生组件中。

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

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：关于小程序层级的问题，其实在爱奇艺、腾讯视频等小程序都是能实现的。希望有人看到这篇文章的时候能给与更好的解决方案

超融合服务器混合云微信小程序实时音视频不用编程制作微信小程序视频微信小程序的功能微信小程序的开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99746.html

吃货福利get-今日美食food微信小程序

摘要：微信小程序仿今日美食初学微信小程序，嗯，还不错嘛，挺有趣的于是自己动手撸了一个。开发工具下载开发者工具微信小程序官网，下载好后就可以进行开发了哟。 wechat-todayFood 微信小程序仿今日美食food 初学微信小程序，嗯，还不错嘛，挺有趣的！于是自己动手撸了一个?。你别说一看标题就知道我是吃货呀，我是不想这么快就被揭穿的，但是这个小程序就是这么有意思呀。好了我要进入正题了，...

loostudy 2019-08-20 18:17 评论0 收藏0
吃货福利get-今日美食food微信小程序

摘要：微信小程序仿今日美食初学微信小程序，嗯，还不错嘛，挺有趣的于是自己动手撸了一个。开发工具下载开发者工具微信小程序官网，下载好后就可以进行开发了哟。 wechat-todayFood 微信小程序仿今日美食food 初学微信小程序，嗯，还不错嘛，挺有趣的！于是自己动手撸了一个?。你别说一看标题就知道我是吃货呀，我是不想这么快就被揭穿的，但是这个小程序就是这么有意思呀。好了我要进入正题了，...

Jason_Geng 2019-08-29 12:59 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0