使用 krpano 实现全景视频
使用 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的视频水印，如果是商用则建议大家支持正版。
官方文档
videopano.xml 和 videointerface.xml
这是两个最重要的文件，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('高清');XML静态代码
我们后面面对的几乎都是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);设置鼠标/移动设备/键盘 对视频的控制 官方文档
定义光标类型，官方文档
一般用来定义公共样式，比如定义一张雪碧图
这个元素很强大，可以有多种功能，插入图片，生成容器，基本上我们在播放器上能看到的东西都是用它生成的。
事件元素
定义右键菜单内容
JS和Action互相调用
JS调用Action
function krpanoReady(krpano){ setTimeout(function(){ krpano.call("skin_video_playpause_click"); }, 1000);}Action调用JS，如果要读取一个变量，则一定要写在get函数中，否则只是一个string
js(test(get(device)));常用动作，内置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
copy(t1, %1); // A copy(t2, %2); // B copy(t3, %3) // C test('A', 'B','C')大于和小于
在krp中不能使用 ，必须是用 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() );关键字：JavaScript, krpano
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
