腾讯这个H5的套路太深！大部分人没看懂
这两天QQ出了一个H5，明明6到不行，很多人却没看懂。
H5的主题是在国内上映3天，票房就破10亿的电影《速度与激情8》，用的是腾讯特别喜爱的全屏视频。
接下来，揭秘腾讯给自己挖的坑到底是什么，并整理出交互视频的其他N种玩法。
1、用视频来翻页！
这个H5的名字有点长：6666！QQ全球植入《速度与激情8》！
当你按住屏幕，速8视频中会突然出现QQ的身影（这植入也是够隐晦的）。
然而，因为QQ是随机出现的，而且和电影场景的契合度太高，很多人长按手机后压根没注意到画面变了，还以为本来就有QQ的存在（这坑就大了）……
这种玩法，腾讯去年10月就玩过了，也是长按视频就会出现“第二现场”。当时腾讯要推广穿越火线，和品客薯片合作出了个H5《放开那个姑娘，让我来！》。因为两个视频的画面冲击力都很强，而且有一定呼应，效果非常惊艳。
下载H5的源文件后，你可以看到原视频是这样的——
说白了，视频就是上下分割、一式两份，只是通过改变视频的位置，让上下两部分的视频分别显示！太会玩了。具体实现上，到底应该怎么做？
2、视频竖着双开！
由于横屏视频需要比较多的提示，后台还需要对手机倾斜情况进行设定，用垂直视频会方便得多。
比如道里全生态链创意平台，就做过一个双垂直视频类的H5《如此拉轰逗趣的珠海渔女你见过？我不信！》，在业内反响很不错。
后面以道里广告的这个H5为例，说明这种手动切换双视频的H5，在iH5中怎么实现。
从上面这张图，你会看到双垂直视频类H5，原始视频的排列和横屏类不同。一个是左右，一个是上下。具体实现如下：
（1）视频开启安卓微信全屏
安卓微信全屏模式能隐藏视频的播放进度，还可以在视频上叠加素材——安卓浏览器本来是不支持的，微信端则需要QQ浏览器的授权。
视频播放结束，安卓端会自动退出这种全屏模式；该模式不会影响苹果设备的效果。
（2）设置舞台剪切为YES
这一步，目的在于让视频超出规定的显示范围时，不会显示。这样才能让多出的视频部分隐藏。
（3）手指按下时，视频修改X坐标
珠海渔女这个H5，原始视频的宽高为1280×1136，默认X、Y坐标为0、0。
所以你需要为视频上层的按钮设置：“手指按下”时，视频的X坐标变为-640。
（4）手指离开时，视频X坐标恢复
同样地，为了重新播放第一个视频，还需要设置：“手指离开”时，视频的X坐标为0。这样，就恢复为左侧画面的效果了。
（5）为了安卓，还需要一个小功能
如果用户忍不住手动退出安卓全屏模式（点击页面左上角的“返回”LOGO），页面会变成视频当前播放的静态页面。
所以最后提醒一句，你还要设置一步：点击视频时，让视频“继续播放”！
3、用视频来翻页！
还有一种H5的新玩法，把视频当成普通的页面来切换。
用这个点子的是芒果TV的新作《偶像那么多，我又算老几》，宣传最近新出的综艺节目《超次元偶像》。
这个H5有两个小心机：
（1）视频播放到主文案时，突然停顿，用户必须点击屏幕才会继续播放；
（2）视频末尾的动画就是最终落地的720°全景，衔接很连贯。
使用iH5制作时，有两个关键点需要注意：
（1）设定视频的播放时间
为视频添加事件，设置“播放时间”为N时，视频暂停，“点击开始”的动效出现。
（2）让全景容器提前显示
上面是偶像这个H5的基本层级结构（获作者许可进行展示）。
因为全景容器内图片的缓存需要时间，在这里建议：当视频缓冲得差不多时，提前让全景容器显示，而不必等到播放结束。
4、你不动，它不动！
前面那个H5，通过控制视频的播放、暂停起到普通H5的翻页作用，而且能保证视听效果的和谐。
其实设计师做这个H5的时候，出了两套方案，下面就是被毙掉的那个H5的部分截图——也非常炫酷！
虽然这个H5没有面世，但它的视频播放技巧很值得借鉴。它用的是长按按钮，视频才会播放的交互方法。
具体操作上，可以使用“手指按下”、“手指离开”这两个触发事件，分别让视频继续播放、停止播放来控制。
H5交互视频这么好玩，你是不是也手痒痒，想要试一下了？
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）