krpano HTML5 Viewer官方说明文档

krpano HTML5 ViewerVersion 1.18

krpano HTML5 viewer是用于在浏览器中直接显示全景图像的或使用CSS 3D Transforms或使用WebGL的HTML5/Javascript客户端应用,不需要任何插件。krpano HTML5 viewer与krpano Flash viewer共用相同的xml文件和图像。因此可以使用相同的文件和代码控制和设置两种viewer。全景或漫游只需要制作一次,然后在任何环境下都能自动工作。

示范

下面是在浏览器上测试HTML5兼容性的示例 – 左侧为HTML5右侧为Flash:


 ico-nextlink 查看更多关于html5 viewer嵌入设置

支持的系统和浏览器

HTML5、CSS 3D变形以及WebGL是非常先进的技术,在很多的浏览器和系统上的实现是不同的,支持的水平也不同,出现的问题也不同。krpano HTML5 viewer从内部处理所有这些区别,以尽可能的良好表现在全部系统和浏览器上获得相同的输出。 

krpano HTML5 Viewer支持下述系统和浏览器:

(更新日期: 2014 十月 – krpano 1.18)

 

  • iOS设备上的Mobile Safari (iPhone, iPad, iPod Touch)
    • viewer针对这些设备作了完美的优化。
    • 应该不会有显示或控制的问题。
    • viewer应该在所有其它基于iOS浏览器和app的Safari和Webview中运行良好,但可能会有问题,例如错误的显示定位,这些功能在这些浏览器和app上无法正确实现。
    • 这些设备上的内存使用受到限制,当太多内存被使用时(HTML页面同时使用太多或太大的图像),那么Safari浏览器很容易崩溃。为了避免这个问题,要时刻注意全部图像的像素尺寸(全景图和皮肤设计图像)。
    • iOS版本注意事项:
      • 推荐iOS7.1或以上。
      • iOS7.0有多个内存问题,非常不稳定。
      • 对于多分辨率的最低iOS版本是5.1。
      • 对于普通全景的最低iOS版本是4.1。
  • Google Chrome (Windows, Mac, Linux)
    • 需要使用Goolge Chrome Version 20或以上版本。(Version 20是第一个正确支持CSS 3D渲染的Chrome版本,其它的旧版本都存在“3D-clipping”问题)。
    • 只有当WebGL或/和硬件加速CSS 3D变形可用时,才能正确显示全景。
    • 总体上的运行、表现和支持是非常不错的。
    • Chrome同样在桌面上支持多点触屏使用。
  • Mozilla Firefox (Windows, Mac, Linux)
    • 需要使用Firefox Version 10或以上版本(首个支持CSS 3D的版本)。
    • 只有当WebGL或/和硬件加速CSS 3D变形可用时,才能正确显示全景。
    • 大部分时间多点触屏使用在桌面上使用是正常的,但有时间Firefox会忘记触屏控制,然后开始发生鼠标事件来取代(Firefox bug)。
    • 在WebGL模式的总体上的运行、表现和支持是非常不错的。在CSS 3D摸下中,可能有若干个不同的渲染错误(取决于Firefox的版本和系统),因此krpano嵌入脚本会尝试在Firefox中运行CSS 3D模式。
    • 注意 – Firefox不支持mp3/h264音频/视频编码,因此需要使用其它的文件格式。
  • Microsoft Internet Explorer (Windows 7, Windows 8, Windows RT, Windows Phone 8)
    • 需要使用Internet Explorer Version 10或以上版本(第一个正确支持HTML5、XML以及CSS 3D的版本)。
    • 在桌面以及’Metro/Windows 8′ IE10版本运行是一样的。
    • 也支持Windows 8平板。但非ARM平板会被检测为桌面——微软不允许检测设备是桌面系统还是平板系统。
    • 总体上的运行、表现和支持是非常不错的。当使用含有阴影效果的textfield时会有一些表现问题。也就是说要在IE上获得最佳表现,避免或限制使用阴影。
    • IE10有时候会出现一些图形/显示上的小错误 – 元素的边缘(例如立方体面或热点)可能因为渲染错误变得明显。
    • IE10在手机、平板和桌面上支持多点触控使用。
    • IE11支持WebGL和HTML5全屏API。
  • 桌面Safari (Windows and Mac)
    • 推荐使用Safari 5.1或以上版本。
    • 表现良好运行良好。
    • 只有Window-Safari版本会有一些问题 – 鼠标移动有时候会短时间被阻塞/挂起(但同时鼠标滚轮和键盘控制则正常工作)并且内存需求会非常大导致浏览器崩溃。
  • Android浏览器
    • Android Stock (基于WebView) 浏览器 (在Android 4.4之前)
      • 需要Android 4.0或以上。
      • 要支持HTML5多分辨率,Android浏览器需要支持WebGL。原生的Android浏览器在支持HTML5多分辨率上存在很多问题。
      • 目前在Android原生 (=相当于基于WebView) 浏览器上支持CSS 3D变形仍然有一些不可靠和不可预测。即使是相同的Android版本在不同的Android设备中都会不一样的渲染。某些设备表现很好,某些则存在问题。
      • 只有支持硬件加速的Android浏览器才能正确显示CSS 3D变形!在某些情况(较低的显存)下,浏览器会自动切换到内部工作模式,称之为 ’tiled based Software-Rendering‘,会变得非常满非常多问题。在这个情况下会有奇怪的图形错误或者镜像的立方体图像。
      • 当CSS 3D能够渲染时,渲染的表现可以是不错也可能是非常不错。浏览器的稳定性取决于当前可用的内存。
    • Android Chrome浏览器
      • 需要使用Goolge Chrome Version 20或以上版本。(Version 20是第一个正确支持CSS 3D渲染的Chrome版本,其它的旧版本都存在“3D-clipping”问题)。很多设备预装了Chrome 18版本 – 它们需要通过APP商店进行更新。krpano嵌入脚本只支持版本18以上。
      • 总体的运行、支持和稳定性是非常不错的,表现的差异从可以到非常不错。
    • Android Opera (基于Webkit-based) 浏览器
      • 新版的基于Webkit的Opera浏览器运行得很好。
      • 它的运行与Android Chrome相似,但默认启用WebGL – CSS 3D和WebGL都运行得很好。
      • krpano会将Opera浏览器检测为Chrome浏览器。
    • Android Firefox浏览器 
      • 需要使用Firefox Version 18或以上版本(首个支持CSS 3D和触控控制的版本)。
      • Android Firefox浏览器针对全景渲染提供CSS 3D和WebGL支持。
        • CSS3D仍然有一些贴片错误(当放大时会变得明显),但表现仍然是非常不错的。
        • 在Android Firefox 22之前,WebGL渲染非常慢。但在版本22中,Mozila引入注目地改善了WebGL表现,因此在Firefox22或以上版本,krpano会优先使用WebGL。
        • 查看krpano嵌入到HTML设置获取更多关于以上表现设置的信息。
      • 总体的运行、支持和表现(在Firefox 22和WebGL下)是非常不错的。
  • BlackBerry设备
    • 部分BlackBerry设备支持WebGL,当WebGL可用时,全景表现得不错。
    • 在BlackBerry浏览器上有一个小问题 – 通过 <canvas>元素生成的图像不能上传作为纹理 – 它们总是黑色的。也就是说在krpano中预览图全景在BlackBerry设备是黑色的。
    • 除此之外,表现得非常不错。

测试设备

krpano viewer在下面设备测试过:

  • Windows系统
    • 不同Windows版本下的几种常见的桌面和笔记本设备。 (XP, Vista, Windows 7 与 Windows 8.1)
    • Sony Vaio Tap 20 (Windows 8.1 多点触控桌面系统)
    • Microsoft Surface (Windows 8.1 RT)
  • Mac OSX设备
    • MacMini 2011
    • MacBook 2010
  • Android设备
    • Samsung Galaxy S3 (Android 4.3)
    • Samsung Galaxy S5 (Android 4.4.2)
    • Samsung Galaxy Tab 10.1 (Android 4.0.4)
    • Google Nexus One (Android 2.3.6)
    • Google Nexus S (Android 4.1.2)
    • Google Nexus 7 (Android 4.4.2)
    • Google Nexus 9 (Android 5.0)
    • Asus Transformer Pad TF700T (Android 4.2.1)
    • Medion Lifetab S9512 (Android 4.0.4)
  • BlackBerry设备
    • Playbook (OS 2.1)
  • iOS设备
    • iPad 1 (iOS 5.1.1)
    • iPad 2 (iOS 6.0)
    • iPad 3 (iOS 8.0.2)
    • iPad Air (iOS 8.1)
    • iPad Air 2 (iOS 8.1)
    • iPad Mini (iOS 7.1)
    • iPad Mini Retina (iOS 8.0.2)
    • iPhone 3GS (iOS 6.0)
    • iPhone 4 (iOS 4.3.3)
    • iPhone 4 (iOS 8.1)
    • iPhone 5 (iOS 8.0.1)
    • iPhone 5 (iOS 8.1.1 beta)
    • iPhone 6 (iOS 8.1)
    • iPhone 6 Plus (iOS 8.1)
    • iPod Touch 2.Gen (iOS 3.1.3)
    • iPod Touch 4.Gen (iOS 6.0)
  • Windows Phone设备
    • Nokia 630 (Windows Phone 8.1)
    • Nokia 930 (Windows Phone 8.1 Update 1)

支持的全景图像格式

Viewer支持 – 仅 Cubical 与 flat 全景

目前krpano HTML5 Viewer仅支持cubical以及flat全景图。
为什么? ⇒ HTML5 CSS 3D变形只能在3D空间中转换平面的HTML页面,只允许使用含有六个立方体面的全景图格式或者是平面全景的平面。

Tools支持 – Spherical, Cylindrical 与 Cubical

要使用其它格式,例如spherical或cylindrical,,需要使用krpano工具和快捷批处理。它们可以将这些图像(只支持hfov=360)自动转化为立方体图像,同时设置观看限制范围,避免看到转换后的立方体图像不使用的部分。

如何使用?

krpano HTML5 Viewer就是krpano.js文件。

krpano HTML5 Viewer只能由krpano嵌入到HTML脚本载入。当需要和可用时,这个嵌入脚本会自动载入HTML5 viewer(取经于html5嵌入设置)。

使用krpano快捷批处理时,会创建一个js文件。js文件将嵌入脚本和HTML5 viewer整合成一个文件。在这种情况下,只需要嵌入一个文件。

在手机上使用的注意事项(iPhone, iPad, Android)

为了在iPhone、iPad以及Android手机和平板上获得最优性能和稳定性,要不使用多分辨率全景要不使用更小的立方体图像
krpano HTML5 viewe可以更大的桌面图像并且即时将它们缩小,但为了更好的提高效率,使用已经缩小好的图像会更好,载入也更快。
使用 html5 display 设置,控制手机端的立方体图像大小。

有几种为手机端设置图像的方法:

  • 使用专用的手机端图片(针对手机和平板)在xml中通过<image>元素里的<mobile>元素进行指定:
    <image>
    <cube url=”pano_%s.jpg” />
    <mobile>
    <cube url=”mobile_%s.jpg” />
    </mobile>
    </image>
  • 使用devices设置和专用图像控制哪一种图像在哪一个设备中应用:
    <image devices=”Desktop”> <cube url=”pano_%s.jpg” /> </image>
    <image devices=”Mobile”> <cube url=”mobile_%s.jpg” /> </image>
    <image devices=”Tablet”> <cube url=”tablet_%s.jpg” /> </image>
    <image devices=”iPad+Retina”> <cube url=”ipad3_%s.jpg” /> </image>
  • 结合以上两种方式
    <image>
    <cube url=”pano_%s.jpg” />
    <mobile devices=”mobile”> <cube url=”mobile_%s.jpg” /> </mobile>
    <mobile devices=”tablet”> <cube url=”tablet_%s.jpg” /> </mobile>
    </image>

注意- 也可以查看嵌入到HTML说明文档中的手机使用注意事项

HTML5全屏模式 

  • 从1.0.8.15 build 2012-10-05开始,krpano HTML5 viewer就支持HTML5 Fullscreen API。当浏览器支持API(iOS当前还不支持)就可以在HTML5切换到全屏模式。
  • 为了检测全屏模式是否可用和支持,需使fullscreensupportxml设备设置以及krpano动作的device.fullscreensupport变量。
  • 关于<iframe>用法的注意事项:当尝试在iframe里的viewer中使用HTML5全屏模式,需要在<iframe>声明中增加allowfullscreen参数。该参数告诉浏览器该iframe允许切换到全屏。

    示例:
    <iframe … allowfullscreen=”true” mozallowfullscreen=”true” webkitallowfullscreen=”true”></iframe>


    注意 – 当iframe用法不被允许时,某些浏览器可能无法正确报告,因此在这种情况下, fullscreensupport设备设置能够告知错误的可用性。

工具/快捷批处理

krpano makepano工具以及MAKE PANO / MAKE VTOUR快捷批处理拥有全新的配置设置,可自动应用krpano HTML5 viewer并且针对手机端自动生成更小的图片。

这些设置对于HTML5很重要(点击设置查看详细说明):

# 设置html5应用方法
html5=auto#转换spherical/cylindrical到cubical
converttocube=true
converttocubelimit=360×45# 生成尺寸更小的手机专用图片
customimage[mobile].size=1024
customimage[mobile].path=mobile_%s.jpg
customimage[mobile].imagesettings=…
customimage[mobile].xml=<mobile> <cube url=”[PATH]” /> </mobile>

注意 – 当增加手机端图片的默认尺寸时,也需要增加display.hardwarelimit设置。

在桌面上测试krpano HTML5 Viewer

在保持默认Flash用法的同时,有多种方式在桌面上测试krpano HTML5 Viewer。

  • 使用html5设置作为路径参数
    • 在html中添加和启用passQueryParameters设置:
      embedpano({…., passQueryParameters:true});
    • html5=only作为参数添加到路径中进入全景:
      tour.html?html5=only
  • (临时)屏蔽Flash插件 
    • Firefox: Add-Ons ⇒ Plugins ⇒ ‘Shockwave Flash’ ⇒ Disable
    • Chrome: 进入 ‘chrome://plugins/’ ⇒ 点击 ‘disable’ 应用到全部的 ‘Shockwave Flash’ plugins
    • Safari: Settings菜单 ⇒ Security标签 ⇒ 去掉 ‘enable Plugins’的勾选
    • IE: Settings图标⇒ Security菜单 ⇒ 勾选 ‘ActiveX-Filtering’

在桌面上测试iPhone / iPad设计和图像

为了在桌面上模拟和测试iPhone或iPad设备,应该使用兼容HTML5的浏览器以及simulatedevice嵌入设置。当设置了该设定后,viewer的表现就跟在这些设备上运行一样(除了鼠标和触屏控制)- 相同的设计缩放、相同的devices设置、相同的全景图。

krpano iPhone/iPad Simulator (包含在下载包) 就是使用了该设置,同时使用了专门设计的背景和窗口。

未来发展

krpano HTML5 Viewer目前仍然缺少一些只能在krpano Flash Viewer使用的功能(例如局部全景和环物全景),但实现这些功能只是时间问题。

HTML5浏览器和设备随着版本更新变得越来越好。 krpano也一样在发展会运用到这些改进。在两个系统中Flash和HTML5拥有相同的界面已经有一些很不错的优点——全景项目只需要制作一个,从Flash到HTML5的转换几乎是无缝的。

支持/未支持的功能 (更新状态: krpano 1.18)

krpano Flash和HTML5 Viewer几乎提供同样层面的功能,因此要列出支持的功能会太多,下面只列出目前还不支持的功能: a

不支持的功能:

  • 环物全景/多帧动画 – 目前不支持,但已经在开发中。
  • 镜头眩光 – 目前不支持,但已经在开发中(WebGL下)。

不支持的xml元素/变量/动作:

发表评论