移花接木(22)- krpano制作简单的全景视频项目

更新于 2020.11.19 krpano 1.20.9

krpano所支持的全景视频尺寸说明

krpano本身不限制视频尺寸或包含其它方面的要求。

原因在与用户所使用的系统和浏览器的限制。

  • 浏览器必须能够载入和解码视频,如果无法实现则得到视频加载错误提示。
  • 然后浏览器或系统所支持的最大贴图尺寸需要大于视频文件的尺寸,这样视频才能作为全景视频播放(部分低端和中端系统最大尺寸为4096*4096)。

 

使用默认漫游皮肤的全景视频功能

  • 在krpano 1.19 pr4之后的版本用krpano制作漫游变得非常简单,你可以很快捷地制作包含多个全景视频的全景漫游,你可以让全景视频和普通全景结合,也可以加入VR功能。
  • QQ图片20160413055345
  • 制作多个全景视频或全景视频和普通全景混搭的方法:首先是使用MAKE VTOUR Droplet生成我们熟悉的默认漫游vtour文件夹。
  • 如果你只需要单独把下面的代码插入到tour.xml的scene标签之间,自行安排位置。如果是多个视频,则可以删除掉panos文件夹和scene标签,自行选择插入全景视频的位置,复制代码并更改不同全景视频scene的name即可,2个全景视频,则下面的代码是两次复制,只是对应的scene的name和视频路径的区别。如果你是混搭的,那生成时就使用对应的普通全景图,然后按照你想要的位置进行安排。
  • 点击代码窗口最右侧按钮,在新窗口打开后复制代码
  •  
  •  QQ图片20160413055441
  • name是scene的名字,不管是普通全景或者全景视频的scene,每个scene要有不一样的名字。thumburl是指定缩略图的路径。isvideopano指定了这个场景为全景视频,这样皮肤就会添加视频控制。然后在下面videourl以及posterurl的位置添加对应的视频和视频截图的位置。
  • 当然,最后不要忘记把视频、音频和截图复制到对应的路径中。
  • QQ图片20160413055506
  • 建议使用1.20以上版本制作。1.20.9版本完美支持微信。

 

使用example文件夹的videopano案例

  • 首先使用MAKE VTOUR Droplet,任意找一张全景图生成我们熟悉的默认漫游vtour文件夹
  • 然后打开krpano下载包krpano 1.20.9的路径,如下图找到videopano文件夹:
  • QQ图片20160906001758
  • 将该videopano文件夹的全部内容复制到刚用MAKE VTOUR Droplet生成的vtour文件夹中。如下图:
  • QQ图片20160906002402
  • 删除上图中红色框选的部分,也就是panos文件夹、index.html以及tour.xml
  • videopano.xml改文件名为tour.xml
  • QQ图片20160906002506
  • 使用全景视频转换器生成相应的mp4、webm、jpg和m4a文件,改成跟videopano文件夹内对应格式的一样的文件名,然后复制并且覆盖到原来的文件。
  • 完成

 

krpano 1.18.6(不建议使用)

  • 首先确保使用的是正式版krpano。打开下载包中的examplesvideointerface文件夹。我们看到了有2种分辨率的各2种格式的视频,还有对应视频的截图,建议你也准备两种分辨率2种不同格式的视频,以备不同设备不同浏览器正常使用。不同的视频使用分隔符隔开。在本案例中是按照一种分辨率进行教程编写的。同时我们打开一个普通的用MAKE VTOUR生成的全景项目。里面有我们需要使用到的tour.jstour.swf

VIP会员可查看:全景视频项目生成器

全景视频案例完整代码下载

链接:http://pan.baidu.com/s/1kUxU2mb 密码:

以下隐藏内容只提供VIP赞助会员,VIP会员说明请查看置顶文章

 

QQ图片20151019203458

  • 我们把上图videointerface文件夹里面的全部内容以及普通全景项目的tour.jstour.swf拷贝到一个新的文件夹。注意,因为在独立文件夹中必须要有krpano的viewer(浏览引擎),因此需要将这两个viewer(tour.jstour.swf)拷贝过去。同时把我们的视频BEACH.mp4也拷贝过去。删掉原来的四个视频和2个图片。新建一个截图BEACH.png

QQ图片20151019203654

  • 还要新建一个plugins文件夹,把textfield插件和videoplayer插件拷贝进去。

QQ图片20151019210336

QQ图片20151019210818

  • 用编辑器打开index.html,将下图中前图中的viewer改为对应的viewer路径。同时注意修改title标签内的文字。

QQ图片20151019204559

QQ图片20151019204622

  • 然后打开video.xml,可以看到
    正是之前我们删掉的四个视频和两个图片的路径,如果你也是四个视频和两个图片,可以仿照以上路径。这里我们都用同一个视频和同一个图片。

QQ图片20151019210009

QQ图片20151019210124

  • setup_video_controls的说明
    假如你还有第三种分辨率,例如3840×1920,然后你生成了两种格式。你可以改成这样
    当然你得在正确的路径有下面两个文件,也就是在根目录下。

QQ图片20151019210620

  •  因为我们本例只有一种格式,不需要做品质切换,因此直接删掉了所有语句。

QQ图片20151019210707

  • 直接把这个根目录命名后,上传到FTP后就可以在线浏览了。