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

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

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

1、用視頻來翻頁

這個H5的名字有點長：6666!QQ全球植入《速度與激情8》!

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

然而，因為QQ是隨機出現(xiàn)的，而且和電影場景的契合度太高，很多人長按手機后壓根沒注意到畫面變了，還以為本來就有QQ的存在(這坑就大了)……

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

當(dāng)時騰訊要推廣穿越火線，和品客薯片合作出了個H5《放開那個姑娘，讓我來!》。因為兩個視頻的畫面沖擊力都很強，而且有一定呼應(yīng)，效果非常驚艷。

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

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

2、視頻豎著雙開

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

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

壓軸戲來了!后面以道里廣告的這個H5為例，說明這種手動切換雙視頻的H5，在iH5中怎么實現(xiàn)。

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

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

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

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

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

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

(3)手指按下時，視頻修改X坐標

珠海漁女這個H5，原始視頻的寬高為1280×1136，默認X、Y坐標為0、0。

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

(4)手指離開時，視頻X坐標恢復(fù)

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

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

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

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

3、用視頻來翻頁

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

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

這個H5有兩個小心機：

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

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

使用iH5制作時，有兩個關(guān)鍵點需要注意：

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

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

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

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

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

4、你不動，它不動

前面那個H5，通過控制視頻的播放、暫停起到普通H5的翻頁作用，而且能保證視聽效果的和諧。

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

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

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