1912編者為你提供《2017最新騰訊H5的套路》。這兩天QQ出了一個(gè)H5，明明6到不行，很多人卻沒(méi)看懂。

H5的主題是在國(guó)內(nèi)上映3天，票房就破10億的電影《速度與激情8》，用的是騰訊特別喜愛(ài)的全屏視頻。遺憾的是，因?yàn)檫@個(gè)H5把梗埋得太深，讓人很難留意到它的亮點(diǎn)!

接下來(lái)，揭秘騰訊給自己挖的坑到底是什么，并整理出交互視頻的其他N種玩法。

1、用視頻來(lái)翻頁(yè)

這個(gè)H5的名字有點(diǎn)長(zhǎng)：6666!QQ全球植入《速度與激情8》!

當(dāng)你按住屏幕，速8視頻中會(huì)突然出現(xiàn)QQ的身影(這植入也是夠隱晦的)。

然而，因?yàn)镼Q是隨機(jī)出現(xiàn)的，而且和電影場(chǎng)景的契合度太高，很多人長(zhǎng)按手機(jī)后壓根沒(méi)注意到畫(huà)面變了，還以為本來(lái)就有QQ的存在(這坑就大了)……

這種玩法，騰訊去年10月就玩過(guò)了，也是長(zhǎng)按視頻就會(huì)出現(xiàn)“第二現(xiàn)場(chǎng)”。

當(dāng)時(shí)騰訊要推廣穿越火線，和品客薯片合作出了個(gè)H5《放開(kāi)那個(gè)姑娘，讓我來(lái)!》。因?yàn)閮蓚€(gè)視頻的畫(huà)面沖擊力都很強(qiáng)，而且有一定呼應(yīng)，效果非常驚艷。

下載H5的源文件后，你可以看到原視頻是這樣的——

說(shuō)白了，視頻就是上下分割、一式兩份，只是通過(guò)改變視頻的位置，讓上下兩部分的視頻分別顯示!太會(huì)玩了。具體實(shí)現(xiàn)上，到底應(yīng)該怎么做?

2、視頻豎著雙開(kāi)

由于橫屏視頻需要比較多的提示，后臺(tái)還需要對(duì)手機(jī)傾斜情況進(jìn)行設(shè)定，用垂直視頻會(huì)方便得多。

比如道里全生態(tài)鏈創(chuàng)意平臺(tái)，就做過(guò)一個(gè)雙垂直視頻類的H5《如此拉轟逗趣的珠海漁女你見(jiàn)過(guò)?我不信!》，在業(yè)內(nèi)反響很不錯(cuò)。

壓軸戲來(lái)了!后面以道里廣告的這個(gè)H5為例，說(shuō)明這種手動(dòng)切換雙視頻的H5，在iH5中怎么實(shí)現(xiàn)。

從上面這張圖，你會(huì)看到雙垂直視頻類H5，原始視頻的排列和橫屏類不同。一個(gè)是左右，一個(gè)是上下。具體實(shí)現(xiàn)如下：

(1)視頻開(kāi)啟安卓微信全屏

安卓微信全屏模式能隱藏視頻的播放進(jìn)度，還可以在視頻上疊加素材——安卓瀏覽器本來(lái)是不支持的，微信端則需要QQ瀏覽器的授權(quán)。

視頻播放結(jié)束，安卓端會(huì)自動(dòng)退出這種全屏模式;該模式不會(huì)影響蘋果設(shè)備的效果。

(2)設(shè)置舞臺(tái)剪切為YES

這一步，目的在于讓視頻超出規(guī)定的顯示范圍時(shí)，不會(huì)顯示。這樣才能讓多出的視頻部分隱藏。

(3)手指按下時(shí)，視頻修改X坐標(biāo)

珠海漁女這個(gè)H5，原始視頻的寬高為1280×1136，默認(rèn)X、Y坐標(biāo)為0、0。

所以你需要為視頻上層的按鈕設(shè)置：“手指按下”時(shí)，視頻的X坐標(biāo)變?yōu)?640。

(4)手指離開(kāi)時(shí)，視頻X坐標(biāo)恢復(fù)

同樣地，為了重新播放第一個(gè)視頻，還需要設(shè)置：“手指離開(kāi)”時(shí)，視頻的X坐標(biāo)為0。這樣，就恢復(fù)為左側(cè)畫(huà)面的效果了。

(5)為了安卓，還需要一個(gè)小功能

如果用戶忍不住手動(dòng)退出安卓全屏模式(點(diǎn)擊頁(yè)面左上角的“返回”LOGO)，頁(yè)面會(huì)變成視頻當(dāng)前播放的靜態(tài)頁(yè)面。

所以最后提醒一句，你還要設(shè)置一步：點(diǎn)擊視頻時(shí)，讓視頻“繼續(xù)播放”!

3、用視頻來(lái)翻頁(yè)

還有一種H5的新玩法，把視頻當(dāng)成普通的頁(yè)面來(lái)切換。

用這個(gè)點(diǎn)子的是芒果TV的新作《偶像那么多，我又算老幾》，宣傳最近新出的綜藝節(jié)目《超次元偶像》。

這個(gè)H5有兩個(gè)小心機(jī)：

(1)視頻播放到主文案時(shí)，突然停頓，用戶必須點(diǎn)擊屏幕才會(huì)繼續(xù)播放;

(2)視頻末尾的動(dòng)畫(huà)就是最終落地的720°全景，銜接很連貫。

使用iH5制作時(shí)，有兩個(gè)關(guān)鍵點(diǎn)需要注意：

(1)設(shè)定視頻的播放時(shí)間

這個(gè)就比較簡(jiǎn)單了，為視頻添加事件，設(shè)置“播放時(shí)間”為N時(shí)，視頻暫停，“點(diǎn)擊開(kāi)始”的動(dòng)效出現(xiàn)就行。

(2)讓全景容器提前顯示

上面是偶像這個(gè)H5的基本層級(jí)結(jié)構(gòu)(獲作者許可進(jìn)行展示)。

因?yàn)槿叭萜鲀?nèi)圖片的緩存需要時(shí)間，在這里建議：當(dāng)視頻緩沖得差不多時(shí)，提前讓全景容器顯示，而不必等到播放結(jié)束。

4、你不動(dòng)，它不動(dòng)

前面那個(gè)H5，通過(guò)控制視頻的播放、暫停起到普通H5的翻頁(yè)作用，而且能保證視聽(tīng)效果的和諧。

其實(shí)設(shè)計(jì)師做這個(gè)H5的時(shí)候，出了兩套方案，下面就是被斃掉的那個(gè)H5的部分截圖——也非常炫酷!

雖然這個(gè)H5沒(méi)有面世，但它的視頻播放技巧很值得借鑒。它用的是長(zhǎng)按按鈕，視頻才會(huì)播放的交互方法。具體操作上，可以使用“手指按下”、“手指離開(kāi)”這兩個(gè)觸發(fā)事件，分別讓視頻繼續(xù)播放、停止播放來(lái)控制。

以上就是上海企業(yè)宣傳片制作公司——1912為你推出《2017最新騰訊H5的套路》的全部?jī)?nèi)容。