使用 krpano 實現全景視頻

使用 krpano 製做全景視頻

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

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

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

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

4. 也能夠直接下載我放在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){

        }
    });

官方文檔

plugin 配置

<plugin name="video"
        url.flash="videoplayer.swf"
        url.html5="videoplayer.js"
        videourl="video.m4v|video.webm"
        posterurl="videoposter.jpg"
        panovideo="true"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        onvideoready=""
        onvideoplay=""
        onvideopaused=""
        onvideocomplete=""
        onerror=""
        />

官方文檔

videopano.xml 和 videointerface.xml

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

<!-- 引入video插件 -->
        <plugin name="video"
                url.html5="%SWFPATH%/videoplayer.js"
                url.flash="%SWFPATH%/videoplayer.swf"
                pausedonstart="true"
                loop="false"
                volume="1.0"
                onloaded="add_video_sources();"
                onerror=""
                />

        <!-- 引入皮膚 -->
        <include url="skin/videointerface.xml" />

        <!-- 定義視頻未播放時的畫面，這裏使用視頻截圖 -->
        <image>
            <sphere url="plugin:video" />
        </image>

        <!-- 定義視頻源 -->
        <action name="add_video_sources">
            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('高清');
        </action>

XML靜態代碼

咱們後面面對的幾乎都是krp的靜態代碼，因此瞭解清楚它們的功效很是有必要，你能夠把它理解爲咱們HTML代碼中的標籤，每一個標籤有本身的屬性也有相同屬性，我這裏只列幾個咱們用到的，其餘的若是有興趣能夠看這裏,官方文檔中有詳細介紹。

<scene>

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

<include>

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

<include url="skin/videointerface.xml" />

<plugin>

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

<plugin name="video" .../>

<imgage>

控制全景圖設置

<image>
            <sphere url="plugin:video" />
      </image>

<action>

定義動態代碼，理解爲Function

<action name="skin_show">
        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);
    </action>

<control>

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

<control mouse="drag"
             touch="drag"
             zoomtocursor="false"
             zoomoutcursor="false"
             draginertia="0.1"
             dragfriction="0.9"
             movetoaccelerate="1.0"
             movetospeed="10.0"
             movetofriction="0.8"
             keybaccelerate="0.09"
             keybfriction="0.94"
             keybfovchange="0.25"
             mousefovchange="1.0"
             fovspeed="3.0"
             fovfriction="0.9"
             bouncinglimits="true"
             />

<cursors>

定義光標類型，官方文檔

<cursors standard="default"
             dragging="move"
             moving="move"
             />

<style>

通常用來定義公共樣式，好比定義一張雪碧圖

<style name="skin_base" url="calc:videointerfacexmlpath.url + skin_settings.design_skin_images" />

<layer>

這個元素很強大，能夠有多種功能，插入圖片，生成容器，基本上咱們在播放器上能看到的東西都是用它生成的。

<layer name="skin_btn_playpause" style="skin_base|skin_glow" crop="0|640|64|64" align="left" x="5" y="0" scale="0.35" onclick="plugin[video].togglepause();" />

<events>

事件元素

<events name="skin_events" keep="true"
            onclick="skin_video_click_event();"
            onmousedown="skin_video_down_event();"
    />

<contextmenu>

定義右鍵菜單內容

<contextmenu>
        <item caption="videpano"/>
    </contextmenu>

JS和Action互相調用

JS調用Action

function krpanoReady(krpano){
       setTimeout(function(){
           krpano.call("skin_video_playpause_click");
       }, 1000);
    }

Action調用JS，若是要讀取一個變量，則必定要寫在get函數中，不然只是一個string

<action>
      js(test(get(device)));
   </action>

經常使用動做，內置Action

if(...,true,false)

if函數，接收三個參數，第一個參數爲條件，第二參數爲true，第三個參數爲false

delayedcall(name, time, callback)

至關於settimeout

stopdelayedcall(name)

銷燬delated

tween(layer[skin_control_bar].alpha, 1.0);
  
    •    variable，要作變化的屬性
    •    value，變化的值
    •    time (optionally)，變化時間，單位爲秒
    •    tweentype (optionally)，動畫類型，默認爲 linear
    •    donecall (optionally), 動畫結束的回調
    •    updatecall (optionally)，動畫執行過程當中的回調

動畫

set(var1, 'value')

賦值或者定義變量，第一個變量能夠是自定義也能夠是krp的元素的變量。看下官方給的例子。

set(var1, 'hello');
    set(var2, get(var1));
    set(fullscreen, true);
    set(layer[p1].visible, false);
    set(hotspot[h1].scale, 2.5);
    set(contextmenu.item[0].caption, 'hello item');
    set(events.onxmlcomplete, null);

get(var1, 'value')

獲取變量值

copy(var1, 'value')

copy是set的升級版，咱們看到set的第二個例子，若是第二個參數是一個變量，必需要加get動做，可是copy就不須要，其餘和set相似。

Action 接收參數

咱們調用action的時候會傳參數進來，這時候在action接收傳過來的參數的語法是 %1

<action name="test">
            copy(t1, %1); // A
            copy(t2, %2); // B
            copy(t3, %3)  // C
     </action>
        
     test('A', 'B','C')

大於和小於

在krp中不能使用 < or >，必須是用 GT 和 LT

video事件

set(plugin[video].onvideoready, skin_video_updatestate() );
    set(plugin[video].onvideoplay, skin_video_updatestate() );
    set(plugin[video].onvideopaused, skin_video_updatestate() );
    set(plugin[video].onvideocomplete, skin_video_updatestate() );
    set(plugin[video].onerror, skin_video_error() );