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)不允许进入页面就播放,所以还需要用户进入页面后点一下才能开始播放;我们唯一能做的就是


                
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值