使用 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() );