苏宁易购：领导撤回了一条消息……

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

案例：领导撤回了一条消息……

出品：苏宁易购

亮点：

策划上，视频类。这是由苏宁易购在双十一来临之际所打造的一款宣传h5，也是一款戏精自我表演的h5，总共分为两个阶段。① 视频播放阶段。领导给主人公发了一条微信消息，然而主人公在逛淘宝，等点进去时，发现领导已经撤回了，继而开始了自己的戏精之路。后来领导在群里面回复了主人公的消息，原来是他不小心将一个优惠活动的链接分享错了，而这个优惠活动就是苏宁易购在双十一所举办的优惠活动，从而达到宣传的目的。② 视频播放结束后直接跳转到苏宁易购的官方购物网站，供用户浏览参观。
设计上，幽默可爱风格。① 发送框中文字的迅速变换表现了主人公内心的急躁和不安，戏精往往是自己忽悠自己的。② 粉红色的聊天背景，表现出主人公浓浓的少女心，与变换的文案相结合，可爱十足，也搞笑十足。
技术上，页面中的视频播放采用了html5中的Video标签技术进行实现，其中，用到了Video标签的属性有：“preload”、“playsinline”、“webkit-playsinline”、“x5-video-player-fullscreen”等。

技术实现： jQuery + Video

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

识别图中二维码

领导撤回了一条消息……-查阅二维码

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

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

标签