使用 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的视频水印,如果是商用则建议大家支持正版。

使用 krpano 实现全景视频_第1张图片

LICENSE 购买地址 根据自己的需要选择相应的版本,秘钥会发送到你的注册邮箱中,我们打开刚刚下载到的文件找到生成文件的工具 krpano Tools

双击打开就能看到下面的界面

使用 krpano 实现全景视频_第2张图片

粘贴你的秘钥然后点击注册就完成了

使用 krpano 实现全景视频_第3张图片

点击 Generate Viewers 按钮,输入文件名后,一般都输入 krpano,完成后会生成两个同名文件,将原始文件替换掉就成了,打开视频,按下O键,就可以看到你的注册信息了。

具体可以看中文网里的文章 购买、下载、注册

基本配置

首先要了解两个配置,一个是入口文件配置,一个是插件配置,这两个配置都很简单

初始化配置

    embedpano({
        swf:"player.swf",
        xml:"videopano.xml", 
        target:"pano",
        html5:"auto", 
        passQueryParameters:true, 
        onready:function(krpano){

        }
    });
    

官方文档

plugin 配置

    

官方文档

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);
    

设置鼠标/移动设备/键盘 对视频的控制 官方文档

    

定义光标类型,官方文档