• Hi,

    krpano version 1.18 is ready:
    One focus of the new version 1.18 was the HTML5 support for panoramic video but there are also a lot of detail improvements in all other aspects of krpano. Below an overview about a few new features in this version. For a full list about all news, changes and fixes, please have a look at the Release Notes.

    Best regards,

    Panoramic Video support for HTML5 (WebGL)

    • Using videos as panoramic image is now supported also in the krpano HTML5 viewer.
    • Depending on the system, the browser and the graphics hardware the video-playback can be much smoother and faster with HTML5 than with Flash.
    • Another nice feature of the HTML5 support is the 'free seeking' (or also called 'pseudo-streaming) - this makes it possible to seek within the video, even to parts that haven't already loaded yet. This can also be used to switch any time dynamically between several video files with different quality, resolution and bandwidth.
    • Technically the HTML5 panoramic video support will be only available and usable on systems and browsers that are supporting WebGL and the usage of videos as WebGL textures. This presumes modern and fast GPUs and up-to-date operating systems, browsers and graphic card drivers.
      Systems that are basically supported are:
      • Desktop: Chrome, Firefox, Opera, IE11, Mac Safari 8
      • Android: Chrome, Firefox, Opera
      • iOS: iPhones and iPads with iOS 8.0 or higher - for the iPhone krpano has a very special kind of support - normally Apple doesn't allow to show a video not as fullscreen video, but krpano uses a trick to bypass this restriction.
      Not capable systems (like iOS before 8.0 or older Android browsers) still can play the videos as flat-panos (with zooming and panning support by custom xml code).
    • From usage/xml perspective everything works basically just like in the Flash version. All interfaces are the same. All different panoramic projections (e.g. little planet, fisheye, pannini) and also all projection transitions (e.g. the spherical to flat transition) are supported and working the same in HTML5.
    • Additionally there is a new panoramic video interface skin (videointerface.xml) and an improved videoplayer plugin to utilize the new possibilities. The new videointerface skin provides:
      • A layout for desktop, tablet and mobile devices.
      • A loading / seek bar with direct click-to and dragging seeking.
      • An extendible and customizable menu interface - used in the default skin for control changing (move, drag, gyro), video quality changing and a menu for different panoramic projections.
      • An alternative flat-pano display and control mode (zooming and panning) when panoramic videos are not supported by the browser (no WebGL or no Video-to-WebGL support).
    • Some notes - please note that WebGL and WebGL+video is an emerging technology and so expect several browser and system related support-/rendering- or performance-problems. Here a list of known browser problems. The video to WebGL transfer is currently too slow in many browsers (especially in Safari). It would be surely possible to address and to improve these problems, but this would need to be done by the browser developers. The krpano WebGL rendering code itself is already highly optimized and very fast.

    Panoramic video examples:

    Thanks to www.airpano.com and www.360-grad-video.com for providing the panoramic videos!

    Mobile Devices Testing Videos:

    Spherical and cylindrical image support for HTML5 (WebGL)

    • Because of the new panoramic video support, where the flat videos were rendered as spherical pano, the krpano HTML5 viewer supports now also the direct usage of spherical and cylindrical images as panos. Any kind of partial pano (via the hfov, vfov and voffset settings) is supported too.
    • Using and rendering these images will be only possible when the browser is supporting WebGL. Even when supported now, such images should be used only for simplified or special usage cases. For the best image quality, the best rendering performance and the best multi-device, multi-browser support, the usage of cubical images would be still recommended.
    • Currently only single, non-tiled, non-multires spherical or cylindrical images are supported. Support for tiled/multires images support will come with the next krpano versions.

    Polygonal hotspot support for HTML5

    • The polygonal hotspots are supported also in HTML5 now.
    • Together with the new HTML5 support, the default colors and the way how the hotspots are working have been slightly changed (in Flash too) to provide more control (touch behavior) and more possibilities:
      • Now the colors / style of a polygonal hotspot will not change automatically on mouse hovering.
      • To change the colors on some user interaction (like mouse hovering), the onover and onout (or ondown and onup) events and the tween() action should be used now (the tween action can now change also colors).
      • For backward-compatibility the old automatic color changing on hovering and the old default colors are still supported in the Flash viewer, but only when the version number in the xml is lower than 1.18.
      • Because of technical reasons, the polygonal hotspots are always layered behind the image hotspots in HTML5.
    • The polygonal hotspots are supported and working on all systems and browsers, but their rendering performance can be a bit reduced on older mobile/tablet devices in some cases.
    • Examples:

    showtext() support for HTML5

    • There is a new 'xml-only' plugin that adds showtext() support also for HTML5: showtext plugin.
    • Just include the plugin via:
      <include url="showtext.xml" />
      and the showtext() action will be available also in HTML5. The usage itself is the same as in Flash.
    • The showtext xml plugin is based on the textfield plugin and some xml code and will override the build-in showtext() action. This way the same code can be used for Flash and HTML5 and the plugin itself is easier to maintain and to extend.
    • The new showtext() action will work identically in Flash and HTML5, except for the effect settings - due basic technical differences, it's not possible to do exactly the same as in Flash, but the HTML5 viewer tries to emulate that setting as good as possible. But by using the new shadow/textshadow settings instead of the effects setting, it would be possible to achieve the same results in both viewers.
    • The showtext.xml plugin provides additional <textstyle> settings:
    • Example: Showtext / Textstyles example

    Contextmenu for touch devices + Customizable look/style

    XML - Device checks for attributes

    • Often it can be useful to be able to define a certain attribute only for a specific device. Currently this was only possible by defining an additional xml element and using the devices attribute. With version 1.18 it's now possible to do device checks directly at the attribute definition.
    • This works by adding a dot
      character at the end of the attribute name and by defining there on which devices this attribute should be used. For example:
    • The syntax:
      • Everything before the first dot belongs to the name of the attribute itself and everything after the first dot belongs to the device check.
      • All the same devices as in the devices attribute can be used for the device checking.
      • Mixing several devices via logical AND, OR and NOT operators is possible too, but because of the xml-character-limitations with a slightly different syntax:
        • An
          can be used as AND operator to check if all given devices settings are matching (like the
          character in the devices attribute).
        • An
          can be used as OR operator to check if one of the given devices settings is matching (like the
          character in the devices attribute).
        • A
          prefix before a devices setting can be used to check if the given devices setting is NOT set (like the
          character in the devices attribute).
        • This new syntax can be used also in the devices attribute itself now.
      • Important to know: The order of xml-attributes is random and can differ each time! That means the order how the attributes were defined in the xml file don't need to be the same how they will be get loaded/parsed. Therefore never redefine attributes again with other devices settings that should override previous definitions!
        That means - DO NOT something like here:
        Correct would be:
    • The documentation:
    • Examples:
      scale.no-mobile="1.0" (the same as: scale.desktop.or.tablet="1.0")

    XML - Improved Actions / Scripting possibilities

    • The if() action is supporting
      operators and
      parenthesis now.
      if(var1 == 1 AND var2 == 2, ... );
      if(device.mobile OR device.tablet, ... );
      if(!anysetting, ... );
      if((num GT 1) AND (num LT 10), ... );
    • Automatic running / starting <action> via the new autorun setting.
    • The tween() action can now change several variables with one call and it can correctly tween/interpolate 32bit ARGB color values.
    • The new callwith() action can be used to run actions or code within the calling context/scope of <layer>, <plugin> or <layer> elements - e.g. to call and run an event from such element.
    • The new screentolayer(layer,sx,sy,lx,ly) and layertoscreen(layer,lx,ly,sx,sy) actions can be used to convert coordinates between the screen and a layer.
    • New wheeldelta_touchscale variable for getting the relative scale from a zoom touch gesture. This can be used for scaling custom images via the mouse wheel or via touch gestures - example
    • Other new actions: tohex(), tolower(), toupper(), clamp()

    XML - Improved Layer / Container elements

    • The container <layer> elements are now supporting borders, rounded edges and shadows (with several customizable options).
    • There are min/max settings for the layer width and height. This can be useful when using percent values for the width or height settings and limiting their resulting pixel sizes.

    Improved Gyroscope Support

    • The gyroscope plugin supports now also Android Chrome / Opera, Android Firefox and Windows Phone 8/IE11.
    • The Gyroscope sensor data in Android Chrome itself is still buggy, but when the device provides also acceleration and gravity-acceleration data, then the gyroscope plugin will be able to use that data to calculate and to simulate a proper gyroscope orientation.

    More news...

    • An embedded Youtube player example for Flash and HTML5.
    • A simple Videoplayer example.
    • Customizable languages for the Bing and Google map plugins.
    • A new fps plugin (xml-only).
    • Many detail improvements and fixes.
    • Updated and improved documentations and examples.
    • And many things more - please have a look at the Release Notes for more.

  • This is fantastic news Klaus.

    However I can't get the sample panoramic videos to load in Chrome on my Samsung S5:

    INFO: krpano 1.18 (build 2014-10-17)
    INFO: Android 4.4.2 (SM-G900F) - Chrome 38.0 - WebGL
    INFO: Registered to: krpano.com
    ERROR: parsing "../../plugins/videoplayer.js" failed: SyntaxError: Unexpected token <

    It works in the default android web browser but work diminished functionality as you describe.

  • Hi,

    Thanks all! *wink*

    Still waiting for html5 multi-res object *cool*

    Already in work, maybe ready for version 1.19...

    However I can't get the sample panoramic videos to load in Chrome on my Samsung S5:
    ERROR: parsing "../../plugins/videoplayer.js" failed: SyntaxError: Unexpected token <

    Try clearing the browser cache - there might be an old or invalid videoplayer.js in the cache for some reason (interrupted download?)...
    The videos should work very fine on a S5 in Chrome.

    Best regards,

  • Hi,

    Really nice performance on Iphone 6! congratulations!

    Thanks, but it could be even better if Apple would improve the 'Video to WebGL texture' transfer performance. Safari is currently the worst browser here (same on iOS and Mac) - Chrome, Firefox and IE are doing that way better and faster. Technically that's only a software/implementation problem inside Safari/Webkit, the hardware itself would be much faster.

    See also here at 'iOS 8 and Mac Safari 8 - Bad video to WebGL performance':

    I tried some video files It plays audio on desktop but I couldn't listen on the iphone!

    That's related to the iOS iPhone 'video-only-fullscreen' limitation - normally it wouldn't be possible to show a pano video in a iPhone browser not in 'fullscreen-only' mode. The krpano viewer uses a tricky solution to bypass this limitation and this allows to use the video, but not the audio. To allow audio on the iPhone, Apple would only need to change one small internal Safari setting (allowsInlineMediaPlayback), but at the moment they don't want to change that...

    See here at 'iOS 8 - automatic video fullscreen playback on the iPhone':

    Best regards,

  • Hi Klaus,

    I've bought the KRPano version krpano1.17.2 and it works fine.

    I've just downlaod the KRPano 1.18 and I've a watermark. How can I clear the watermark ?

    In this tread you talk abouyt this : load a youtube video


    Yes, the current 1.17 license is valid for all 1.x.x versions (from 1.17 and up).

    Thanks for your help. *smile*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!