电竞比分网-中国电竞赛事及体育赛事平台

分享

循序漸進(16)

 maliping186 2016-11-20

在談到krpano的html5和flash之前,您需要先閱讀:

循序漸進(6)- 為何本地預(yù)覽時在瀏覽器中顯示錯誤

在上面的教程中,簡單講解了在html文件中操作krpano選擇何種內(nèi)核進行瀏覽的問題,從而避免了本地瀏覽的黑屏問題。在本次教程中,我們來相對深入地談?wù)刱rpano中關(guān)于HTML5和Flash的話題。

 

HTML5和Flash是krpano的全景瀏覽引擎

全景圖無論是切片前或切片后,它本質(zhì)就是圖片文件。krpano要做的事情就是讓這些“平面”的全景圖在瀏覽器窗口中呈現(xiàn)出“三維”效果。因此krpano準(zhǔn)備兩個引擎來完成此事,一個是HTML5,一個是Flash。換句話說,當(dāng)你看到krpano制作的全景時,它當(dāng)前所使用的全景瀏覽引擎可能是HTML5也可能是Flash,使用的哪一套取決于你的設(shè)置以及當(dāng)前瀏覽器和設(shè)備。為什么會有兩套引擎呢?最早在2008年時,也正是flash處于頂峰的時代,krpano是以flash作為引擎發(fā)布其最初的版本的,當(dāng)時還沒有所謂的智能手機,也不用考慮手機端平板端的事情,krpano只需要考慮在pc端的全景展示效果,flash本身已經(jīng)發(fā)展到自身的登峰造極,在當(dāng)時,將其作為全景引擎是非常合適的,同時也有很多其它全景軟件使用flash編寫內(nèi)核。

即使到現(xiàn)在,flash在pc上的穩(wěn)定性仍然要比HTML5好。這也是為什么迄今krpano還沒有完全放棄flash的原因。事實上,就算是pano2VR也是雙引擎的。那么既然flash如此穩(wěn)定,為什么現(xiàn)在拋棄之聲卻日漸高漲?原因在于flash不夠用了。具體可以看 HTML5 真能代替 Flash 嗎? – Adobe Flash – 知乎

flash在全景里也是不夠用的。尤其是在移動端,它在蘋果手機上無法運行,安卓手機也不會預(yù)裝flash player。因此可以說移動端基本是不支持flash,再加上諸如VR這些特性flash也么有很好的支持,而這都是當(dāng)前的熱點。因此krpano在很早的時候就注意到這一點,并開始開發(fā)html5內(nèi)核,也就是使用同一批xml文件可在不同的設(shè)備上使用不同的內(nèi)核。在krpano的發(fā)展過程中,對html5的優(yōu)先應(yīng)用是越來越明顯。在1.19 pr3中,是優(yōu)先默認使用html內(nèi)核的。

 

如何判斷當(dāng)前瀏覽器使用的是HTML5還是Flash

既然krpano也就是使用這兩個引擎的其中之一,我們遇到的問題也往往需要判斷是在HTML5下遇到的問題還是flash下的問題。所以我們要知道在當(dāng)前瀏覽器下用的是哪個內(nèi)核。在移動端包括手機和平板基本上是百分一百都是使用html5內(nèi)核了。這里說的是pc端(不包括mac電腦)。因為pc端上面的瀏覽器種類繁多,而且本地時又有各種安全限制,因此并不能單從瀏覽器本身來確定krpano會調(diào)用哪個內(nèi)核。有兩個方法查看:

一 單擊鼠標(biāo)右鍵,如果右鍵中出現(xiàn)flash字樣,則當(dāng)前使用的是flash內(nèi)核;如右鍵中出現(xiàn)的是HTML5字樣,則使用的是H5內(nèi)核。

二 點擊鍵盤上的O鍵,會彈出信息窗口,如下圖,判斷方法類似于第一個方法。

QQ圖片20160329145646

QQ圖片20160329150120

 

如何“手動”控制krpano使用哪一個引擎

實際上這就是循序漸進(6)的內(nèi)容,

我們可以在html文件中找到embedpano這個方法

1
2
3

 

注意里面有個html5元素,其數(shù)值是prefer,具體在1.18之后還有個flash的元素

html5:”auto”
  • 設(shè)置 krpano HTML5 Viewer 使用方法:
  • 可用的數(shù)值:
    • auto – 默認設(shè)置 – 自動使用krpano HTML5 viewer。
      在設(shè)置下,在桌面系統(tǒng)上默認使用krpano Flash viewer。只有在Flashplayer不可用或在移動/平板設(shè)備時使用krpano HTML5 viewer。
    • prefer – 可能的話優(yōu)先使用krpano HTML5。
      在設(shè)置下,默認使用krpano HTML5 viewer,只有在系統(tǒng)/瀏覽器不兼容HTML5時使用krpano Flash viewer。
    • fallback – 可能的話優(yōu)先使用krpano Flash viewer。只有Flash無法使用時退回到krpano HTML5 viewer。
    • only – 只使用krpano HTML5 viewer – 從不使用krpano Flash viewer。
      在該設(shè)置下,只要可能就使用krpano HTML5 viewer。當(dāng)系統(tǒng)/瀏覽器不兼容HTML5時,則顯示錯誤信息。
    • always – 始終使用krpano HTML5 viewer,無論系統(tǒng)/瀏覽器是否支持。 警告 – 該設(shè)置只能用于內(nèi)部測試!
    • never – 從不使用krpano HTML5 viewer,強制使用krpano Flash viewer。
  • 針對HTML5 viewer的擴展設(shè)置:(測試用)
    • html5設(shè)置可加上 ‘webgl’‘css3d’ 用于當(dāng)兩種渲染技術(shù)都可用時優(yōu)先使用哪一種。
    • 使用示例: html5=”auto+css3d”, html5=”prefer+webgl”, …
    • 默認為當(dāng)可用時優(yōu)先使用WebGL。

flash:””
  • 設(shè)置krpano Flash Viewer用法。
  • 這與html5設(shè)置基本相同,只是剛好相反??梢杂糜诟训穆窂?,例如使用 flash=prefer代替 html5=fallback。
  • 當(dāng)flash設(shè)置后,它將映射到html5設(shè)置,并且對其覆寫。
  • 可用的數(shù)值:
    • 不設(shè)置 – 使用html5設(shè)置。
    • auto – 與 html5=auto相同。
    • prefer – 當(dāng)可能的話,優(yōu)先使用krpano Flash viewer。
      只有當(dāng)沒有Flashplayer或系統(tǒng)/瀏覽器不支持HTML5時,使用krpano HTML5 Viewer。
      該設(shè)置將被映射到 html5=fallback。
    • fallback – 當(dāng)可能的話,優(yōu)先使用krpano HTML5 viewer。只有當(dāng)HTML5不可用時,退回使用krpano Flash viewer。
      該設(shè)置將被映射到  html5=prefer。
    • only – 只使用krpano Flash viewer – 從不使用krpano HTML5 viewer。
      早設(shè)置下,如果可能的話使用krpano Flash viewer。如果沒有Flashplayer,則顯示錯誤信息。 
      該設(shè)置將被映射到 html5=never。
    • never – 從不使用krpano Flash viewer,僅使用krpano HTML5 viewer。
      該設(shè)置將被映射到  html5=only。

krpano 1.19新增了三目運算符,因此也可以這樣寫:

1
2
3

本地的時候document.domain是沒有的,因此html5賦值為auto,放到網(wǎng)上時有了域名,因此html5賦值為prefer。

 

krpano的插件也有HTML5和Flash

除了xml寫的插件,大部分插件為了兼容HTML5和Flash,也要有對應(yīng)的不同版本的HTML5和flash的插件。例如視頻播放插件videoplayer,就有swf版本和js版本。通常在1.19可以這樣調(diào)用

1
2
url.flash='videoplayer.swf'
url.html5='videoplayer.js'

而在1.19以下,則是這樣寫:

1
2
url='videoplayer.swf'
alturl='videoplayer.js'

上述的用法也可以用在像layer和hotspot這樣需要指定的url的元素中。

 

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多