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

        }
    });
    

官方文档

官方文档

这是两个最重要的文件，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("高清");
        

我们后面面对的几乎都是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);
    

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

定义光标类型，官方文档