优酷:长安迷局
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要2-5分钟
案例:长安迷局
品牌:优酷
亮点:
1. 创意定位上
为《长安十二时辰》电视剧推出的宣传H5,我身边的伙伴,时不时说这部电视剧如何的好看。看到这支H5,再次为这部电视剧吸引一大批的用户,忠实用户会情不自禁转载,像我这种,已经决定下班后,回家补补《长安十二时辰》电视剧。
2. 策划上
探案的方式,点击首屏的“开”按钮,是文字的形式,叙述故事的背景,向下滑动,2个人物角色选择“张小敬”“李必”;
选择你的人物角色,分别3次交代故事,每个给出你的2个选择,每个故事分别对应勇气值、智力值、武力值,选择比较合理,会提示对应的值增加;
三次选择完毕,可以查看你的长安身份。最后可以重新查案,就是在玩一次;也可以猛戳还原真相,会跳转优酷的《长安十二时辰》电视剧播放列表。
3. 设计上
还原了宣传海报中的红色和蓝色,画面采用案例中的电视剧视频截取和电视剧中的真实人物。
4. 技术上
案例中,看着像视频的部分,采用gif格式的动图实现,这样的好处是既可以兼容iphone又可以兼容安卓,因为如果是video格式,在安卓下播放,不能完成案例中页面中局部播放的效果。
5. 体验上
案例中有1个人物角色选择,和3处故事发展选择,每次选择,后续的内容都不同,特别有意思,所以我反复玩了多次,深深的被《长安十二时辰》吸引。
技术实现: kimi.js + video
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号