中国移动：中国移动

2017-11-15 H5案例分享 H5案例分享

案例：中国移动

出品：中国移动

亮点：

策划上，视频动画类，① loading结束，进入大门后，一个粉色的像是来自外星的小东西，邀请各位到神秘世界探索。两个角色可供选择，是呈黄色且活泼的Bill呢？还是呈粉色美丽的Eva呢？他们可都是来自太阳的哦~。② 选好角色后登上飞船去到各个工厂，先飞到流量工厂，而后点击流量圈，将其派送出去；而后再到充值工厂将代表通话、短信、流量的能量球当道对应的位置，用来分析账单，分析成功后，继续探险，进行话费派送；然后来到客服工厂，快速点击按钮，帮客服接通20同电话；③ 帮助成功则飞到10086微信公众号，套餐查询、充值缴费、在线客服、优惠活动尽在此，还可去点击赢2G哦。
设计上，科技风，以蓝色为主基调的画面呈现出一副高科技的样子，男生Bill和女生Eva都很可爱，坐上飞船到各个工厂遨游一番的画面充满想象力。
交互上，将代表通话、短信、流量的能量球当道对应的位置采用的是拖放的交互形式，其他交互主要采用的是点击方式。
技术上，里面的动态画面在ios下主要采用的是Video + Video.js；Android下主要采用的是Video + JSMpeg.js。

技术实现： jQuery + Video.js + JSMpeg.js

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

中国移动-查阅二维码

完整欣赏此案例大约需要1分20秒

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签