天猫：比天气更热的是？

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

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

识别图中二维码

比天气更热的是？-查阅二维码

完整欣赏此案例大约需要1分25秒

案例：比天气更热的是？

出品：天猫

亮点：

策划上，视频类，这是对天猫618 理想生活狂欢季的宣传，视频全长1分18秒。加载完成后，点击“开始”按钮，播放视频，视频有三个主角，点击页面的“跟着节奏切换主角”按钮，切换到另一主角的视频画面，这三个主角看似毫无关联，但随着视频情节的发展，为用户揭晓了答案，回答了本H5“比天气更热的是？”问题，“趁热·造热”。画面依次展示了“激情”、“活力”、“态度”、“勇气”、“信念”、“决心”、“热爱”、“理想”以及“生活”九个关键词，表达了天猫618理想生活狂欢季的宣传要点，视频结束后，显示活动的时间等信息，页面下方有一个“趁热重演”按钮，引导用户再次观看体验。
设计上，真人视频，真实感很强，搭配带感的音乐，用户体验良好；三个主角切换后的画面风格统一，没有违和感。
体验上，视频处理是这个H5 最大的亮点，三个视频的切换流畅自然，表现当下年轻人的崇尚的“趁热·造热”活法，体验不一样的风格，走出去，释放自己的青春与活力，带给用户动感与活力。

技术实现： howler.js+vue.js+video

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

标签