Krpano 随笔 (二) 全景视频

素材准备

krpano支持的视频格式有这么多

MPEG4 / H264、WebM 、Ogg Theora、Flash Video、RTMP Video Streaming、HTTP Live Streaming

那其实支持最广的还要属MPEG4

导演拍好给我们的全景视频文件非常大，不适合在网络上传播，所以首先我们需要的是压缩视频。

在官方全景视频示例文件中我们可以看到

可以看到有两个分辨率的视频可以适应不同的网络情况和设备情况。

现在就是想办法把我们的视频也稍稍压缩下有如下三种方法：

1.HandBrake 速度快，安装包小，是很多专业人员认可的软件

下载地址：HandBrake: Downloads

2.其次有个专用在krpano上的转换器 应该是哪个博主写的

PanoVideo Converter 百度网盘 请输入提取码 3ncy

3.推荐使用FFmpeg好多播放器等都基于这个开源项目

GitHub - FFmpeg/FFmpeg: Mirror of https://git.ffmpeg.org/ffmpeg.git

生成好所需要的视频咱们准备工作就完成了！

编码准备

目录搭建

​

/vrout //整体项目文件夹

        /html （自己添加）存放项目中引用到的html页面

        /panos krpano自带全景制作工具制作生成的

        /plunins 全景网站用到的一些 “ .js、.xml、.swf “ 插件

        /skin 开发全景网站用的皮肤插件

        /src （自己添加）存放此项目的代码-各种xml等文件

                /img 项目中需要用到的全景图片等文件

                /utils 项目中的工具类，如字幕，弹窗等

        /videos 存放项目中的全景视频

将视频放入场景

tour.xml

<krpano>
    <!--START include the interface -->
    <include url="../../skin/videointerface.xml"/>
    <!--END include the interface -->

    <!--START Page Function -->
    <action name="startup" autorun="onstart">
        if(device.panovideosupport == false,
        error('Sorry, but panoramic videos are not supported by your current browser!');
        ,
        loadscene(videopano);
        );
    </action>

    <action name="play">
        plugin[video].play();
    </action>
    <!--END Page Function -->


    <scene name="videopano" title="系统任务提示">
        <plugin name="video"
                url.html5="/vtour/plugins/videoplayer.js"
                url.flash="/vtour/plugins/videoplayer.swf"
                pausedonstart="true"
                loop="false"
                volume="1.0"
                onloaded="add_video_sources();"
                onvideoready="play();"
                onvideocomplete=""
                onvideoplay=""
                onvideopaused=""
                onerror=""
        />
        <!-- use the videoplayer plugin as panoramic image source -->
        <image>
            <sphere url="plugin:video"/>
        </image>

        <!-- set the default view -->
        <view hlookat="0" vlookat="0" fovtype="DFOV" fov="130" fovmin="75" fovmax="150" distortion="0.0"/>

        <action name="add_video_sources">
            videointerface_addsource('1920x960',
            '/vtour/videos/step1/2/pvideo1920x960.mp4|/vtour/videos/step1/2/pvideo1920x960.webm',
            '/vtour/videos/step1/2/poster1920x960.jpeg');
            videointerface_addsource('2560x1280',
            '/vtour/videos/step1/2/pvideo2560x1280.mp4|/vtour/videos/step1/2/pvideo2560x1280.webm',
            '/vtour/videos/step1/2/poster2560x1280.jpeg');
            videointerface_addsource('3840x1920',
            '/vtour/videos/step1/2/pvideo3840x1920.mp4|/vtour/videos/step1/2/pvideo3840x1920.webm',
            '/vtour/videos/step1/2/poster3840x1920.jpeg');
            videointerface_play('1920x960');
        </action>
    </scene>
</krpano>

注：这边有个坑虽然设置了onvideoready="play();" 但是因为有些浏览器（包括chrome）不允许进入页面就播放，所以还需要用户进入页面后点一下才能开始播放；我们唯一能做的就是