滴滴：谁是骑行杀？

2018-07-25 H5案例分享 H5案例分享

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

识别图中二维码

谁是骑行杀？-查阅二维码

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

案例：谁是骑行杀？

出品：滴滴

亮点：

策划上，以“谁是骑行杀？”为中心展开，问答形式，问题围绕骑车坏习惯，一共设置了8个骑行问题。点击首屏的[开始考证]，开始问答，5秒时间二选一（A、B两个选项），选出危险的骑行习惯，即可过关。选择了答案后，会有一段有趣的视频，讲述该问题，骑行杀的骑行习惯，当然如果你5秒内，没有选择，也会自动播放视频，代表你选错。视频播放完毕，会给出A、B哪种行为是骑行杀。回答了8个问题后，如果你全答对，给出“你已成功考下骑行驾照”；如果有答错，那么你就是“骑行杀本人”。都答对，还有领取滴滴骑行劵的奖励，小五已经领取了。
设计上，扁平卡通风格，萌萌的卡通主角。
技术上，整个案例采用一个video标签，这就代表着，没有提前预加载用到的8个视频。这个案例的技术是如何做到视频减少卡顿呢？这个案例采用的是当问题出现时，加载该问题用到的视频，还记得问题回答时间5秒吗？是的，技术工程师就是利用这5秒来缓冲视频。
交互上，横屏锁屏观看，点击回答问题。

技术实现： jQuery + video

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

标签