记录下最近开发的微信公众网页中坑(微信中。。微信中。。微信中。。。)
关于自动播放
- 音视频不能自动播放是移动端的常见坑,虽然可以通过监听用户手势操作播放(这还算哪门子的自动播放..zz..),但是微信提供了 wx.ready 可以实现音频以及视频的自动播放(简直是程序猿的福利啊~),但是依然有点小坑
- 根据自己试验的结论,只有首次调用 wx.config 后 首次调用wx.ready 才能自动播放,非首次直接失效了,心塞哇,我在项目中处理音频使用了soundjs (和preloadjs搭配使用感觉还阔以..但是createjs的文档简直无法用语言形容..自行体会..),经尝试发现 ,在首次wx.config 后,首次调用 wx.ready中写上一句 createjs.Sound.play('') 就完美的解决了这个问题(emm…简直是试着写代码…),这种情况下,至于视频,实在是没办法了
关于自定义视频播放器
- 产品有个额外的需求就是播放不可以自动全屏,必须用户主动点击全屏
- 写上 x5-playsinline="true" playsinline="true" webkit-playsinline="true" 就可以完美实现内敛播放
- IOS 不会全屏,但是安卓浏览器层级贼高,设置了 x5-video-player-type="h5" 你才能在上边放东西 ,比如自定义控制条 ,但是很狗血的是这么一写只要你播放他就会自动全屏 。之前设置的playsinline就失效了(这是传说中的鱼和熊掌不可兼得??? 黑人问号脸.jpg)是真的难受
- 当时由于之前没有接触过音视频相关的项目 不知道这么多坑 自定义播放器都写好了到公司用安卓机一看立马傻眼