腾讯视频：杨幂的丧气治疗

2018-01-23 H5案例分享 H5案例分享

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

识别图中二维码

杨幂的丧气治疗-查阅二维码

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

案例：杨幂的丧气治疗

出品：腾讯视频

亮点：

策划上，①加载完成后，点击进入一段18秒的视频，视频内容是杨幂的霸气出场；②主题页面，从“伤心”、“生气”等选项中选择你的烦恼，进入不同的烦恼视频；③播放完成后，点击“解决烦恼去！”按钮，进入下一段视频，内容为杨幂解决你的烦恼，即送给用户腾讯视频VIP；④点击“收下了！”，进入最后一段视频。以解决烦恼入题，引出治愈良方——腾讯视频VIP，印象深刻。
设计上，整体部分采用多种风格，例如，杨幂出场时的大片既视感，烦恼解决过程中的手绘漫画风。配音极具趣味性，开门特效音，问题选择时的“哒哒滴”。本H5使用了很多的动画特效，整体代入感十足，生动有趣。
交互上，方式均为屏幕的点击。
体验上，该案例连接了多个视频，加载流畅，ios系统体验良好，但是安卓系统体验出现一些问题:①“我的烦恼”选择页面下部分动画元素无法加载，显示黑屏；②加载完成后，触碰界面任意位置都会进入视频，不满足设定，此时会出现一个短暂的黑屏。

技术实现： Egret(白鹭引擎) + video+js

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

标签