使用 krpano 实现全景视频

2016-06-28 13:26:00

使用 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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！