2017最新腾讯H5视频的套路

2021年04月19日 2211人 浏览

1912编者为你提供《2017最新腾讯H5的套路》。这两天QQ出了一个H5,明明6到不行,很多人却没看懂。

H5的主题是在国内上映3天,票房就破10亿的电影《速度与激情8》,用的是腾讯特别喜爱的全屏视频。遗憾的是,因为这个H5把梗埋得太深,让人很难留意到它的亮点!

接下来,揭秘腾讯给自己挖的坑到底是什么,并整理出交互视频的其他N种玩法。

1、用视频来翻页

这个H5的名字有点长:6666!QQ全球植入《速度与激情8》!

当你按住屏幕,速8视频中会突然出现QQ的身影(这植入也是够隐晦的)。

然而,因为QQ是随机出现的,而且和电影场景的契合度太高,很多人长按手机后压根没注意到画面变了,还以为本来就有QQ的存在(这坑就大了)……

这种玩法,腾讯去年10月就玩过了,也是长按视频就会出现“第二现场”。

当时腾讯要推广穿越火线,和品客薯片合作出了个H5《放开那个姑娘,让我来!》。因为两个视频的画面冲击力都很强,而且有一定呼应,效果非常惊艳。

下载H5的源文件后,你可以看到原视频是这样的——


7ae658f6cf3ca8012049ef1013b9.jpg

说白了,视频就是上下分割、一式两份,只是通过改变视频的位置,让上下两部分的视频分别显示!太会玩了。具体实现上,到底应该怎么做?

2、视频竖着双开

由于横屏视频需要比较多的提示,后台还需要对手机倾斜情况进行设定,用垂直视频会方便得多。

比如道里全生态链创意平台,就做过一个双垂直视频类的H5《如此拉轰逗趣的珠海渔女你见过?我不信!》,在业内反响很不错。

压轴戏来了!后面以道里广告的这个H5为例,说明这种手动切换双视频的H5,在iH5中怎么实现。


c0ce58f6cff6a8012049efdd0760.jpg

从上面这张图,你会看到双垂直视频类H5,原始视频的排列和横屏类不同。一个是左右,一个是上下。具体实现如下:

(1)视频开启安卓微信全屏


d2f658f6cfd3a8012049ef76cbca.jpg

安卓微信全屏模式能隐藏视频的播放进度,还可以在视频上叠加素材——安卓浏览器本来是不支持的,微信端则需要QQ浏览器的授权。

视频播放结束,安卓端会自动退出这种全屏模式;该模式不会影响苹果设备的效果。

(2)设置舞台剪切为YES

这一步,目的在于让视频超出规定的显示范围时,不会显示。这样才能让多出的视频部分隐藏。

(3)手指按下时,视频修改X坐标


ec6258f6d034a8012049efaa5d12.jpg

珠海渔女这个H5,原始视频的宽高为1280×1136,默认X、Y坐标为0、0。

所以你需要为视频上层的按钮设置:“手指按下”时,视频的X坐标变为-640。

(4)手指离开时,视频X坐标恢复


9a9458f6d045a8012049efe2804b.jpg

同样地,为了重新播放第一个视频,还需要设置:“手指离开”时,视频的X坐标为0。这样,就恢复为左侧画面的效果了。

(5)为了安卓,还需要一个小功能

如果用户忍不住手动退出安卓全屏模式(点击页面左上角的“返回”LOGO),页面会变成视频当前播放的静态页面。

所以最后提醒一句,你还要设置一步:点击视频时,让视频“继续播放”!


3、用视频来翻页

还有一种H5的新玩法,把视频当成普通的页面来切换。


127858f6d098a8012049efca4585.jpg


dfb858f6d0c4a8012049efadcb42.jpg

用这个点子的是芒果TV的新作《偶像那么多,我又算老几》,宣传最近新出的综艺节目《超次元偶像》。

这个H5有两个小心机:

(1)视频播放到主文案时,突然停顿,用户必须点击屏幕才会继续播放;

(2)视频末尾的动画就是最终落地的720°全景,衔接很连贯。

使用iH5制作时,有两个关键点需要注意:

(1)设定视频的播放时间

这个就比较简单了,为视频添加事件,设置“播放时间”为N时,视频暂停,“点击开始”的动效出现就行。

(2)让全景容器提前显示


566058f6d0dca8012049ef769b25.jpg

上面是偶像这个H5的基本层级结构(获作者许可进行展示)。

因为全景容器内图片的缓存需要时间,在这里建议:当视频缓冲得差不多时,提前让全景容器显示,而不必等到播放结束。

4、你不动,它不动

前面那个H5,通过控制视频的播放、暂停起到普通H5的翻页作用,而且能保证视听效果的和谐。

其实设计师做这个H5的时候,出了两套方案,下面就是被毙掉的那个H5的部分截图——也非常炫酷!


476358f6d0f9a8012049ef7c1907.jpg

虽然这个H5没有面世,但它的视频播放技巧很值得借鉴。它用的是长按按钮,视频才会播放的交互方法。具体操作上,可以使用“手指按下”、“手指离开”这两个触发事件,分别让视频继续播放、停止播放来控制。

以上就是上海企业宣传片制作公司——1912为你推出《2017最新腾讯H5的套路》的全部内容。

  • 电话:021-62677988  400-006-8956
  • 地址:上海市长宁区天山路1718号6号楼5楼
  • 邮箱:service@1912china.com

1912法律声明版权所有©2007-2017 上海森活文化传播有限公司 沪ICP备19016509-1