QQ这个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交互视频这么好玩，你是不是也手痒痒，想要试一下了？