摘要：那我這邊呢，根據(jù)技術(shù)的分類(lèi)，找出其中十個(gè)有代表性的案例，給大家解析一下他們技術(shù)的實(shí)現(xiàn)方案。經(jīng)過(guò)我對(duì)線(xiàn)上的代碼進(jìn)行修改，使這個(gè)頁(yè)面在安卓端強(qiáng)制使用來(lái)進(jìn)行展示后發(fā)現(xiàn)，在播放了一會(huì)后微信瀏覽器直接崩潰。那么這十個(gè)案例的淺析就完了，謝謝。

最近我們前端這邊搜集了50個(gè)比較優(yōu)秀的H5。

那我這邊呢，根據(jù)技術(shù)的分類(lèi)，找出其中十個(gè)有代表性的案例，給大家解析一下他們技術(shù)的實(shí)現(xiàn)方案。

設(shè)計(jì)師也可以根據(jù)技術(shù)實(shí)現(xiàn)作為你們提供的素材參考

因?yàn)槲抑饕菍?duì)技術(shù)分類(lèi)的介紹，所以只取了不同技術(shù)實(shí)現(xiàn)的案例，同一種技術(shù)實(shí)現(xiàn)的不同的設(shè)計(jì)風(fēng)格我就不列舉出來(lái)了。

首先稍微提一下，其中包含的技術(shù)主要分為：createjs/thresjs/video內(nèi)聯(lián)播放/

首先第一個(gè)呢，是之前騰訊爸爸出品的騰訊動(dòng)漫的一個(gè)APP宣傳的H5，這個(gè)H5是由騰訊內(nèi)的TGideas團(tuán)隊(duì)完成的

以下是TGideas的官方介紹

TGideas隸屬于騰訊互動(dòng)娛樂(lè)業(yè)務(wù)系統(tǒng)，是一支專(zhuān)注于運(yùn)營(yíng)和營(yíng)銷(xiāo)領(lǐng)域的用戶(hù)體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)，工作范圍涉及產(chǎn)品包裝、廣告創(chuàng)意、品牌建設(shè)、互動(dòng)設(shè)計(jì)等，團(tuán)隊(duì)由專(zhuān)業(yè)的企劃、項(xiàng)目管理、創(chuàng)意、視覺(jué)、開(kāi)發(fā)、多媒體人才構(gòu)成。“努力工作，拼命玩”是我們的信條，比起用飛機(jī)稿獲獎(jiǎng)，我們更樂(lè)于通過(guò)多樣化的作品，幫助產(chǎn)品與用戶(hù)建立有效的溝通機(jī)制與情感鏈接，實(shí)現(xiàn)真正意義上的商業(yè)價(jià)值。

OK，說(shuō)到TGideas這里就順便介紹一下騰訊的另一個(gè)團(tuán)隊(duì)簡(jiǎn)稱(chēng)ISUX，這兩個(gè)團(tuán)隊(duì)是我所了解到對(duì)H5這方面做的比較優(yōu)秀的兩個(gè)騰訊的團(tuán)隊(duì),他們團(tuán)隊(duì)中的組成也是設(shè)計(jì)+前端

騰訊社交用戶(hù)體驗(yàn)設(shè)計(jì)，簡(jiǎn)稱(chēng)ISUX (Internet Social User Experience)，成立于2011年1月11日，是騰訊集團(tuán)核心、全球最具規(guī)模的UX設(shè)計(jì)團(tuán)隊(duì)，專(zhuān)業(yè)成員包括用戶(hù)研究、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、品牌設(shè)計(jì)、視頻動(dòng)畫(huà)設(shè)計(jì)、UI開(kāi)發(fā)、產(chǎn)品設(shè)計(jì)與市場(chǎng)研究等，至今ISUX分布于中國(guó)深圳總部、北京、上海、成都及韓國(guó)首爾。
ISUX主要負(fù)責(zé)騰訊社交通訊與娛樂(lè)類(lèi)產(chǎn)品服務(wù)的用戶(hù)體驗(yàn)設(shè)計(jì)與研究，包括主要服務(wù)平臺(tái)如QQ、QQ空間、QQ會(huì)員、QQ錢(qián)包、QQ運(yùn)動(dòng)、騰訊云、騰訊企點(diǎn)、QQ物聯(lián)、騰訊課堂、興趣部落、花樣直播、全民K歌、全民影帝、企鵝FM、閃咖、天天P圖、微云和來(lái)電等。

這兩個(gè)是所接觸的比較擅長(zhǎng)輸出H5的兩個(gè)團(tuán)隊(duì)

video+js的案例

OK，然后大家掃一下二維碼看一下第一個(gè)案例。

從技術(shù)使用上，這個(gè)頁(yè)面使用了javascript腳本對(duì)視頻的控制。

主要需要解決的問(wèn)題是

默認(rèn)情況下在瀏覽器上添加視頻是全屏然后出現(xiàn)控制條

還有微信瀏覽器安卓系統(tǒng)打開(kāi)強(qiáng)制全屏的問(wèn)題

在IOS下的解決方法：

微信瀏覽器中可以增加一個(gè)內(nèi)聯(lián)屬性，使得視頻在頁(yè)面內(nèi)聯(lián)播放而不全屏。

但是安卓端若需要使用這個(gè)屬性，需要在瀏覽器白名單內(nèi)才能使用。

但是微信X5瀏覽器官方?jīng)]有提供申請(qǐng)白名單的入口。

所以我們只能換一種實(shí)現(xiàn)辦法

在后來(lái)TBS 內(nèi)核（>=036849）的版本的X5瀏覽器中，

支持一個(gè)叫同層播放器的東西，可以使安卓端微信在視頻全屏的情況下在視頻的上一層添加?xùn)|西

那么基于全屏視頻上面加一些東西可以做什么事情呢？

大家掃一下接下來(lái)這個(gè)案例。

這是我找的一個(gè)交互和視頻結(jié)合的案例，這個(gè)交互比較多，你的不同選項(xiàng)是一段不同的視頻片段，不選擇也是一個(gè)視頻片段，通過(guò)剛剛介紹的同層播放器+內(nèi)聯(lián)播放器的方式可以實(shí)現(xiàn)。

具體解析可以參考以下鏈接：
https://segmentfault.com/a/11...

當(dāng)然，視頻不僅局限于這種拍攝后剪輯的視頻，用AE做的視頻也是可以結(jié)合交互產(chǎn)出一些東西的，這里就不重復(fù)舉例。接下來(lái)看一個(gè)three.js使用webGL做的跟上次天貓狂歡節(jié)類(lèi)似的一個(gè)H5。
稍微介紹一下

WebGL（全寫(xiě)Web Graphics Library）是一種3D繪圖標(biāo)準(zhǔn)
WebGL可以為HTML5 Canvas提供硬件3D加速渲染

threejs是封裝了webGL 的第三方庫(kù)，可以用來(lái)開(kāi)發(fā)一些3D顯示相關(guān)的東西

......
那么這個(gè)大家使用蘋(píng)果手機(jī)可以發(fā)現(xiàn)，在蘋(píng)果手機(jī)上看切圖很精致而且可以控制速度，還可以控制前進(jìn)和后退。

這個(gè)案例在IOS下使用的是threeJs實(shí)現(xiàn)的一個(gè)3D一鏡到底的效果

在安卓端使用的是視頻。

經(jīng)過(guò)我對(duì)線(xiàn)上的代碼進(jìn)行修改，使這個(gè)頁(yè)面在安卓端強(qiáng)制使用webGL來(lái)進(jìn)行展示后發(fā)現(xiàn)，在播放了一會(huì)后微信瀏覽器直接崩潰。

去查了一下問(wèn)題原因可能有兩方面

一方面是
并發(fā)異步請(qǐng)求資源導(dǎo)致瀏覽器死鎖
若一個(gè)資源被多個(gè)異步請(qǐng)求同時(shí)請(qǐng)求的時(shí)候就可能導(dǎo)致瀏覽器死鎖，死鎖的結(jié)果就是瀏覽器崩潰。默認(rèn)瀏覽器都是啟用cache的，而瀏覽器在從cache中讀取數(shù)據(jù)的時(shí)候會(huì)加鎖。
就需要在組織異步請(qǐng)求隊(duì)列的時(shí)候，相同的資源不能在不同的隊(duì)列中出現(xiàn)

另一方面X5瀏覽器本身對(duì)安卓手機(jī)的支持也是不確定的，在不同的機(jī)子不同的安卓系統(tǒng)下fps的數(shù)值都不同，有的機(jī)子甚至無(wú)法播放，這算是X5瀏覽器自己的坑。

threeJS的案例
來(lái)看下一個(gè)案例

這是threejs在3D H5方面的另一種表現(xiàn)
3d全景，當(dāng)然，這類(lèi)H5的實(shí)現(xiàn)不止threejs。

全景類(lèi)方案還有另外兩種需要購(gòu)買(mǎi)的軟件來(lái)做，這里就不贅述了。

那么我這邊提供一個(gè)使用Three.js實(shí)現(xiàn)的3d全景的教程

https://isux.tencent.com/3d.html

threeJs另一種使用方面

做3d粒子動(dòng)畫(huà)

此案例用threejs實(shí)現(xiàn)，在安卓機(jī)上表現(xiàn)的性能也優(yōu)化的很好

CreateJS案例

稍微介紹一下,createjs是一款輕量級(jí)的游戲引擎，可以用來(lái)開(kāi)發(fā)游戲。
它的優(yōu)點(diǎn)在于

Adobe的 animateCC 可以直接可視化的編輯動(dòng)畫(huà)效果，可以綁骨骼，也可以在軟件內(nèi)直接插入代碼。

然后可以提供導(dǎo)出成基于createjs的js代碼

在H5實(shí)現(xiàn)時(shí)，程序員可以不需要考慮動(dòng)畫(huà)效果和動(dòng)畫(huà)細(xì)節(jié)。由設(shè)計(jì)師把想要的動(dòng)畫(huà)做好，由程序員去加入需要的代碼片段，導(dǎo)出后進(jìn)行開(kāi)發(fā)。
使得開(kāi)發(fā)時(shí)間縮短，減少溝通成本。
看一下下面的案例

這個(gè)案例，是由animateCC生成動(dòng)畫(huà)代碼。然后再由程序員添加畫(huà)布上的蒙層，對(duì)交互效果進(jìn)行開(kāi)發(fā)。

那么因?yàn)閏reatejs是一款游戲引擎，所以也能做像這樣的小游戲。這個(gè)游戲雖然簡(jiǎn)單，但是非常契合它火鍋店的宣傳主題。用createjs也可以加快這個(gè)的開(kāi)發(fā)速度。

像以上這樣只包含動(dòng)畫(huà)和過(guò)場(chǎng)的H5，直接用animateCC制作好動(dòng)畫(huà)。

由開(kāi)發(fā)者對(duì)fla源文件進(jìn)行編輯，在必要的地方加入代碼片段。

控制幀的播放和暫停還有跳幀就可以實(shí)現(xiàn)，然后直接用軟件可以一鍵導(dǎo)出自適應(yīng)移動(dòng)端寬高的動(dòng)畫(huà)效果。

下面這個(gè)H5是比較新穎但是不太常見(jiàn)的一種，雙屏互動(dòng)的H5

好那么最后一個(gè)

這個(gè)是視頻+全景做的一個(gè)H5，不過(guò)這個(gè)全景不是用threejs做的

而是使用另一個(gè)叫做krano，這個(gè)是之前提過(guò)的一款商用需要付費(fèi)的軟件。

那么這十個(gè)案例的淺析就完了，謝謝。