2018年度问题整理

1. 倒计时

  • 【锁屏处理】 使用setInterval进行倒计时，锁屏时会中断执行。需要通过visibilityChange事件处理。
  • 【精确度】 长时间的倒计时不精准，在低端手机下尤其明显。进入页面时获取服务器时间和本地时间的差值，服务器时间作为初始时间，用setInterval每隔400毫秒更新一次时间戳作为当前时间，每隔1分钟获取本地时间与进入页面时的本地时间对比作为校准值，校准当前时间。

2. 视频

  • 【自动播放】 只有ios10+支持无音轨/设置静音的视频自动播放，其他情况下都需要用户手动触发（click/touchstart事件） ，可考虑的降级方案有低端机下用GIF/逐帧动画（建议帧数不超过30帧，超出在部分手机上有闪屏情况出现）代替。
  • 【预加载】 设置preload表示在页面加载后马上加载，个人通常的做法是设置该属性，src置空，在需要播放的时候再设置src，以此达到按需加载的目的。
  • 【微信/部分浏览器video层级】 在安卓机下，微信和部分浏览器中，video总在最顶层，且暂时没有发现覆盖它的方法。微信端目前唯一的解决方法是成为白名单(2019.01.06)，浏览器暂时无解。
  • 【iphone默认全屏播放】 在video标签中添加属性<video playsinline="true" -webkit-playsinline="true"></video>。
  • 【锁屏处理】 锁屏后应当暂停视频，同采用事件visibilitychange处理。
  • 【浏览器下暂停有广告】 浏览器原生插入的广告，暂时木有办法。可考虑的处理方案是在视频暂停时将视频缩小为1px * 1px用一张图片占位。
  • 【视频上传地址】 ViOS和安卓需要分别上传到两个服务器，ios上传到http://storage.jd.com/*，在oss.jd.com上传。安卓上传到https://static.360buyimg.com/*域名下，需要木木和李杰提交，寒冰审批。

3. 音频

  • 【自动播放】 需要用户手动触发才可播放。
  • 【循环播放有停顿感】 音频的前后衔接最好有淡出淡入，手机原生播放器循环播放音频时会有近1秒的停顿，如果没有淡出淡入会有停顿感。
  • 【静音】 iOS8及以下，IE9及以下不支持muted属性。
  • 【初始化延迟】 iOS Safari浏览器初始化一个新的音频有延时，因为iOS需要实例化一个新的音频对象再通过网络请求音频资源。解决方案是在页面ready之后把每个文件都load，提前预加载。

4. 运营模式

  • 【自定义模块延后加载】 头图最好用运营模块占位，然后再用自定义代码往上加功能，保证首屏加载的时候，头图的位置没有重排重绘，也可以防止下面的楼层往上顶，占用首屏加载资源。