Adidas：领跑全场_H5案例分享

Adidas：领跑全场

2018-05-25 H5案例分享 H5案例分享

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

识别图中二维码

领跑全场-查阅二维码

完整欣赏此案例大约需要2分15秒

案例：领跑全场

出品：Adidas

亮点：

策划上，Adidas宣传新款跑鞋，除了首屏有哈登和宁泽涛的人物头像，其他都是以第一人称运动员的视角，演义Adidas的新款跑鞋，整体是一个1分46秒的视频。视频首先是主人公以第一视角，进入更衣室，打开柜子，看到了自己的新款跑鞋，视频第一次暂停，用户需要点击屏幕，下一个镜头，主人公穿上了跑鞋，进入了公园，视频第二次暂停，依次向上滑动屏幕，主人公开跑，跑到了训练场，视频第三次暂停，看到了跑步时了绕杆，需要用户按路径摇晃手机解锁，而后看到了教练，还是继续跑步，而后进入了一个室内训练场地，视频第四次暂停，快速点击屏幕两侧，而后室内训练，最最后，又回到了更衣室，跑鞋放回原来位置。最后一个镜头，新款跑鞋再次屏幕展示，显示点击屏幕留下电话号码，有机会获取新款跑鞋。
设计上，以真实的视频拍摄为主。
体验上，iPhone手机微信环境下，体验没有阻止屏幕默认滑动，左右或者上下滑动屏幕的时候，视频跟着动。还有一点可以优化，Video没有设置默认封皮poster，因为体验的时候，网络稍差，视频播放开始时，好长一段时间黑屏。

技术实现： CreateJS + jQuery + canvas + Video

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