某H5项目的总结 （一）

项目结束 总结下遇到的问题 项目分为三个部分

项目背景

公司是一个顶尖的时尚公司 所以对HTML5 要求 就几点 时尚 大方 操作灵活，拿到设计稿后。页面共计7页 但是估算了下动效部分占 40多处 。总体说说这个项目 和遇到的坑吧

前端html5

进过几种方案的比较 也对目前自己的技术评估 选用Phaser.js+zepto的方式 Phaser.js主要是做HTML5游戏 但是根据动画数量和整体场景 所以选择此框架

• 双预加载

  根据需求 加载时候就有2个动画点 其一 ：宣传的奖杯 其二 滚动的文字（第一版滚动文字更加复杂） 其次就是进入加载状态时候 就有背景音乐播放

  旋转的奖杯：是不规则的旋转，最简单实现自然是帧序列图片的方式。 其他的方式没有尝试.后续有其他的方式望大神门告知
  滚动的文字：间隔1.5秒 显示一次跑马灯 效果很简单 不做详细描述

• 背景音乐
  这个才是巨坑。 需求是加载完毕后就自动播放音视频 。 chrome和safari测试了下 都不可以 必须用户触屏一下。 唯一可以的是在微信浏览器里 这应该是微信自己做了什么处理 ~ 微信自动播放音视频 主要是两种

  1：野方法 WeixinJSBridgeReady 的方式 这个网上有很多实现 就不列举了 但是特别备注 这种方法 在部分安卓机里是不可以用的 比如vivo部分机型 。而且也许在未来就全部都不可以用了
  2：微信JS-SDK的方式 这个是基于微信JS-SDK的方式 具体参考微信文档 需要后端支持

• 自动播放视频
  项目需求里加载完毕 就自动播放视频。 chrome和safari 都需要点击后才可开始 参考了几个比较成熟的H5专题
  1 加载完毕后 让用户点击后开始 从产品流程上解决
  2 转成序列帧的方式 这种方式目前是比较理想的。缺点就是如果是带音频的 就比较麻烦 而且视频转成图片后 8秒多的视频 200多张图大了不少 。不过可以动画加序列帧的方式 具体就看技术能力了。