摘要：下載，我使用的版本是最新的解壓下載文件，就是官方提供全景視頻，將整個(gè)目錄放入服務(wù)中，直接訪問就可以預(yù)覽了。

krpano的強(qiáng)大我就不多說了，了解過的人應(yīng)該都知道，現(xiàn)在市場(chǎng)上只要應(yīng)用全景的幾乎都是使用的krp來實(shí)現(xiàn)，krp官方提供了插件，全景視頻使用的是 videoplayer 插件，使用全景攝像機(jī)錄制視頻，在將他們播放到網(wǎng)頁上，可以操作鼠標(biāo)改變視角，也可以在移動(dòng)設(shè)備上使用VR眼鏡觀看。

搭建好環(huán)境，需要一個(gè)本地web服務(wù)，我使用的是nodeJS。

下載krpano，我使用的版本是最新的krpano 1.19-pr5

解壓下載文件，/krpano-1.19-pr5/krpano/examples/videopano 就是官方提供全景視頻DEMO，將krpano整個(gè)目錄放入web服務(wù)中，直接訪問index.html就可以預(yù)覽了。

也可以直接下載我放在github上的代碼,里面代碼有我的注釋。

如果只是自己學(xué)習(xí)就不用購(gòu)買了，krpano不限制下載，但是demo中央會(huì)有demo version的視頻水印，如果是商用則建議大家支持正版。

LICENSE 購(gòu)買地址 根據(jù)自己的需要選擇相應(yīng)的版本，秘鑰會(huì)發(fā)送到你的注冊(cè)郵箱中，我們打開剛剛下載到的文件找到生成文件的工具 krpano Tools。

雙擊打開就能看到下面的界面

粘貼你的秘鑰然后點(diǎn)擊注冊(cè)就完成了

點(diǎn)擊 Generate Viewers 按鈕，輸入文件名后，一般都輸入 krpano，完成后會(huì)生成兩個(gè)同名文件，將原始文件替換掉就成了，打開視頻，按下O鍵，就可以看到你的注冊(cè)信息了。

具體可以看中文網(wǎng)里的文章 購(gòu)買、下載、注冊(cè)

首先要了解兩個(gè)配置，一個(gè)是入口文件配置，一個(gè)是插件配置，這兩個(gè)配置都很簡(jiǎn)單

    embedpano({
        swf:"player.swf",
        xml:"videopano.xml", 
        target:"pano",
        html5:"auto", 
        passQueryParameters:true, 
        onready:function(krpano){

        }
    });
    

官方文檔

官方文檔

這是兩個(gè)最重要的文件，videopano.xml 是主配置文件，videointerface.xml是皮膚配置文件，videointerface 通過 include 引入合并，videointerface 代碼較長(zhǎng)我就不貼了，代碼中我將用到的都加了注釋。

     
        

        
        

        
        
            
        

        
        
            videointerface_addsource("超清", "%CURRENTXML%/video-1024x512.mp4|%CURRENTXML%/video-1024x512.webm", "");
            videointerface_addsource("高清", "%CURRENTXML%/video-1920x960.mp4|%CURRENTXML%/video-1920x960.webm", "");
            videointerface_addsource("流暢", "%CURRENTXML%/video-1920x960.mp4|%CURRENTXML%/video-1920x960.webm", "");
            
            videointerface_play("高清");
        

我們后面面對(duì)的幾乎都是krp的靜態(tài)代碼，所以了解清楚它們的功效非常有必要，你可以把它理解為我們HTML代碼中的標(biāo)簽，每個(gè)標(biāo)簽有自己的屬性也有相同屬性，我這里只列幾個(gè)我們用到的，其他的如果有興趣可以看這里,官方文檔中有詳細(xì)介紹。

場(chǎng)景標(biāo)簽， 當(dāng)瀏覽器加載完XML，scnen標(biāo)簽里的內(nèi)容不會(huì)被解析，而是需要手動(dòng)調(diào)用，loadscene(videopano);krp一次只會(huì)加載一個(gè)scene，當(dāng)加載了某個(gè)scene，其他的scene就會(huì)被移除，我們可以在一開始定義多個(gè)scene，再按照?qǐng)鼍斑M(jìn)行切換。

引入外部文件，可以將一個(gè)XML按功能切成不同的模塊，在通過include裝載到一個(gè)文件中。

引用插件，將插件引入我們的工程中，例如我們這里引入的是video。

定義動(dòng)態(tài)代碼，理解為Function

    
        stopdelayedcall(skin_autohide);
        set(layer[skin_control_bar].state, "visible");
        tween(layer[skin_control_bar].y, get(skin_settings.controlbar_offset));
        tween(layer[skin_control_bar].alpha, 1.0);
    

設(shè)置鼠標(biāo)/移動(dòng)設(shè)備/鍵盤 對(duì)視頻的控制 官方文檔

定義光標(biāo)類型，官方文檔