鲁商置业：孔子出道2567年个人EP首发，竟然是为了…

2016-08-17 H5案例分享 H5案例分享

案例：孔子出道2567年个人EP首发，竟然是为了…

出品：鲁商置业

亮点：

策划上，视频类，①H5的开头，孔子亲自解锁，随着音乐响起的瞬间，金链墨镜加身，开始中式说唱音乐：《奥运我撑你》；②而后巧妙地用谷歌地图的导航，让孔子坐飞机来到里约，以真实的地图界面配合有里约特色的场景，魔性十足；③ 孔子把和中国队合影的照片Po上Instagram，并且小心机的将活动主题“奥运我撑你”的作为标签植入，然而更多的惊喜在于Ins下面的留言；④ 在说唱音乐结尾处将鲁商置业巧妙融入歌词，视频结束，点出活动内容，不易引起用户反感。
设计上，中国风漫画+rap歌词，超级魔性啊。
技术上，主要采用的是html5的video，视频预加载是否完成是用video的canplay事件来判断的。
体验上，视频比较大，而且是用video的canplay事件是可以判断视频是否已准备好播放，但不能够预计指定的音频/视频在不停下来进行缓冲的情况下持续播放，事实上这个视频确实在播放的过程中容易卡顿。

技术实现： jQuery + TouchJs

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

识别图中二维码

孔子出道2567年个人EP首发，竟然是为了…-查阅二维码

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

标签