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