Olay：小游戏_H5案例分享

Olay：小游戏

2016-06-23 H5案例分享 H5案例分享

案例：小游戏

出品：Olay

亮点：

策划上，游戏类，这支H5采用明星深度植入H5脱颖而出的方式，选用的明星是当红小鲜肉“李易峰”，点击录音，在一秒内蓝色进度条读满前说出你的名字，即可进入到大家熟悉的朋友圈页面，朋友圈李易峰的小视频让人眼前一亮，李易峰还鼓励大家是用Olay产品，一起成为更美的自己
设计上，采用水蓝色作为主色调，色彩清新，仿佛充满水分
交互上，由首屏进入到模拟朋友圈采用的是说出名字、录音上传的方式，实际上这支H5虽然也调用了微信的录音功能，但实际上无论你说没说话或者说什么，在一秒后蓝色进度条读满后，都会跳转到模拟朋友圈那一页
技术上，里面嵌入的video视频，实际上都是写到Canvas画布里的，这样可以更好的保证视频在多种机型下播放
体验上，这里的视频确实能在多种机型下播放，但是在有的安卓机下，声音却不能正常播放~

技术实现： jQuery

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

识别图中二维码

小游戏-查阅二维码

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