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

krpano的強大我就不多說了，了解過的人應該都知道，現在市場上只要應用全景的幾乎都是使用的krp來實現，krp官方提供了插件，全景視頻使用的是 videoplayer 插件，使用全景攝像機錄制視頻，在將他們播放到網頁上，可以操作鼠標改變視角，也可以在移動設備上使用VR眼鏡觀看。

搭建好環境，需要一個本地web服務，我使用的是nodeJS。

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

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

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

如果只是自己學習就不用購買了，krpano不限制下載，但是demo中央會有demo version的視頻水印，如果是商用則建議大家支持正版。

LICENSE 購買地址 根據自己的需要選擇相應的版本，秘鑰會發送到你的注冊郵箱中，我們打開剛剛下載到的文件找到生成文件的工具 krpano Tools。

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

粘貼你的秘鑰然后點擊注冊就完成了

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

具體可以看中文網里的文章 購買、下載、注冊

首先要了解兩個配置，一個是入口文件配置，一個是插件配置，這兩個配置都很簡單

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

        }
    });
    

官方文檔

官方文檔

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

     
        

        
        

        
        
            
        

        
        
            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("高清");
        

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

場景標簽， 當瀏覽器加載完XML，scnen標簽里的內容不會被解析，而是需要手動調用，loadscene(videopano);krp一次只會加載一個scene，當加載了某個scene，其他的scene就會被移除，我們可以在一開始定義多個scene，再按照場景進行切換。

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

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

定義動態代碼，理解為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);
    

設置鼠標/移動設備/鍵盤 對視頻的控制 官方文檔

定義光標類型，官方文檔