已经9102年了,终于想起了2018年年底整理的总结,翻出来炒个冷饭。
一、JS基础
-
【文字垂直居中】 安卓机下常见垂直居中偏差,典型机型:华为/小米
// 1. 最直观的方案 display: inline-block; line-height: 1; // for ios padding: 0 0; vertical-align: middle; // 2. 宽/高/字号设为原来的2倍,通过transform,iOS下有偏差 height: 2x; width: 2x; font-size: 2x; transform: scale(.5); transform-origin: left center; // 3 目前测试看来兼容最好的 &:after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 100%; margin-top: 1px; } 复制代码
-
【babel ios8】 适配ios8+和ie9+的babel转译规则设置
{ "preset": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"] } 复制代码
二、倒计时
-
【锁屏处理】 使用setInterval进行倒计时,锁屏时会中断执行
document.addEventListener('visibilitychange', ()=>{ if(document.hidden) { // 页面被挂起 } else { // 页面呼出 // 校准时间 } }) 复制代码
-
【精准度】 长时间的倒计时不精准,在低端手机下尤其明显
原因:setTimeout/setInterval本身计时不精准,长时间的误差累加较明显
解决:进入页面时获取服务器时间和本地时间的差值,服务器时间作为初始时间,用setInterval每隔400毫秒更新一次时间戳作为当前时间,每隔1分钟获取本地时间与进入页面时的本地时间对比作为校准值,校准当前时间。
三、视频
- 【自动播放】 只有ios10+支持无音轨/设置静音的视频自动播放,其他情况下都需要用户手动触发(click/touchstart事件)。对于无音轨视频,可考虑的降级方案有低端机下用GIF/逐帧动画(GKA工具)代替。
- 【预加载】 设置preload表示在页面加载后马上加载,个人通常的做法是设置该属性,src置空,在需要播放的时候再设置src,以此达到按需加载的目的。
- 【微信/部分浏览器video层级】 在安卓机下,微信和部分浏览器中,video总在最顶层,且暂时没有发现覆盖它的方法。微信端目前唯一的解决方法是成为白名单(2019.01.06),浏览器暂时无解。
- 【iphone默认全屏播放】 在video标签中添加属性
<video playsinline="true" -webkit-playsinline="true"></video>
。 - 【锁屏处理】 锁屏后应当暂停视频,同采用事件
visibilitychange
处理。 - 【浏览器下暂停有广告】 浏览器原生插入的广告,暂时木有办法。可考虑的处理方案是在视频暂停时将视频缩小为
1px * 1px
用一张图片占位。 - 【视频资源会发出3次请求】
- 原因分析详见张鑫旭大佬的分析:www.zhangxinxu.com/wordpress/2…
- 简述:解释了一下页面中某些video资源会请求3次的原因,文章中修复方案实测有效。除此之外发现使用http链接,请求依旧会有2次,第一次请求的code为307,原因是后台做了强制https访问的限制(基于HSTS),改用https链接问题解决。
四、音频
-
【自动播放】 需要用户手动触发才可播放
-
【循环播放有停顿感】 音频的前后衔接最好有淡出淡入,手机原生播放器循环播放音频时会有近1秒的停顿,如果没有淡出淡入会有停顿感。
-
【音频切换方案】
-
采用切换audio标签
src
属性的方法。缺点是在iOS下有一定的延时(因为ios不能缓存音频) -
声明多个audio标签把需要的视频预先引入,需要哪个播哪个。缺点是在iOS下一个audio占一个线程,若有多个audio很占资源
-
将多个音频合并为一个文件,播放音频时只需播放相应时段
<audio id="audio"> <source src="http://storage.jd.com/babel-open/1211bumbleBee/hapN.mp3" type="audio/mpeg" /> </audio> <button onclick="playSprite('happy')">Play happy sprite</button> <button onclick="playSprite('nervous')">Play nervous sprite</button> <script> var audioSprite = document.getElementById('audio'); // sprite data var spriteData = { happy: {start:0, length:3}, nervous: {start: 4, length: 3} }; // current sprite being played var currentSprite = {}; var onTimeUpdate = function () { if(this.currentTime >= currentSprite.start + currentSprite.length) { audioSprite.currentTime = currentSprite.start; audioSprite.play(); } }; audioSprite.addEventListener('timeupdate', onTimeUpdate, false); var playSprite = function (id) { if(spriteData[id] && spriteData[id].length) { currentSprite = spriteData[id]; audioSprite.currentTime = currentSprite.start; audioSprite.play(); } }; </script> 复制代码
-
-
【静音】 iOS8及以下,IE9及以下不支持muted属性
-
【初始化延迟】 iOS Safari浏览器初始化一个新的音频有延时,因为iOS需要实例化一个新的音频对象再通过网络请求音频资源。解决方案是在页面ready之后把每个文件都load,提前预加载。
$(function() { $('#audio1').load(); $('#audio2').load(); }) 复制代码