运用 krpano 制造全景视频
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){
}
});
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.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.onvideoready, skin_video_updatestate() );
set(plugin.onvideoplay, skin_video_updatestate() );
set(plugin.onvideopaused, skin_video_updatestate() );
set(plugin.onvideocomplete, skin_video_updatestate() );
set(plugin.onerror, skin_video_error() );