为什么说，QQ空间用了12年，做了这支H5？
QQ空间，可以说是大家最熟悉的互联网社交平台，它是我们学徒时代的精神角落，它是我们校园生活的青涩回忆。
如今，作为国内最早社交平台之一的QQ空间，在今年度过了12岁生日。为庆祝此次生日，QQ空间团队展开了一场名为“总有故事，不负光阴”的线上推广活动。而此次活动的主角儿，就是下面的这支H5了，如果你还没有看过，就赶紧体验一下吧！
总有故事，不负时光
这里，我们为用户录制了H5内的MV视频，
一些用户第一次看到的可能是花絮，而非MV内容视频
https://v.qq.com/txp/iframe/player.html?vid=w05291kh4f3&width=500&height=375&auto=0
H5内置主屏视频录屏演示
这支H5为什么非要拉我到QQ应用呀？自己QQ空间的照片又是怎么蹦到了视频里的？？？这些设计是不是让你感觉非常惊奇？咱们在聊内容前，还是先看看这支H5的技术亮点吧：
H5图片效果是怎么实现的？
尤其是最近，国内的互动团队天天都在变着花儿的忙活着做H5视频，但这种能和用户产生真实互动的视频，咱们之前是没见过的！作品给你带来的新鲜感，让你特别想知道这效果究竟是怎么实现的？难道H5的技术又大跃进了不成？？？
大家应该还记得，在看H5之前，你被拉到QQ APP的这个细节吧？别觉得多余，这是有原因的，因为APP属于Native原生开发环境，可以实现很多比H5强大的功能和效果，在APP下，H5可以直接调用在微信下无法实现的效果和命令，就像是咱们看到的这支H5内置视频，他是因为借助了APP的功能，才实现了复杂的视频在线即时渲染生成。
官方提供的视频数据原理设计图
（普通用户知道是借助APP技术就可以了）
也就是说，你以为自己在玩H5，实际你在玩的是APP里的一个视频合成应用。因为网站体验做的特别好，所以大多数用户没有意识到这个问题，H5引导你来到了这个视频合成小应用，属于H5的部分实际上，就是最初的引导页面，如下图。
我相信，这支H5刷屏后，肯定会有很多甲方会要求自己的代理商做个一样的，但稍微了解些技术的人都知道，没有个APP给你做后援，这种H5是搞不起来的。引导用户到QQ应用，一方面是因为项目的主题与应用有关，另一方面，是因为可以在APP内实现神奇的视频渲染效果！
项目前期的分层效果图
那么是不是说，不捆绑个APP，这种效果就真没的玩了？就本案例来说，纯前端的笨招还是有的，你可以先做好一支现成的视频，因为视频内容是固定不变的，自然在视频哪图片的展示位置也是固定不变的。借助这个特征，我们可以将图片的位置、大小、角度、位移都预先设置好，将要更换的内容覆盖在视频上一层，然后根据不同用户登陆后，来更换图片。虽然这样处理出来的“伪合成视频”在拟真度上要差一些，但大效果是差不多的，这就是前端的解决办法，可实现，但效果会打折！
本案例，还有一个有趣的技术就是 —— QQ AR人脸识别，用手机上安装的最新版QQ应用的扫一扫描功能对着杨洋的脸进行扫描，你也可以直接跳转到这支H5网站，这个功能应该是为线下设计的，在线上体验中并没有太多施展空间。
在技术部分最后要提的是，很多用户打开H5后看到的不是咱们一直在聊的回忆MV，而是一段关于杨洋制作MV的花絮片段，这难道是我又点错了不成？？
因为要跳转到QQ才能观看到这支为你定制的视频，所以说，想体验案例视频，需要用户登陆QQ ，并且你的QQ空间要有足够多的公开照片。
H5内置MV分享效果
讲到这里，我们对H5的实现方式有了一定了解，但用户更感兴趣的是，为啥杨洋能代言QQ空间？
QQ空间为什么会找杨洋代言？
《王者荣耀》选了鹿晗、《使命召唤》找了韩寒，而《腾讯动漫》则和薛之谦了好基友，这些代言人与产品的配对看似毫无章法，但实际上却是经过大量数据比对和内容分析得到的结果，就像是2013年的百事可乐放弃了天后王菲、而选择了出道不到1年的歌手吴莫愁作自己的广告代言人，这并不是因为百事可乐任性，非要用有争议的新面孔，而是因为数据告诉我们，爱喝可乐的用户喜欢的是吴莫愁。
选择杨洋为QQ空间大使，同样有类似考虑，据QQ指数显示，杨洋的粉丝绝大部分集中在13岁-25岁，这与QQ空间集中的95后用户群体十分吻合。而不管是在《左耳》还是在《花儿与少年》，杨洋的呆萌小男生形象确实让年轻受众印象深刻，这个特征也同样体现在本次H5的作品内，在网站MV中，杨洋的造型设计，一看就非常贴合在校生形象，这暗合了QQ空间主流受众人群的特征，也表现出了属于杨洋的那份独有的青春气息。
而在QQ部落，人气最高的两部电视剧《旋风少女》和《微微一笑很倾城》还都是杨洋主演的，所以说，杨洋同学就这么成为了我们的QQ空间大使。就在杨洋成为QQ空间代言人的当天，我们在豆瓣还看到了网友这样的评论：“唉？？？不行！老阿姨得回空间看看了… ; 以后可以追星追到QQ空间了！杨洋这国民度杠杠的啊!
这“国民度杠杠”的称呼还真不是闹着玩的，杨洋目前手握国内外优质代言28个！简直可以说是品牌代言收割机！而不管是QQ空间，还是其他选择杨洋的国内外知名品牌，他们都在用选择年轻代言人的方式，试图拥抱如今年轻化的消费主力军。所以说，是受众的喜好，决定了我们选择的代言人。
最后，我们回到QQ空间
12年前那个毫不起眼的“空间小窝”，如今却成为了月活跃用户达到6.32亿的超级社交平台，据说QQ空间沉淀的图片量，超过了2万亿张，这个数据还真挺夸张的！
这也解释了MV内容为什么会如此简单，因为简单的空间场景设计更有助于图片的展示与罗列，同时也能减少视频的渲染压力。而回归到主题与QQ空间，对于大多数人来说，承载记忆与往昔最多的，不就是那一张张定格的照片么？
所以说，QQ空间团队用展示用户照片的方式来贯穿“总有故事，不负光阴” 的主题，是非常有考究的打法。
直到今天，我们认识一位新好友，还是会先去翻看对方的相册照片，这个习惯在微信、人人网、MOMO、豆瓣等社交平台都如出一辙，而它原起于QQ空间。但仔细想想，我们那里是看照片那么简单，我们实际是想通过翻看照片的方式，来认识这位新朋友，了解他的过往，发现属于他的故事；而当我们重新去翻看多年前自己的QQ空间相册时，你是否又会感慨岁月的变迁，怀念学徒时代的往昔那？
这就是小呆对“总有故事，不负光阴” 的理解：翻看好友的照片，发现别人的故事，翻看自己的照片，回味那些曾经逝去的光阴，而这也许就是QQ空间想告诉我们的话了。正如MV结尾的对白：“也许青春的舞台总有落幕，但只要有故事，就永远不负时光”。
当然，QQ空间不仅仅能看照片了，它还有很多其他承载记忆的内容和方式，还有很多新功能和新玩法，这就等待你的发掘了～
此次活动H5在QQ空间分析后的效果
好了，这就是咱们本期的案例解析了，我是小呆，如果你喜欢我们的分享，请关注我们的小站，我们每天晚上都会为你带来不一样的分享内容，咱们下期见！
文章图片素材来源：腾讯ISUX（tencent_isux) 官方授权使用
进入资讯站社群，看H5分享
- 加微信：zixunzhanxiaomi -
微博: @H5资讯站 QQ群: 465521360 微信: zixunzhanxiaomi
点击“原文链接”可直接跳转到杨洋的H5案例