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