小程序 H5页面video的适配问题

小程序 H5页面video的适配问题

事件背景：事情是这样的，我们和另一公司一起为甲方爸爸做个小程序，我们提供H5页面，另一方提供小程序，项目已经交付，但是后来呢，顾客反馈，H5页面的视频无法播放；额，bug来了

排查问题：

1.微信直接打开h5网页链接，电脑打开h5网页链接，没有异常；

2.将h5嵌套到我们自己的小程序中，通过微信开发者工具打开，没有异常；

3.将小程序上传体验版，测试手机打开，呜呜，ios没有问题，android不显示；

终于定位：1小程序与微信版本更新导致的，系统问题；

通过大量查找文档，尝试，缩小了范围：H5中的video标签，ios可以支持autoplay，安卓不支持，但是项目需要进入该页面就有一个视频播放，怎么办呢？小菜鸡的小聪明上线（实际上做了无数次尝试。。。）

下面上图

初：

后：

现在开始解释：

因为自动播放autoplay在安卓系统不支持，所以要利用video.play()方法，

进入该页面之后，获取video标签，并利用video.play()让video播放，但是此处需要注意，进入新页面，页面加载需要时间，但是进入该页面的函数是立马执行的，所以要用延迟函数（setTimeout）,否则的话，获取不到video（会导致失败）。Video获取不到的原因：是页面渲染加载机制问题，同时也是因为html中之前用了v-if判断，事件没有触发的时候，dom树中video还没有生成；

我这边的项目视频是黑色背景的，但是视频需要缓冲一段时间才能开始播放，所以我们这边选择了黑色的背景图，这样的话，在初始的时候，就不会有没有空白的阶段，所以大家可以按照自己的项目，设置预览图；

至于为什么不用controls，因为客户要求，再者，我也觉得，点击按钮之后，切换到对应视频之后，还需要点击才能播放的话，操作复杂，不喜；

希望我的经历可以给大家提供思路...

小程序 H5页面video的适配问题相关推荐

微信小程序h5页面分享设置
前言(废话): 最近开发新项目,因为公司希望能在开发完h5后顺便吧微信小程序也上了,但是人力有限,只能做到h5,开发小程序压根做不到,只能投机了, 我真是个机灵鬼... 然后我就看API,咦,贼拉简单 ...
CRMEBV4小程序H5页面端宝贝列表分享海报以及会员中心分销推广不显示的常见问题解决
上次给大家带来了CRMEB标准版和基础版分享海报不显示的问题,这里再此做一个补充,还未看之前的帖子,请先看,如果不能解决再对照本方法处理, 上次的方法:https://blog.csdn.net/id ...
微信小程序H5页面API红包代发接口
开发者在日常涉及到给小程序.H5等应用嵌入微信红包时,有一个坎是必须要迈过的,那就是需要有一个具备红包发放权限的商户号,但因相关权限准入门槛过高,短时间内无法取得相关权限,所以很是让开发者为难,那么有 ...
APP自动化_操作微信小程序/H5页面实现自动化_多终端并行
APP自动化_混合App自动化理论相关原理:本质是混合app,应该用切入webview的方法去自动化web页面. 现状:目前由于技术原因无法切到webview中做自动化. 方案:采用原生app自动方 ...
【天天外链】支持H5链接跳转到企业小程序任意页面！
除了传统的固定外链模式,天天外链现在支持H5/链接跳转到企业小程序任意页面. 提前准备在天天外链官网小程序/后台注册[天天外链],使用密钥版添加您的小程序(输入配置参数即可) 创建一条推广链接(简单 ...
小程序中页面兼容h5标签的解析
有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 有个工具可以做到:wxParse 下载 ...
使用Flexible实现手淘H5页面的终端适配
转载自:使用Flexible实现手淘H5页面的终端适配更多参考:移动端高清.多屏适配方案移动端应该如何动态设置字体大小? 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟 ...
android 挖孔屏适配_使用Flexible实现手淘H5页面的终端适配
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
使用Flexible实现手淘H5页面的终端适配【转】
曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...

小程序 H5页面video的适配问题

小程序 H5页面video的适配问题相关推荐

最新文章

热门文章