更新于 2020.11.19 krpano 1.20.9
krpano所支持的全景视频尺寸说明
krpano本身不限制视频尺寸或包含其它方面的要求。
原因在与用户所使用的系统和浏览器的限制。
- 浏览器必须能够载入和解码视频，如果无法实现则得到视频加载错误提示。
- 然后浏览器或系统所支持的最大贴图尺寸需要大于视频文件的尺寸，这样视频才能作为全景视频播放（部分低端和中端系统最大尺寸为4096*4096）。
使用默认漫游皮肤的全景视频功能
- 在krpano 1.19 pr4之后的版本用krpano制作漫游变得非常简单，你可以很快捷地制作包含多个全景视频的全景漫游，你可以让全景视频和普通全景结合，也可以加入VR功能。
- 制作多个全景视频或全景视频和普通全景混搭的方法：首先是使用MAKE VTOUR Droplet生成我们熟悉的默认漫游vtour文件夹。
- 如果你只需要单独把下面的代码插入到tour.xml的scene标签之间，自行安排位置。如果是多个视频，则可以删除掉panos文件夹和scene标签，自行选择插入全景视频的位置，复制代码并更改不同全景视频scene的name即可，2个全景视频，则下面的代码是两次复制，只是对应的scene的name和视频路径的区别。如果你是混搭的，那生成时就使用对应的普通全景图，然后按照你想要的位置进行安排。
- 点击代码窗口最右侧按钮，在新窗口打开后复制代码
-
12345678910111213141516171819202122232425<scene name="videopano" isvideopano="true" thumburl="%CURRENTXML%/video-1024x512-poster.jpg" title="全景视频"><!-- include the videoplayer plugin --><plugin name="video"url.html5="%SWFPATH%/plugins/videoplayer.js"url.flash="%SWFPATH%/plugins/videoplayer.swf"pausedonstart="true"loop="true"volume="1.0"posterurl.ios="%CURRENTXML%/video-1024x512-poster.jpg"videourl.ios="%CURRENTXML%/video-1024x512.mp4|%CURRENTXML%/video-1024x512.webm|%CURRENTXML%/iphone-audio.m4a"posterurl.no-ios="%CURRENTXML%/video-1920x960-poster.jpg"videourl.no-ios="%CURRENTXML%/video-1920x960.mp4|%CURRENTXML%/video-1920x960.webm|%CURRENTXML%/iphone-audio.m4a"onvideoready="skin_showloading(false);"/><!-- 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" /></scene>
-
- name是scene的名字，不管是普通全景或者全景视频的scene，每个scene要有不一样的名字。thumburl是指定缩略图的路径。isvideopano指定了这个场景为全景视频，这样皮肤就会添加视频控制。然后在下面videourl以及posterurl的位置添加对应的视频和视频截图的位置。
- 当然，最后不要忘记把视频、音频和截图复制到对应的路径中。
- 建议使用1.20以上版本制作。1.20.9版本完美支持微信。
使用example文件夹的videopano案例
- 首先使用MAKE VTOUR Droplet，任意找一张全景图生成我们熟悉的默认漫游vtour文件夹。
- 然后打开krpano下载包krpano 1.20.9的路径，如下图找到videopano文件夹：
- 将该videopano文件夹的全部内容复制到刚用MAKE VTOUR Droplet生成的vtour文件夹中。如下图：
- 删除上图中红色框选的部分，也就是panos文件夹、index.html以及tour.xml
- 将videopano.xml改文件名为tour.xml
- 使用全景视频转换器生成相应的mp4、webm、jpg和m4a文件，改成跟videopano文件夹内对应格式的一样的文件名，然后复制并且覆盖到原来的文件。
- 完成
krpano 1.18.6（不建议使用）
- 首先确保使用的是正式版krpano。打开下载包中的examples的videointerface文件夹。我们看到了有2种分辨率的各2种格式的视频，还有对应视频的截图，建议你也准备两种分辨率2种不同格式的视频，以备不同设备不同浏览器正常使用。不同的视频使用分隔符隔开。在本案例中是按照一种分辨率进行教程编写的。同时我们打开一个普通的用MAKE VTOUR生成的全景项目。里面有我们需要使用到的tour.js和tour.swf。
VIP会员可查看：全景视频项目生成器
全景视频案例完整代码下载
链接：http://pan.baidu.com/s/1kUxU2mb 密码：
以下隐藏内容只提供VIP赞助会员，VIP会员说明请查看置顶文章
）
- 我们把上图videointerface文件夹里面的全部内容以及普通全景项目的tour.js和tour.swf拷贝到一个新的文件夹。注意，因为在独立文件夹中必须要有krpano的viewer（浏览引擎），因此需要将这两个viewer（tour.js和tour.swf）拷贝过去。同时把我们的视频BEACH.mp4也拷贝过去。删掉原来的四个视频和2个图片。新建一个截图BEACH.png
- 还要新建一个plugins文件夹，把textfield插件和videoplayer插件拷贝进去。
- 用编辑器打开index.html，将下图中前图中的viewer改为对应的viewer路径。同时注意修改title标签内的文字。
- 然后打开video.xml，可以看到
正是之前我们删掉的四个视频和两个图片的路径，如果你也是四个视频和两个图片，可以仿照以上路径。这里我们都用同一个视频和同一个图片。12345posterurl.ios="video-1024x512-poster.jpg"videourl.ios="video-1024x512.mp4|video-1024x512.webm"posterurl.no-ios="video-1920x960-poster.jpg"videourl.no-ios="video-1920x960.mp4|video-1920x960.webm"
- 对setup_video_controls的说明
假如你还有第三种分辨率，例如3840×1920，然后你生成了两种格式。你可以改成这样12345678910111213<action name="setup_video_controls"><!-- 添加视频控制皮肤的条目 -->videointerface_addmenuitem(configmenu, vqtitle, 'Select Video Quality', true, videointerface_toggle_configmenu() );videointerface_addmenuitem(configmenu, q1, '1024x512', false, change_video_file(q1, 'video-1024x512.mp4|video-1024x512.webm'); );videointerface_addmenuitem(configmenu, q2, '1920x960', false, change_video_file(q2, 'video-1920x960.mp4|video-1920x960.webm'); );<!-- 选择默认初始条目 -->if(device.ios,videointerface_selectmenuitem(configmenu, q1);,videointerface_selectmenuitem(configmenu, q2););</action>
当然你得在正确的路径有下面两个文件，也就是在根目录下。1234567891011121314<action name="setup_video_controls"><!-- 添加视频控制皮肤的条目 -->videointerface_addmenuitem(configmenu, vqtitle, '选择视频品质', true, videointerface_toggle_configmenu() );videointerface_addmenuitem(configmenu, q1, '1024x512', false, change_video_file(q1, 'video-1024x512.mp4|video-1024x512.webm'); );videointerface_addmenuitem(configmenu, q2, '1920x960', false, change_video_file(q2, 'video-1920x960.mp4|video-1920x960.webm'); );videointerface_addmenuitem(configmenu, q3, '3840x1920', false, change_video_file(q3, 'video-3840x1920.mp4|video-3840x1920.webm'); );<!-- 选择默认初始条目 -->if(device.ios,videointerface_selectmenuitem(configmenu, q1);,videointerface_selectmenuitem(configmenu, q2););</action>
1video-3840x1920.mp4|video-3840x1920.webm
- 因为我们本例只有一种格式，不需要做品质切换，因此直接删掉了所有语句。
- 直接把这个根目录命名后，上传到FTP后就可以在线浏览了。