芒果TV：嘘～这里是金典《歌手》现场秘密通道

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

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

识别图中二维码

嘘～这里是金典《歌手》现场秘密通道-查阅二维码

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

案例：嘘～这里是金典《歌手》现场秘密通道

出品：芒果TV

亮点：

策划上，视频类，加载完成后，点击“一键穿越”，进入一段1分59秒的视频。情节完整，内容如下：进入手机，穿越到《歌手》现场，进入二次元微信朋友圈，与汪峰、Jessie J（婕西·J）、李圣杰、张韶涵等面对面…最终回归现实，进入选择页面，此时，可点击“马上报名”或者“分享”。
设计上，视频采用第一视角，穿越进入《歌手》录制的现场及后台，进入二次元朋友圈，面对面回应歌手的邀请，情节很完整；真人视频，微信朋友圈、动漫等，采用了多种风格；配乐很有动感，当人物说话时，音乐音量有变化。
交互上，点击播放视频。
技术上，使用fastclick.js解决了点击事件的页面延迟问题。
体验上，整体给人感觉不错，但个人感觉声音细节上还是有一点没处理好，①对每位歌手做介绍时，只有Jessie J（婕西·J）配有说话的声音，其他人都没有；②开始手机中小姐姐邀请进入候，音乐的声音变小，但是后来有说话的时候，音乐的声音无变化，声音与音乐重合在一起，内容听不清。

技术实现： fastclick.js+ preloadjs.js+jQuery.js

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

标签