騰訊這個(gè)H5的套路太深！大部分人沒看懂
這兩天QQ出了一個(gè)H5，明明6到不行，很多人卻沒看懂。
H5的主題是在國內(nèi)上映3天，票房就破10億的電影《速度與激情8》，用的是騰訊特別喜愛的全屏視頻。
接下來，揭秘騰訊給自己挖的坑到底是什么，并整理出交互視頻的其他N種玩法。
1、用視頻來翻頁！
這個(gè)H5的名字有點(diǎn)長：6666！QQ全球植入《速度與激情8》！
當(dāng)你按住屏幕，速8視頻中會(huì)突然出現(xiàn)QQ的身影（這植入也是夠隱晦的）。
然而，因?yàn)镼Q是隨機(jī)出現(xiàn)的，而且和電影場(chǎng)景的契合度太高，很多人長按手機(jī)后壓根沒注意到畫面變了，還以為本來就有QQ的存在（這坑就大了）……
這種玩法，騰訊去年10月就玩過了，也是長按視頻就會(huì)出現(xiàn)“第二現(xiàn)場(chǎng)”。當(dāng)時(shí)騰訊要推廣穿越火線，和品客薯片合作出了個(gè)H5《放開那個(gè)姑娘，讓我來！》。因?yàn)閮蓚€(gè)視頻的畫面沖擊力都很強(qiáng)，而且有一定呼應(yīng)，效果非常驚艷。
下載H5的源文件后，你可以看到原視頻是這樣的——
說白了，視頻就是上下分割、一式兩份，只是通過改變視頻的位置，讓上下兩部分的視頻分別顯示！太會(huì)玩了。具體實(shí)現(xiàn)上，到底應(yīng)該怎么做？
2、視頻豎著雙開！
由于橫屏視頻需要比較多的提示，后臺(tái)還需要對(duì)手機(jī)傾斜情況進(jìn)行設(shè)定，用垂直視頻會(huì)方便得多。
比如道里全生態(tài)鏈創(chuàng)意平臺(tái)，就做過一個(gè)雙垂直視頻類的H5《如此拉轟逗趣的珠海漁女你見過？我不信！》，在業(yè)內(nèi)反響很不錯(cuò)。
后面以道里廣告的這個(gè)H5為例，說明這種手動(dòng)切換雙視頻的H5，在iH5中怎么實(shí)現(xiàn)。
從上面這張圖，你會(huì)看到雙垂直視頻類H5，原始視頻的排列和橫屏類不同。一個(gè)是左右，一個(gè)是上下。具體實(shí)現(xiàn)如下：
（1）視頻開啟安卓微信全屏
安卓微信全屏模式能隱藏視頻的播放進(jìn)度，還可以在視頻上疊加素材——安卓瀏覽器本來是不支持的，微信端則需要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）手指離開時(shí)，視頻X坐標(biāo)恢復(fù)
同樣地，為了重新播放第一個(gè)視頻，還需要設(shè)置：“手指離開”時(shí)，視頻的X坐標(biāo)為0。這樣，就恢復(fù)為左側(cè)畫面的效果了。
（5）為了安卓，還需要一個(gè)小功能
如果用戶忍不住手動(dòng)退出安卓全屏模式（點(diǎn)擊頁面左上角的“返回”LOGO），頁面會(huì)變成視頻當(dāng)前播放的靜態(tài)頁面。
所以最后提醒一句，你還要設(shè)置一步：點(diǎn)擊視頻時(shí)，讓視頻“繼續(xù)播放”！
3、用視頻來翻頁！
還有一種H5的新玩法，把視頻當(dāng)成普通的頁面來切換。
用這個(gè)點(diǎn)子的是芒果TV的新作《偶像那么多，我又算老幾》，宣傳最近新出的綜藝節(jié)目《超次元偶像》。
這個(gè)H5有兩個(gè)小心機(jī)：
（1）視頻播放到主文案時(shí)，突然停頓，用戶必須點(diǎn)擊屏幕才會(huì)繼續(xù)播放；
（2）視頻末尾的動(dòng)畫就是最終落地的720°全景，銜接很連貫。
使用iH5制作時(shí)，有兩個(gè)關(guān)鍵點(diǎn)需要注意：
（1）設(shè)定視頻的播放時(shí)間
為視頻添加事件，設(shè)置“播放時(shí)間”為N時(shí)，視頻暫停，“點(diǎn)擊開始”的動(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，通過控制視頻的播放、暫停起到普通H5的翻頁作用，而且能保證視聽效果的和諧。
其實(shí)設(shè)計(jì)師做這個(gè)H5的時(shí)候，出了兩套方案，下面就是被斃掉的那個(gè)H5的部分截圖——也非常炫酷！
雖然這個(gè)H5沒有面世，但它的視頻播放技巧很值得借鑒。它用的是長按按鈕，視頻才會(huì)播放的交互方法。
具體操作上，可以使用“手指按下”、“手指離開”這兩個(gè)觸發(fā)事件，分別讓視頻繼續(xù)播放、停止播放來控制。
H5交互視頻這么好玩，你是不是也手癢癢，想要試一下了？
評(píng)論
評(píng)論
推薦評(píng)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）