本來(lái)正好趁著最近沒(méi)啥事學(xué)習(xí)RN呢，新任務(wù)就下來(lái)了：研究一下krpano，那么krpano是什么呢？我的初步理解它是一套用于制作全景（圖片财忽，視頻）以及生成對(duì)應(yīng)的前端頁(yè)面的工具和框架的總稱。
一泣侮、首先即彪，進(jìn)入官網(wǎng)：
1、https://krpano.com/ 這個(gè)是官網(wǎng)地址活尊，但是是全英文的隶校，這里還有一個(gè)中文網(wǎng)：http://www.krpano360.com/ 有沒(méi)有官方授權(quán)不知道漏益，但是總結(jié)的還不錯(cuò)，好像是個(gè)人搞的深胳。
2绰疤、可以上面選擇一個(gè)網(wǎng)址了解一下krpano的基礎(chǔ)知識(shí)和原理之類的，有一個(gè)大致的了解舞终。
3轻庆、普通全景的制作過(guò)程和方法寫(xiě)的很詳細(xì)，在這就不贅述了敛劝，本文主要致力于解決一些要完成的但又不太好找到的功能榨了。
4、很巧的是最近在看react native攘蔽，感覺(jué)寫(xiě)法很像，有興趣的可以順便研究一下
二呐粘、在這里敘述一下我的任務(wù)：
1满俗、實(shí)現(xiàn)全景視頻播放。
2作岖、全景視頻添加動(dòng)態(tài)熱點(diǎn)唆垃。
3、寫(xiě)出demo痘儡，實(shí)現(xiàn)播放本地視頻功能辕万，并打包成ios或者android應(yīng)用，其中可能還會(huì)涉及IOS和android的知識(shí)沉删。
三渐尿、首先是決定框架的問(wèn)題
經(jīng)過(guò)一（ji）系（fen）列（zhong）的比較，決定使用使用HBilder提供的html5plus的框架矾瑰，原因呢砖茸，嗯。殴穴。凉夯。很多啊，比如說(shuō)打包方便采幌、打包方便和打包方便熬⒐弧（可能吧？）休傍。然后html5plus的框架的填坑呢征绎，在這：www.baidu.com。
四磨取、接下來(lái)講krpano的事情炒瘸，下面主要是記錄的一些使用過(guò)程的知識(shí)點(diǎn)和填坑歷程吧淤堵。：
1、在移動(dòng)端沒(méi)有辦法播放vr視頻顷扩，在pc端是可以的拐邪，不是寫(xiě)法的問(wèn)題，官方的demo在移動(dòng)端同樣不能播放隘截。經(jīng)測(cè)試發(fā)現(xiàn)具體情況是：在ios設(shè)備上沒(méi)辦法播放扎阶，在安卓設(shè)備上可以播放但是沒(méi)有畫(huà)面只有聲音，查閱一番婶芭，有人說(shuō)是視頻格式不正確东臀，官方提供了專門(mén)的視頻轉(zhuǎn)換方法：http://www.krpano360.com/panovideo-converter-quanjingshipinzhuanhuanqi/試了一下，確實(shí)可以解決ios上的問(wèn)題犀农，安卓的沒(méi)測(cè)試惰赋，但是接下來(lái)又是第二個(gè)問(wèn)題。
2呵哨、在播放全景視頻的時(shí)候赁濒，在調(diào)用插件播放視頻的同時(shí)，會(huì)調(diào)起ios原生的播放器且遮住全屏（ios）孟害，解決辦法是禁用掉原生的video的全屏拒炎。
3、經(jīng)過(guò)測(cè)試挨务，在ipad3 上击你，3萬(wàn)比特率的視屏，最大只能支持到3k（包括谎柄，30721536px）到3.5k（不包括丁侄，38401920px）之間，再大的就會(huì)卡住播不了了朝巫，其他機(jī)型有待測(cè)試绒障。
4、基于第3點(diǎn)捍歪，想到之前視頻在安卓端只有聲音户辱，畫(huà)面卡住的問(wèn)題，因?yàn)檎Ｒ粋€(gè)三萬(wàn)碼率（比特率）的視頻糙臼，音頻的碼率只有幾百庐镐，個(gè)人認(rèn)為可能是安卓設(shè)備（一臺(tái)android4.4版本的手機(jī)、一臺(tái)M系列的大鵬VR一體機(jī)）硬件配置較低变逃，支持不了較高的視頻碼率必逆，當(dāng)然目前屬于個(gè)人猜測(cè)，有待后期測(cè)試。
5名眉、默認(rèn)的皮膚是沒(méi)有開(kāi)啟陀螺儀的粟矿，要是想一開(kāi)場(chǎng)就開(kāi)啟陀螺儀，可以在tour.xml的include那一行的后面添加：
<plugin name="skin_gyro" enabled="true"/>
6损拢、krpano的中文網(wǎng)站krpano360.com上提供了將做好的全景視頻轉(zhuǎn)換為krpano可以用的工具http://www.krpano360.com/panovideo-converter-quanjingshipinzhuanhuanqi/陌粹，教程之類的都沒(méi)啥，就是有一個(gè)注意點(diǎn)福压，不管是源文件的路徑還是輸出視頻的路徑掏秩，千萬(wàn)不要有空格，不然只能看到命令行狂閃荆姆，然后就沒(méi)有然后了蒙幻。
7、到今天（2017/9/29）胆筒，krpano已經(jīng)更新到了1.19 pr13邮破，這個(gè)版本我關(guān)心的最主要的問(wèn)題，就是修復(fù)了在ios設(shè)備上全景視頻點(diǎn)擊播放和暫停按鈕或者切換場(chǎng)景的時(shí)候崩潰的問(wèn)題仆救，這個(gè)問(wèn)題已經(jīng)算是折磨了我三四天的時(shí)間抒和，一直無(wú)從下手，終于給出了官方的解決辦法派桩，興高采烈的用最新的版本重新升成了場(chǎng)景，跑了起來(lái)蚌斩，崩瞎卡拉卡~又崩了铆惑，根本沒(méi)解決問(wèn)題啊，說(shuō)好的做彼此的天使來(lái)著呢送膳？逗我呢员魏？苦思良久，會(huì)不會(huì)修復(fù)的只是基于瀏覽器內(nèi)核崩潰的現(xiàn)象叠聋？而在ios app里面崩潰肯定是內(nèi)存超過(guò)了ios的限定內(nèi)存（ios7.1之前40M撕阎，7.1之后50M，據(jù)說(shuō)）碌补，詢問(wèn)了krpano中文網(wǎng)作者 肥宗本人之后得知krpano并沒(méi)有提供手動(dòng)清理緩存的辦法虏束，那么辦法就只剩下一個(gè)了：在全景頁(yè)面不進(jìn)行任何緩存！
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
解決厦章！
8镇匀、作為一個(gè)開(kāi)發(fā)人員，調(diào)試沒(méi)有l(wèi)og就很痛苦啊袜啃，找了下文檔汗侵，只需要在需要的地方先打開(kāi)debug模式：
showlog(true);
再在需要打印log的地方輸入：
debugvar(varname);//varname是指變量名
即可，但是注意：
- 只有debugmode啟用時(shí)，debug信息才會(huì)顯示晰韵。
- 可以啟用html的 consolelog設(shè)置发乔，這樣瀏覽器的日志記錄也有這些信息。
-
過(guò)多的跟蹤會(huì)影響渲染表現(xiàn)雪猪！避免在每一幀都持續(xù)地輸出信息栏尚！
（ps:參考在這里）
9、不知道在上面時(shí)候開(kāi)始浪蹂，反正在我發(fā)現(xiàn)的時(shí)候（krpano 1.19.pr13）抵栈，突然就是全景視頻不能暫停和播放了，之前一直以為
加了自動(dòng)轉(zhuǎn)場(chǎng)的功能坤次，后來(lái)想想不應(yīng)該古劲，仔細(xì)找了一下，在skin/vtourskin.xml文件里發(fā)現(xiàn)了這樣一段代碼：
if(scene[get(xml.scene)].isvideopano AND plugin[video] !== null,
skin_video_addcontrols();
,
skin_video_removecontrols();
);
意思是如果場(chǎng)景的.isvideopano屬性為true缰猴，并且有名為video的插件的時(shí)候产艾，執(zhí)行skin_video_addcontrols();否則執(zhí)行skin_video_removecontrols();我們是全景視頻，講道理肯定是應(yīng)該執(zhí)行skin_video_addcontrols();方法的嘛滑绒，可是在打了debug之后發(fā)現(xiàn)并不是闷堡，硬生生的走了下面一個(gè)方法，至于原因么疑故，可能是版本的差異吧杠览，在場(chǎng)景里面用的屬性是ispanovideo，而到了判斷條件這赤裸裸的變成了isvideopano纵势，欺負(fù)人踱阿！只要把這里的判斷條件的isvideopano改成ispanovideo即可。
時(shí)隔一年又來(lái)搞krpano了,這次不用套原生殼钦铁，所以棄用mui软舌，改用當(dāng)下比較火的vue，當(dāng)然了牛曹，也是初學(xué)佛点，所以肯定會(huì)遇到很多坑，也會(huì)在這里記錄下來(lái)
一黎比、krpano的問(wèn)題
1超营、插件傳遞參數(shù)的問(wèn)題
之前寫(xiě)插件都比較簡(jiǎn)單，js調(diào)xml阅虫，偶爾會(huì)有xml調(diào)取js也是不帶參或者帶固定值的參數(shù)糟描，一致都沒(méi)有遇到問(wèn)題，直到這次遇到傳變量名的問(wèn)題书妻，發(fā)現(xiàn)xml調(diào)用js方法的時(shí)候如果傳變量名的話船响，并不會(huì)把變量的值傳過(guò)去躬拢，竟然直接把變量名當(dāng)做字符串傳過(guò)去了。經(jīng)過(guò)測(cè)試见间，可以把變量名用get()包一下獲取到變量的值聊闯，就可以了。例如：
plugin[testpluginname].testfunction(get(paramter));
2米诉、調(diào)用自定義插件方法報(bào)錯(cuò) ：unknown action：XXXX
自定義插件的名字支持全英文小寫(xiě)格式（testfunction）菱蔬、下劃線格式（test_function）.....(其他情況沒(méi)試)，唯獨(dú)史侣！唯獨(dú)拴泌！唯獨(dú)！不支持駝峰命名法（testFunction）惊橱，千萬(wàn)不要用蚪腐！
